1.伪类:不存在的类,特殊的类,主要是用来描述一个元素的特殊状态(比如说:第一个元素、被点击的元素、鼠标移动的元素等等......)
2.伪类的用法有(注意一点就是:根据所有的子元素排序)
2.1当所有元素相同时方可用此类方法(:元素)
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child()选中第n个子元素
特殊值: n 第n个 从n的范围到正无穷
2n或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
例子:
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
<li>第六个</li>
</ul>
ul>li:first-child{
color: red;
}
ul>li:last-child{
color: green;
}
ul>li:nth-child(n){
color: yellow;
}
ul>li:nth-child(2n){
color: darkblue;
}
ul>li:nth-child(even){
color: purple;
}
ul>li:nth-child(2n+1){
color: rosybrown;
}
ul>li:nth-child(odd){
color: fuchsia;
}
2.2当所有元素不相同时可用此类方法,在同类型中进行排序(:元素)
例子:
<ul>
<span>开始</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<span>中间</span>
<li>第四个</li>
<li>第五个</li>
<li>第六个</li>
<span>结尾</span>
</ul>
ul>li:first-of-type{
color: fuchsia;
}
ul>li:last-of-type{
color: yellow;
}
ul>li:nth-of-type(2n){
color: green;
}
3.有一个特殊元素:否定元素,将符合条件的元素从选择器中去除
ul>li:not(:nth-of-type(2)){
color: red;
}
ul>li:not(:nth-child(2)){
color: red;
}