CSS基础选择器与合并选择器解析

本文创建于2020年9月，以下为正文：

1.通用选择器，全局选择器（*）

通用选择器对整个页面中所有HTML标签样式定义，这种功能类似“标签选择器”，覆盖的对象更加广泛，是整个HTML的所有标签，功能是强大，但是这样反而限制了它的灵活性。

通用选择器可以与任意元素匹配，常用于设置一些默认样式，但是它的优先级是最低的。

如使用代码使HTML中任意标签元素文本颜色全部设置为红色：

*{color：red;}

2.元素选择器

元素选择器是最常见的CSS选择器

HTML文档中的元素 p、h1、b、div、a、img、body等甚至可以是html本身

如：html{color:red;}

​ h1{color:black;}

​ h2{color:biue;}

3.类选择器

类选择器以一个点号显示。该选择器可以单独使用，也可以与其它元素结合使用。

.className{ }

如：.box{color:red;}

注意：类名不能以数字开头，在一个页面中class名字可以重复

如果只希望段落文本显示为红色则代码为：

p.important{color:red;}

4.ID选择器

ID选择器类似于类选择器，不过也有差别。ID选择器前面有一个#符号

如：#idName{ } #box{color:red;}

一个页面中id相同的id名只能出现一次

一般重复使用的样式不使用ID选择器，因为ID属性是唯一的

类选择器与ID选择器相同之处与不同之处在哪儿呢？

相同之处在于：都可以应用于任何元素

区别在于：

1.ID选择器只能在文档中使用一次。与类选择器不同，在一个html文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次

2.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID词列表）。

5.合并选择器

语法为：选择器1，选择器2…{ }

作用是可以提取共同的样式，减少重复代码

例如：.header ,.footer{height:300px;} 中间由逗号隔开

代码示例：

< head lang="en">

< meta charset="UTF-8">

​ < title>合并选择器< /title>

​ < style>

​ p,div,h1,.xiang,#buxiang{

​ color:green;

}

​ < /style>

< body>

​ < p>果汁< /p>

​ < p>咖啡< /p>

​ < div>西红柿< /div>

​ < div>胡萝卜< /div>

​ < div>大白菜< /div>

​ < h1>米饭< /h1>

​ < h1>面条< /h1>

​ < i class="xiang"> 我也想变颜色< /i>

​ < i> 我不想变颜色< /i>

​ < i id="buxiang"> 我不想变颜色< /i>

< /body>

< /html>

图例为：

（ps:如果您觉得有用，请点赞转发，让更多人看到哦）

---

小伙伴也可以加一下QQ群，可以获取资源以及更多学习方法哦

QQ群：1126277960 （暗号：CSDN）