介绍CSS的魔法工具——CSS选择器

作为网站制作前端工

那么，时至2020年06月06日给您说CSS的魔法工具——CSS选择器，读读受益匪浅哦。

CSS的魔法工具——CSS选择器：

1、*：通用选择器

假如我们想让文档中的每个元素都显示成红色，我们可以这么做：

* {color:red;}

通用选择器，可以匹配页面所有的元素。

2、.X：类选择器

类选择器的开头用.（点）进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式，好比按组进行归类，同一类的样式统一定义。

.error {

color: red;

}

如果把两个类串在一起，选择的就是同时具有两个类名的元素，类名的顺序则无所谓，比如 class="urgent warning" , css 选择器你也可以这样写 .warning .urgent。

3、X Y：后代选择器

后代选择器，英文名称：descendant selector。比如我们要选择在li元素中包含a标签的链接（不是文档中所有的链接），取消下划线的默认样式，我们可以这样代码实现：

li a {

text-decoration: none

}

如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的，后代元素的层级问题，可能会很深。

4、X：元素选择器

假如你想针对Html预定义的标签，比如类似：p,h3,em,a这些标签，我们可以快速为某类标签定义样式。如下段代码所示：

a { color: red; }

ul { margin-left: 0; }

5、#X：ID选择器

ID选择器的开头使用#号，但是你在使用的时候，需要谨慎。要考虑是否真的需要使用ID选择器来定义样式，id选择器比较局限，不能重用。因此需要慎重考虑。

#container {

width: 960px;

margin: auto;

}

如果看完上文，想必朋友们应该知道CSS的魔法工具——CSS选择器了吧，。