css3 伪类选择器

结构性伪类

demo

<div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>

1. :first-child --选择第一个元素

   code	example
   .line:first-child {background: #289373;}

|

2. :last-child --选择最后一个元素

   code	example
   .line:last-child {background: #ff1133;}

|

3. :nth-child(n) --选择每个元素；:nth-child(n+2) --选择第2个开始的每个元素；

   code	example
   .line:nth-child(n+2) {color: #ccc;}

|

4. :empty --选择空元素

   demo	code	example
   <div> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> <div></div> </div>	.line:empty{ height: 16px; background-color: lavender; }

|

5. :only-child() --匹配属于父元素中唯一子元素的.line

   demo	code	example
   <div> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> <div> <div>ddd</div> </div>	.line:only-child{text-decoration: underline;}

|

demo

<div>
<div>aaa</div>
<div>bbb</div>
<span>pccc</span>
<div>ccc</div>
<span>pddd</span>
<div>ddd</div>
</div>

6. :nth-of-type(2n) --选择每类(标签)的2n个

   code	example
   .line:nth-of-type(2n){border: 1px solid lightgray;}

|

7. :nth-last-of-type(2n) --倒数选择每类(标签)的2n个

   code	example
   .line:nth-last-of-type(2n){border-left: 3px solid lightskyblue;}

|

8. :first-of-type --选择每类(标签)的第一个

   code	example
   .line:first-of-type{text-decoration: line-through;}

|

9. :only-of-type

   demo	code	example
   <div> <div>aaa</div> <div>bbb</div> <span>pccc</span> <p>33333</p> </div>	.line:only-of-type{color: lightcoral;}

|

10. :root() --匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

    暂时没用过

目标伪类

1. :target --相关URL#后面指向的元素

   demo	code	example
   <div> <div> <a href="#item1">item1</a> <a href="#item2">item2</a> </div> <div> <div>item1111</div> <div>item2222</div> </div> </div>	.item:target{ background: #000; color: lightyellow; }

|

否定伪类

1. :not() --取反

   demo	code	example
   <div> <div>aaa</div> <div>bbb</div> <span>pccc</span> <p>33333</p> </div>	.line:not(.line:first-child){color: lightsalmon;}

|

UI元素状态伪类

1. :hover

2. :visited

3. :active

   demo	code	example
   <div> <a href="#nav1">item1</a> <a href="#nav2">item2</a> <a href="#nav3">item3</a> </div>	.ui-a a{text-decoration: none;} .ui-a a:hover{border-bottom: 1px solid mediumblue;} .ui-a a:visited{color: green;} .ui-a a:active{color: red;}

|

4. :enabled

5. :disabled

6. :checked

7. :focus

   demo	code	example
   <form action=""> <input type="text" disabled><br/> <input type="text" ><br/> <input type="checkbox">男 </form>	form input:focus{outline-color: red;} form input:enabled{border: 1px solid blue;} form input:disabled{background: #ccc;} form input:checked{outline: 1px solid darkred;}

|

8. ::selection

   暂时没用过

css3 伪类选择器

原文：https://www.cnblogs.com/y-y77/p/15305829.html