CSS新手入门笔记整理：CSS3选择器

属性选择器

属性选择器，指的是通过“元素的属性”来选择元素的一种方式。

语法

元素[attr^="xxx"]{}
元素[attr$="xxx"]{}
元素[attr*="xxx"]{}

选择器	说明
E[attr^="xxx"]	选择元素E，其中E元素的attr属性是以xxX开头的任何字符
E[attr$="xxx”]	选择元素E，其中E元素的attr属性是以xxX结尾的任何字符
E[attr*="xxx"]	选择元素E，其中E元素的attr属性是包含xXX的任何字符

---

子元素伪类选择器

子元素伪类选择器，指的就是选择某一个元素下的子元素。

第一类

选择器	说明
E:first-child	选择父元素下的第一个子元素(该子元素类型为E，以下类同)
E:last-child	选择父元素下的最后一个子元素
E:nth-child(n)	选择父元素下的第n个子元素或奇偶元素，n取值有3种:数字、odd（奇数列）和even（偶数列），其中n从1开始。
E:only-child	选择父元素下唯一的子元素，该父元素只有一个子元素

语法

父元素 E:first-child{}
父元素 E:last-child{}
父元素 E:nth-child(n){}
父元素 E:only-child{}

---

第二类

选择器	说明
E:first-of-type	选择父元素下的第一个E类型的子元素
E:last-of-type	选择父元素下的最后一个E类型的子元素
E:nth-of-type(n)	选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种数字、odd（奇数列）和even（偶数列），n从1开始
E:only-of-type	选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素

语法

父元素 E:first-of-type{}
父元素 E:last-of-type{}
父元素 E:nth-of-type(n){}
父元素 only-of-type{}

---

区别

:first-child在选择父元素下的子元素时，不仅要区分元素类型，还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时，只需要区分元素类型，不要求是第一个子元素。

---

UI伪类选择器

• UI伪类选择器，指的是针对“元素的状态”来选择元素的一种伪类选择器。UI，全称“User Interface”，用户界面。
• 元素的状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。
• UI伪类选择器特点是：对于指定的样式，在默认状态下不起作用，只有当元素处于某种状态时才起作用。
• 大多数UI伪类选择器都是针对表单元素的。

选择器	说明
:focus	定义元素获取焦点时使用的样式。
::selection	定义页面中被选中文本的样式。
:checked	定义页面中被选中文本的样式。
:enabled	定义表单元素“可用”时的样式
:disabled	定义表单元素“禁用”时的样式
:read-write	定义表单元素“可读写”时的样式
:read-only	定义表单元素“只读”时的样式

语法

表单元素 :focus{}
表单元素 ::selection{}
表单元素 :checked{}
表单元素 :enabled{}
表单元素 :disabled{}
表单元素 :read-write{}
表单元素 :read-only{}

---

其他伪类选择器

选择器	说明
:root	选择HTML页面的根元素。
:empty	选择一个“不包含任何子元素和内容”的元素即空元素。
:target	选取页面中的某一个target元素。target元素指的是id被当成页面的锚点链接来使用的元素。
:not()	选取某一个元素之外的所有元素。

语法

:root{}
:empty{}
:target{}
:not(){}

---