很多人不知道的css选择器

1. :nth-child() 和 :nth-of-type()

   :nth-child(n)：选择父元素的第n个子元素。

   :nth-of-type(n)：选择父元素的第n个特定类型的子元素。

   

   /* 选择第3个子元素 */

   div:nth-child(3) {

       color: red;

   }

 

   /* 选择第2个段落元素 */

   p:nth-of-type(2) {

       color: blue;

   }

   

 2. :not()

   :not(selector)：选择不匹配指定选择器的元素。

   /* 选择所有不是段落的元素 */

   :not(p) {

       color: green;

   }

   

 3. :empty

   :empty：选择没有任何子元素（包括文本节点）的元素。

   /* 选择所有空的div元素 */

   div:empty {

       display: none;

   }

4. :first-of-type 和 :last-of-type

:first-of-type：选择父元素中第一个特定类型的子元素。

:last-of-type：选择父元素中最后一个特定类型的子元素。

   

   /* 选择第一个段落元素 */

   p:first-of-type {

       font-weight: bold;

   }

 

   /* 选择最后一个段落元素 */

   p:last-of-type {

       font-style: italic;

   }

5. :only-child 和 :only-of-type

   :only-child：选择父元素中唯一的子元素。

   :only-of-type：选择父元素中唯一特定类型的子元素。

   

   /* 选择唯一的子元素 */

   div:only-child {

       background-color: yellow;

   }

 

   /* 选择唯一的段落元素 */

   p:only-of-type {

       background-color: pink;

   }

   

 6. :target

   :target：选择当前活动的锚点目标元素。

   

   /* 当URL中有#section1时，选择该元素 */

   #section1:target {

       background-color: lightblue;

   }

   

 7. :checked

   :checked：选择所有被选中的表单元素（如复选框或单选按钮）。

   

   /* 选择所有被选中的复选框 */

   input[type="checkbox"]:checked {

       border: 2px solid red;

   }

   

8. :disabled 和 :enabled

   :disabled：选择所有被禁用的表单元素。

   :enabled：选择所有启用的表单元素。

   

   /* 选择所有被禁用的输入框 */

   input:disabled {

       background-color: #ccc;

   }

 

   /* 选择所有启用的输入框 */

   input:enabled {

       background-color: #fff;

   }

   

 9. :focus-within

   :focus-within：选择包含获得焦点的子元素的父元素。

  

   /* 当子元素获得焦点时，改变父元素的背景色 */

   div:focus-within {

       background-color: lightyellow;

   }

   

10. :placeholder-shown

   :placeholder-shown：选择显示占位符文本的输入框。

   

   /* 选择显示占位符文本的输入框 */

   input:placeholder-shown {

       border: 1px dashed #999;

   }

   

11. :in-range 和 :out-of-range

   :in-range：选择值在指定范围内的输入元素。

   :out-of-range：选择值超出指定范围的输入元素。

   

   /* 选择值在范围内的输入框 */

   input:in-range {

       border: 2px solid green;

   }

 

   /* 选择值超出范围的输入框 */

   input:out-of-range {

       border: 2px solid red;

   }

   

12. :valid 和 :invalid

   :valid：选择通过验证的表单元素。

   :invalid：选择未通过验证的表单元素。

   

   /* 选择通过验证的输入框 */

   input:valid {

       border: 2px solid green;

   }

 

   /* 选择未通过验证的输入框 */

   input:invalid {

       border: 2px solid red;

   }

   

13. :required 和 :optional

   :required：选择所有必填的表单元素。

   :optional：选择所有可选的表单元素。

   

   /* 选择所有必填的输入框 */

   input:required {

       border: 2px solid red;

   }

 

   /* 选择所有可选的输入框 */

   input:optional {

       border: 2px solid #ccc;

   }

   

14. :read-only 和 :read-write

   :read-only：选择所有只读的表单元素。

   :read-write：选择所有可读写的表单元素。

  

   /* 选择所有只读的输入框 */

   input:read-only {

       background-color: #eee;

   }

 

   /* 选择所有可读写的输入框 */

   input:read-write {

       background-color: #fff;

   }

   

15. :lang()

   :lang(language-code)：选择指定语言的元素。

   

   /* 选择所有法语元素 */

   :lang(fr) {

       font-style: italic;

   }