css伪元素

 

伪类

 :first-child 伪类。伪类向元素的第一个子元素添加样式。

例如我们想列表中的第一个元素做点特别的定义

li:first-child{color:red}

<ul>

<li>这是ul里的一个li</li>

<li>这是ul里的二个li</li>

<li>这是ul里的三个li</li>

</ul>

链接伪类：

:link 和:visited

例如:

a:link{color:#33FF00;}

a:visited {color:#FF0000;}

<a href="http://www.baidu.com">百度</a>

动态伪类：

:hover，:active，:focus.

:hover 表示鼠标移上去的状态。

:active，鼠标点击按下的状态。

:focus，表示得到焦点的状态。

:active和:focus的区别。

例如:

<label for="username">用户名:</label><input type="text" id="username" />

<label for="password">密码:</label><input type="password" id="password" />

Css:

input#username:active{background:#000099}

input#password:focus{background:#00FF00}

不难发现：点击第一个文本框，点了文本框的背景色在松开鼠标时就没了。

而点击第二个文本框。除非我们点击网页其他地方，不然它还是会一直给css定义到

伪对象

:first-letter

用于设置对象内的第一个字符的样式表属性，最常见的应用就是配合float做首字母下沉的效果。

P:first-letter{float:left;font-size:2.5em;color:red}

注:first-letter伪对象仅作用于块元素，内联元素需加display:block转换成块元素才可以。

:first-line

跟first-letter类似。