本文深入解析HTML CSS选择器，包括标记选择器、类别选择器、ID选择器、类选择器与ID选择器的区别，以及复合选择器如交集选择器、并集选择器和后代选择器的应用。
一、基本选择器
1、标记选择器
（1）定义：
h1
{
color:blue;
font-size:12px;
}
为何叫标记选择器呢？是因为此类选择器是针对HTML的标记而定义的，比如<h1>、<p>、<li>、<body>、<div>、<span>等。
（2）使用：
<h1>标记选择器演示</h1>
2、类别选择器
（1）定义：
.red
{
color:red;
font-size:12px;
}
{
color:red;
font-size:12px;
}
（2）使用：
<p class="red">类别选择器演示</p>
3、ID选择器
（1）定义：
#blue
{
color:blue;
font-size:20px;
}
（2）使用：
<div id="blue">ID选择器演示</div>
4、类选择器与ID选择器的区别
类选择器可以给多个对象使用，ID选择器仅能给一个指定ID的对象使用。
二、复合选择器
1、交集选择器
（1）定义：
h1.red
{
color:red;
}
或者
div#bule
{
color:bule;
}
（2）解释：
其中h1或div都是标识选择器，其后紧跟着类选择器（.red)或ID选择器(#bule)，之间无空格
2、并集选择器
（1）定义：
div,h1.red,div#bule
{
.......
}
（2）解释：
并集选择器用"，"号分隔开基本选择器和复合选择器，其{.......}中的定义对于选择器div、h1.red和div.bule均生效
3、后代选择器
（1）定义：
div h1.first span.letter
{
.......
}
（2）解释：
后代选择器用空格分隔开，其{.......}中的定义仅对div块中的声明类选择first的h1标识中的span标识生效，且span使用的类选择器必须为letter。晕了没？若晕了就看下面的例子 
<div>
<h1 class="first">
<span class="letter">无间道</span>
<span class="letter1">主演：刘德华、梁朝伟</span>
<span id="letter2">这部电影值得看</span>
</h1>
<h1>
<span>我是警察</span>
</h1>
</div>
上述定义仅对标红的"无间道"生效，对其他内容，如"主演：刘德华、梁朝伟"均不生效。
到这里累了没有？休息一下吧。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
