CSS3——选择器

新增基本选择器

子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器

基本选择器新增的四种选择器

1、子元素选择器（直接后代选择器）

概念：子元素选择器只能选择某元素的子元素

语法格式：父元素 > 子元素

2、相邻兄弟元素选择器

概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素

语法格式：元素+兄弟相邻元素（Eelement+Sibling）

3、通用兄弟选择器

概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素。

语法格式：元素~后面所有兄弟相邻元素（Eelement~Sibling）

4、群组选择器

概念：群组选择器是将具有像同样式的元素分组在一起，每个选择器之间使用逗号"，"隔开

语法：元素1，元素2，...，元素n （Eelement1，Eelement2，...，Eelement n）

属性选择器

对带有指定属性的HTML元素设置样式，使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

1、Element[attribute]

概念：选择所有带有attribute属性元素

2、Element[attribute = "value"]

概念：选择所有使用attribute = "value"的元素

3、Element[attribute ~= "value"]

概念：选择attribute属性包含单词"value"的元素，value是一个独立的属性值

解释：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词

属性值列表中包含value，而不是在某个值中以value开头或结尾，所以five不会变红

选择器选中的是class值列表中包含“s”的元素，不能选中以指定词汇开头的“stwo、sthree、sone、sfour”这样的元素，所以one和two字体变红色

4、Element[attribute ^= "value"]

概念：选择attribute属性值以"value"开头的所有元素

例子：

Element[attribute^="value"]匹配指定属性的指定value值开头的元素，如果class中有多个value值，第一个值中的第一个字母不是指定的值，即使后面的属性中首字母是指定的值，那么也不能匹配上，比如，<div class="one stwo">，第一个值的首字母是"o"，即使后面的值stwo的首字母是“s”，那么也匹配不上。所以four、five变红，其它不变。

5、Element[attribute $= "value"]

概念：选择attribute属性值以"value"结尾的所有元素

6、Element[attribute *= "value"]

概念：选择attribute属性值包含"value"的所有元素，value是其属性值的一个字串即可

匹配的是指定属性、并且属性值中包含value的都可以匹配到，所以one、two、three、four、five都变红

7、Element[attribute |= "value"]

概念：选择attribute属性值为"value"或以"value-"开头的元素

匹配的是指定的属性，并且属性值是以“value-“开头的元素，因此div[class|="s"]能够匹配到s-one，所以two变红

伪类选择器

1、动态伪类

这些伪类并不存在于HTML中，只有当用户和网站交互时才能体现出来

锚点伪类 

:link,  :visited

用户行为伪类

:hover,  :active,  :focus 

:active 选择器用于选择活动链接，譬如当您在一个链接上点击时，它就会成为活动的（激活的）。

:focus伪类在元素获得焦点时向元素添加特殊的样式

2、UI元素状态伪类

我们把":enabled", ":disabled", ":checked"伪类称为UI元素状态伪类

enabled是可编辑状态（默认是这个），disabled是不可编辑状态

:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）

:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）

:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

3、CSS3结构类

nth选择器，也成为CSS3结构类

选择方法：

1、Element:first-child

概念：选择属于其父元素的首个子元素的每个Element元素。可配合前面的选择器使用，如直接后代选择器。

2、Element:last-child

概念：指定属于其父元素的最后一个子元素的Element元素。

解释：这里说的最后一个，确指最后一个位置上是该Element元素。并不是说父元素中的最后一个Element，而是当Element是父元素中的最后一个元素时，才能进行选择。

---

3、Element:nth-child(N)

概念：选择器匹配属于其父元素的第N个子元素，在确定元素的编号时，不考虑元素的类型，按顺序排。

1，2，3三条要满足    是想选中的元素类型 且 是第N个元素

对参数N的扩展：

1、N可以是一个确切的数 number，如 Element:nth-child(number)

2、N可以是一个简单表达式，取值从0开始计算，这里只能是n，不能用其他字母代替，如 Element:nth-child(n)

3、N可以是其他表达式，odd和even是可用于匹配下标是奇数或偶数的关键词，如 Element:nth-child(odd)  Element:nth-child(even)  Element:nth-child(2n+1)  Element:nth-child(2n)  Element:nth-child(3n+2)等等

4、Element:nth-last-child(N)

概念：匹配属于其元素的第N个子元素的每个元素，不论元素的类型（计数时不管是什么元素类型都算上），从最后一个子元素开始计数（从1开始计数） 

段落6的背景颜色是绿色，p:nth-last-child(4)匹配的是p元素的父元素中的倒数第四个子元素，正好是p元素，所以其背景颜色变为绿色

p:nth-last-child(2)匹配的是p元素的父元素中的倒数第二个子元素，倒数第二个子元素是div元素，不是p元素，匹配不到，所以没有背景颜色

---

5、Element:nth-of-type(N)

概念：匹配属于父元素的特定类型（计数时只计数特定类型）的第N个子元素的每个元素

6、Element:nth-last-of-type(N)

匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数

p:nth-last-of-type(2)匹配的是父元素下特定类型p元素的倒数第2个p元素，倒数第2个P元素是段落3，段落3的字体颜色是红色

---

7、Element:first-of-type

概念：匹配属于其父元素的特定类型的首个子元素的每个元素

8、Element:last-of-type

概念：匹配属于其父元素的特定类型的最后一个子元素的每个元素

---

9、Element:only-child

概念：匹配属于其父元素的唯一子元素的每个元素，（其父元素数量上只有一个子元素，且类型也是该Element）

所有的P元素都不是其父元素中的唯一子元素，代码中的所有P标签中的字体没有改变颜色。

10、Element:only-of-type

概念：匹配属于其父元素的特定类型的唯一子元素的每个元素，（其父元素数量上可以有多个子元素，但只有一个该Element子元素）

: only-of-type匹配属于其父元素的特定类型的唯一的子元素，这个元素的父元素中可以有其它类型的子元素存在，但是这个指定的类型的元素有且只能有这一个。“第四段文字”和“第一段文字”的字体颜色是红色。

11、Element:empty

概念：匹配没有子元素（包括文本节点）的每个元素

4、否定选择器  :not(Element/selector)

概念：匹配非指定元素/选择器的每个元素

语法格式：父元素：not(子元素/子选择器）  ( Father:not(Children/selector))

CSS权重

权重等级与权值：行内样式(1000) > ID选择器(100) > 类、属性选择器和伪类选择器(10) > 元素和伪类选择器(1) > *(0)

5、伪元素

伪元素用于向某些选择器设置特殊效果

语法格式： 元素::伪元素（Element::pseudo-element)

1、Element::first-line

概念：根据"first-line"伪元素中的样式对Element元素的第一行文本进行格式化

说明："first-line"伪元素只能用于块级元素

2、Element::first-letter

概念：用于向文本的首字母设置特殊样式

说明："first-letter"伪元素只能用于块级元素

3、Element::before

概念：在元素的内容前面插入新内容

说明：常用"content"配合使用

 ::before伪元素的特点：1、第一个子元素   2、行级元素   3、内容通过content写入   4、在页面控制器标签中找不到对应的标签   5、可以设置css样式

4、Element::after

概念：在元素的内容后面插入新内容

说明：常用"content"配合使用，多用于清除浮动 display="block"'; content=" "; clear="both";

5、Element::selection

概念：用于设置在浏览器中选中文本后的背景色与前景色