本文详细介绍了CSS中的基础选择器，包括标签选择器、id选择器、class类选择器、原子类和通配符选择器。接着讨论了复合选择器，如后代选择器、交集选择器和并集选择器。还提到了伪类选择器的“爱恨原则”。最后，讲解了元素关系选择器，包括子选择器、相邻兄弟选择器和通用兄弟选择器，以及它们在HTML结构中的应用。
一、基础选择器
1.标签选择器
按照标签找元素，不论结构多复杂，都能找到对应的标签。
例：
<style>
p{
color: red;
}
</style>
<p>标签选择器</p>
效果：
2.id选择器
通过id可以找到指定的元素。
id类似于身份证号，一个id值，只能给一个标签使用。
例：
#red{
color: red;
}
#blue{
color: blue;
}
</style>
<p id="red">id选择器</p>
<p id="blue">id选择器</p>
<p>id选择器</p>
效果：
3.class类选择器
类名的命名规则：可以是由字母、数字、下划线、中划线，但是不能以数字或中划线开头。
一个标签可以有多个class。
例：
.red{
color: red;
}
.blue{
color: blue;
}
.fs30{
font-size: 30px;
}
</style>
<P class="red">类选择器</P>
<P class="blue fs30">类选择器</P>
<P>类选择器</P>
效果：
4.原子类
在做网页项目前，可以将所有的常用字号、文字颜色、行高、内外边距等都设置为单独的类。
例：
.fs14{ .color-red{
font-size: 14px; color: red;
} }
.fs20{ .color-blue{
font-size:20px; color:blue;
} }
5.通配符选择器
可以找到页面上的所有元素，一般用于去除标签默认的内外边距值。
例：
*{
margin: 0;
padding: 0;
}
二、复合选择器
1.后代选择器
css选择器中，使用空格表示“后代”。
例：
.box p{
color: red;
}
</style>
<div class="box">
<p>后代选择器</p>
</div>
效果：
“后代”并不一定是“儿子”，后代选择器可以有很多空格，隔开好几代。
例：
.box ul li p{
color: red;
}
</style>
<div class="box">
<ul>
<li>
<p>后代选择器</p>
</li>
</ul>
</div>
效果：
2.交集选择器
中间无空格，连着写。
例：
选择有.title类的h1标签，用交集选择器。
h1.title{
color: red;
}
</style>
<h1 class="title">交集选择器</h1>
效果：
3.并集选择器
并集选择器也叫做分组选择器，用逗号表示分组。
例：
h3,p,div{
color: red;
}
</style>
<h3>并集选择器</h3>
<p>并集选择器</p>
<div>并集选择器</div>
效果：
三、伪类（爱恨原则）
1. a :link 未访问
2. a :visited 已访问
3. a :hover 鼠标悬停
4. a:active 鼠标按下
注意！！a标签的伪类书写，要按照“爱恨原则”的顺序，否则会有伪类不生效。
★★:hover 和:active 必须在 :link 和:visited 之后，:link 和:visited的位置可以互换。
四、元素关系选择器
1.子选择器
用“>”符号表示
例：
div>p{
color: red;
}
</style>
<div>父
<p>子选择器</p>
</div>
效果：
注意！！后代选择器不一定限制是子元素，而子选择器一定会选中子元素。
2.相邻兄弟选择器
用“+”符号介于两个选择器之间。
例：
div+p{
color: red;
}
</style>
<div>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</div>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
效果：
“div+p”选中和div标签紧挨着的同级p标签。
3.通用兄弟选择器
用“~”符号表示。
例：
<style>
div~p{
color: red;
}
</style>
<div>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</div>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
效果：
”div~p“选中div标签所有的同级p标签。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
