苏飞论坛
标题: 【零基础学习web前端】CSS选择器（元素，群组，类，ID，后代） [打印本页]
作者: Amy 时间: 2018-12-1 11:58
标题: 【零基础学习web前端】CSS选择器（元素，群组，类，ID，后代）
【零基础学习web前端】CSS选择器（元素，群组，类，ID，后代）
【零基础学习web前端】教程目录导航
[C#] 纯文本查看 复制代码
1. 元素选择器
2.群组选择器
3.类选择器
4.ID选择器
5.后代选择器
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
一、元素选择器
一个完整的HTML页面是由很多不同的元素组成。元素选择器，是直接使用HTML元素的名称作为选择器（如 html、p、h1、em、a、img等），换句话说，文档的元素就是最基本的选择器。由于使用元素的名称作为选择器，在W3C标准中，又把元素选择器称为类型选择器、标签选择器。
元素选择器匹配该类型的元素，并匹配DOM树中该类型元素的每一个实例，并为它们应用样式。如：
html { color：red }
h1 { color:blue }
二、群组选择器
假设希望 h2 元素和段落都是红色，则可以这样写
h2,p { color:red }
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:red;）将应用到这两个选择器所引用的元素。
多个选择器也可以使用这个规则，如
[CSS] 纯文本查看 复制代码
html,h2,p,a,table{
color:red;
font-size: 10px;
}
三、类选择器
类选择器根据类名来选择，前面用“.”来标志，如：
[CSS] 纯文本查看 复制代码
.demoName{
color: red;
}
这需要在HTML中，元素先定义一个class的属性，如：
[HTML] 纯文本查看 复制代码
<p class="demoName">
这句话要红色的
</p>
<h2 class="demoName">
这句话也要红色的
</h2>
两个元素的class都是demoName，则两个都应用这个css。
四、ID选择器
ID选择器类似于类选择器，ID选择器前面是用#号标志的。
ID选择器具有唯一性，即同一个id在同一个文档页面中只能出现一次。
[CSS] 纯文本查看 复制代码
#demoName{
color: red;
}
这里表示id为demoName的元素设置字体为红色。
在页面中定义一个元素的id为demoName，如：
[HTML] 纯文本查看 复制代码
<div id="demoName">
这些区域的字颜色为红色
</div>
五、后代选择器
后代选择器又称包含选择器，用来选择特定元素或元素后代，将父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。
后代选择器中的元素不仅只能有两个，对于多层祖先后代关系，可以有多个空格来分开。
例如只希望h1元素中的espan元素应用样式，
[CSS] 纯文本查看 复制代码
h2 span{
color: red;
}
这个规则只会将h2中的span元素文本变成红色，其他span元素不会应用这个颜色
[HTML] 纯文本查看 复制代码
<h2>
这是<span>重要的</span>标题
</h2>
<span>这也是重要的标题</span>
图示：
(, 下载次数: 91)
