CSS选择器

注意：

由于对CSS的解释是自上而下的，对于一个元素的相同属性描述，放在下面的会覆盖掉位于上面的属性描述，因此我们在对元素的选择中一定要注意书写顺序。

如：

a:visited {color: #00FF00; text-decoration: none}

a:hover {color: #FF00FF; text-decoration: underline}

 

采用这样的书写顺序，无论链接有没有被访问过，只要当鼠标移到链接上，链接都会变成蓝色并有下划线。但是，如果采用下面的书写顺序：

 

a:hover {color: #FF00FF; text-decoration: underline}

a:visited {color: #00FF00; text-decoration: none}

 

如果链接被访问过，则当你鼠标移到链接上时不会变成蓝色并有下划线，依然保持绿色。

 

1.子选择器与后代选择器的区别：

子选择器仅是指它的直接后代，或者可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

子选择器（>）和后代选择器（空格）的区别：都表示“祖先-后代”的关系，但是>必须是“爸爸>儿子”，而空格不仅可以是“爸爸儿子”，还能是“爷爷儿”、“太爷爷儿子”。

2.后代选择器

后代选择器也称包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。

后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。

3.通用选择器用*来表示。

4.伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类选择器了。

Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。

伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。

 

5.id选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。

根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，你将一个元素的id取值为”navi”，那么在同一页面你就不能再将其他元素id取名为”navi”了。

尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。

然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于好的编程习惯，同一个id不要在页面中出现第二次。

前面以”#”号来标志，在样式里面可以这样定义：

#demoDiv{

color:#FF0000;

}

 

6.标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签

采用相应的CSS样式。

 

7.类选择器

类选择器根据类名来选择，前面以”.”来标志。

如：

.demoDiv{

color:#FF0000;

}

在HTML中，元素可以定义一个class的属性。

如：

<div class="demoDiv">

这个区域字体颜色为红色

</div>

 

8.群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。

如：

p, td, li {

line-height:20px;

color:#c00;

}

#main p, #sider span {

color:#000;

line-height:26px;

}

.#main p span {

color:#f60;

}

 

9.相邻兄弟选择器（相邻同胞选择器）

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

这里面有2个关键信息：（1）紧接在另一元素后；（2）二者有相同父元素

参考：理解css相邻兄弟选择器 - 我是冰霜 - 博客园 (cnblogs.com)

https://www.cnblogs.com/hanmk/p/9062084.html

CSS 参考 - CSS（层叠样式表） | MDN (mozilla.org)

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#选择器

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors