CSS选择器

在CSS选择器中，基本常用选择器有标签选择器、类选择器、ID选择器、普通选择器，还有层次选择器、伪类选择器和属性选择器。前面部分的选择器较为简单，不做笔记，本文章仅记录关于层次选择器、伪类选择器和属性选择器的笔记。

**

**1.后代选择器： 使用空格隔开两个选择器，表示选择第一个元素中后代里的元素,后代元素可以是子元素也可以是孙元素。 例如： CSS:.one span { color: blueviolet; } html：

p1

选择了one类下的所有span元素，无论是子元素还是孙元素，字体颜色都会发生改变。

效果图：

2.子代选择器： 使用">"隔开的i两个选择器，表示直接选择第一个元素的后代子元素，孙元素无法被选中。 例如：

HTML:

p2

仅选择了two类下的子元素span，孙元素下的span并不受影响。

3.相邻同胞选择器： 使用"+"连接两个选择器，表示选择下一个兄弟元素

HTML:

p标签

"+"后面连接的必须是相邻的兄弟元素，如果中间有其他元素将无法选中。

4. 一般同胞选择器： 使用~隔开两个选择器，表示选择了第一个元素之后的类型的元素 css:

HTML:

孙元素下p标签

p标签

选择test3类之后的同级p标签，即使中间有其他元素，依然能选择到。同时其他div下的p标签并不会被选择。

设arrt为元素的名称： [arrt] 选择具有attr属性的元素，无论该属性的值是什么 CSS:

HTML:

选中了有title的元素，即前三个div，字体加粗。

[arrt=val] 选择拥有attr属性的元素，且attr属性中的值要为val 例如：

选择有title属性且title属性为two的元素，即代码片段中onediv和towdiv子类中的的第二个div，设置字体颜色为粉色。

[arrt^val] 选择有attr属性的元素，并且该属性需要以val开头，val为一个字符或字符串

选择title属性中以"t"开头的元素，设置背景为棕色。

[arrt$val] 选择有attr属性的元素，并且该属性需要以val结尾，val为一个字符或字符串

选择title属性中以"e"结尾的元素，设置斜体

[arrt*=val] 选择有attr属性的元素，并且该属性需要包含val(类似模糊查询，只要包含即可)。

选中title中包含"w"字符的元素

选择title中有one属性的元素，例子中只会选择第一个和第三个div，第四个div中虽然有one字符串，但并不是one属性，所以不会选择到。

1.子代元素相关伪类选择器： :only-child 选择作为别人独生子的元素 :first-child 选择作为别人第一个孩子的元素 :last-child 选择作为别人最后一个孩子的元素 :nth-child(n) 选择作为别人第n个孩子的元素 :nth-last-child 选择作为别人倒数第n个孩子的元素 :first-of-type 选择每种类型中的第一个孩子 :last-of-type 选择每种类型中的倒数第一个孩子 :nth-of-type(n) 选择每种类型中的第n个孩子的元素 :nth-last-of-type 选择每种类型中的最后一个孩子的元素

1

1

2

3

1

2

3

4

1

2

3

4

1

2

3

4

5

注意： 如果元素中的子元素下还有若干个孙元素，那么在选择时，孙元素中相应的元素也会被选中。 例如：选择div元素下第一个元素

1

孙

11

1

2

3

1

2

3

4

可以看到中间的div中，不仅仅是第一个span被选中，在子元素div one类下的第一个p标签也被选中。

2.元素状态相关伪类选择器 :link 未被访问的状态，a标签 :visitied 已访问过的状态，a标签 :hover 鼠标悬停的状态，a标签，其他标签 :active 活动的状态，a标签，其他标签 :focus 聚焦的状态 :checked 用户选中的单选按钮和复选按钮 :default 默认选中的单选按钮和复选按钮 :enabled :disabled可用和禁用的表单控件 :valid :invalid 通过验证的、不通过验证的 :required :optional 必填的和选填的 :in-range :out-of-range 在范围内的、在范围外的