伪类(一):链接、文本、文本框

一、链接



runoob.com

  1. :link:对未访问的链接添加样式
  2. :visited:对已访问的链接添加样式
  3. :active:当点击链接时添加样式
  4. :hover :当鼠标移到该文本上时添加样式

二、文本框样式



First name: Last name:

三、文本样式

  1. :first-letter



My name is Donald.

  1. :first-line

用于向对应标签的文本首行设置特殊样式(这里的首行,是指在当前屏幕尺寸下,能显示的字符长度并将其渲染)

3.E:first-child(last-child同理)

用于指定其父标签的第一个子级,且该标签是E标签,才应用这个样式。



This paragraph is the first child of its parent (body).

Welcome to My Homepage

This paragraph is not the first child of its parent.

This paragraph is the first child of its parent

This paragraph is not the first child of its parent.

4.:nth-child(n)

用于指定只有当该标签是其父标签的第n个子级时,才应用这个样式,从1开始计数。值是even时,选取子级为偶数的应用样式;odd则选取奇数。里面可以跟公式,但字母只能是n,且此时n从0开始。

5.:nth-last-child(n)

用于指定只有当该标签是其父标签的倒数第n个子级时,才应用这个样式,从1开始计数。里面可以跟公式,但字母只能是n,且此时n从0开始。

6.E:nth-of-type(n)

只在父元素的同类型(E)子元素范围中,匹配第n个

7.:nth-child(n)和:nth-of-type(n)区别

nth-child(n)是从父标签下的第一个子标签开始数;nth-of-type(n)是从父标签下符合的类型开始数

四、标签文本悬停





这是一个段落

1

五、CSS3过渡属性--transition

一般同hover一起使用,谁做过渡给谁添加
5.1)transition

 transition: width 2s ease 1s;


5.3)transition-duration

transition-duration: 2s;

5.4)transition-timing-function

transition-timing-function:ease

5.5)transition-delay


你可能感兴趣的:(伪类(一):链接、文本、文本框)