CSS3基础笔记整理（二）

2018-07-09

五、选择器

1、属性选择器：

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

2、结构性伪类选择器—root：
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

3、结构性伪类选择器—not：
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

4、结构性伪类选择器—empty：
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
5、结构性伪类选择器—first-child：
:first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
6、结构性伪类选择器—last-child：
:last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。
7、结构性伪类选择器—nth-child(n)：
:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中n是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
8、结构性伪类选择器—nth-last-child(n)
9、first-of-type选择器
:first-of-type选择器类似于:first-child选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
10、 nth-of-type(n)选择器
:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
11、 last-of-type选择器
:last-of-type选择器和:first-of-type选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
12、nth-last-of-type(n)选择器
13、only-child选择器
:only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
14、 only-of-type选择器

15、 :enabled选择器
在Web的表单中，有些表单元素有可用:enabled和不可用:disabled状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。
16、 :disabled选择器
:disabled选择器刚好与:enabled选择器相反，用来选择不可用表单元素。
17、 :checked选择器
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。而:checked表示的是选中状态。
18、 ::selection选择器
19、 :read-only选择器
:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了readonly=’readonly’。
20、:read-write选择器
:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。
22、 ::before和::after
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和content配合使用，使用的场景最多的就是清除浮动。