189 8069 5689
我们提供的服务有：成都网站设计、成都做网站、微信公众号开发、网站优化、网站认证、河北ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的河北网站制作公司
本节我们来介绍一下 CSS 中几种常用选择器的定义方式：
通用选择器用星号
*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，如下所示：
* {
margin: 0 auto;
padding: 0;
}
注意：虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素，但并不建议在生产环境中过于频繁地使用通用选择器。正是因为通用选择器会匹配网页上每个元素的特点，频繁的使用会给浏览器带来太多不必要的压力。
一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：
p {
color: blue;
}
p 选择器能够匹配文档中所有的
标签。
ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到井号
#，后面紧跟 ID 属性的值，如下所示：
#nav {
color: red;
}
#nav 选择器能够匹配文档中具有
id="nav" 属性的标签。
类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号
.，后面紧跟 class 属性的值，如下所示：
.black {
color: black;
}
.black 选择器能够匹配文档中所有具有
class="black" 属性的标签。
由于 class 属性不是唯一的，可以应用于不同的标签，因此您还可以在定义类选择器时指定具体的标签，如下所示：
p.black {
color: black;
}
p.black 选择器仅会将其中的样式应用到所有具有
class="black" 属性的
标签中，对于其它的具有
class="black" 属性的标签则没有影响。
另外，一个 HTML 标签中 class 属性可能不止一个，例如：
假如我们要为所有 class 属性包含 info 的元素设置粗体，为所有 class 属性包含 selected 的元素设置红色字体，为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景，则可以写成下面这样：
.info {
font-weight:bold;
}
.selected {
color: red;
}
.info.selected {
background: blue;
}
这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。
注意：多类选择器中，多个 class 属性之间是紧挨着的（例如 .info.selected），不需要使用空格分开。
当一个 子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号 欢迎访问编程帮！ 编程帮（biancheng.net），一个在线学习编程的网站，专注于分享优质编程教程。 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号 通用兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号 分组选择器可以将同样的样式规则应用到多个选择器中，每个选择器之间使用逗号 我们可以看到选择器 属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号 属性选择器中方括号
标签嵌套在一个
标签内部的时候，就可以将这个
标签看作是
标签的后代。当我们需要选择一个标签的后代标签时，就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开，如下所示：
ul li a {
text-decoration: none;
}
ul li a 选择器仅会匹配无序列表
标签的所有后代
标签。
6. 子选择器
>分隔开，如下所示：
p > strong {
color:red;
}
p > strong 选择器会将下面代码中第一个
标签的子标签
内的文字设置为红色，但对第二个
标签中的
标签则没有影响。
7. 相邻兄弟选择器
+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素，如下所示：
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}
h1 + p 选择器会匹配同一父级元素下紧邻
标签。
ul.task + p 选择器则会匹配同一父级元素下紧邻
标签，但
class="task" 属性。
8. 通用兄弟选择器
~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素，如下所示：
h1 ∼ p {
color: blue;
font-size: 18px;
}
h1 ∼ p 选择器会匹配同一父级元素下
标签之后的所用
标签。
9. 分组选择器
,进行分隔，这么做可以避免定义重复的样式规则，最大程度地减少 CSS 样式表中的代码。例如，在 CSS 样式表中，不同的选择器中可能包含同样的样式规则，如下所示：
h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
}
h1、
h2、
h3 中包含相同的样式
font-weight: normal;，这时就可以先使用分组选择器为
h1、
h2、
h3 定义它们之间同样的样式规则，然后再分别定义它们之间不同的样式规则，如下所示：
h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
10. 属性选择器
[ ]来指定标签具有的属性信息，如下所示：
input[type="text"] {
color: blue;
}
input[type="text"] 选择器会匹配所有具有
type="text" 属性的
标签。
[ ]内的属性信息还支持以下几种写法：
target 属性元素； target="_blank" 属性的元素； title 属性包含单词“flower”的所有元素； lang 属性正好是“en”或以“en”为开头的所有元素。
文章标题：CSS选择器
标题链接：http://cdxtjz.cn/article/cocccdj.html