本文详细介绍了CSS的基础选择器，包括标签选择器、类选择器、ID选择器和通配符选择器，并进一步讲解了复合选择器如后代选择器、子选择器、并集选择器，以及伪类选择器，特别提到了链接伪类和CSS3的新特性，如属性选择器、结构伪类选择器和伪元素选择器。通过实例展示了如何使用这些选择器来定义和应用样式。
基础选择器
标签选择器
标签选择器是值用HTML标签名作为选择器，可以把某一类标签全部选择出来。
语法格式：
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<style>
div {
color: red;
}
p {
font-size: 35px;
}
</style>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
类选择器
类选择器是值以class类名作为选择器，用 “.”来定义。
语法格式：
.类名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<style>
.hello {
color: red;
font-size: 20px;
}
.world {
color: blue;
text-decoration: underline;
}
</style>
<ul>
<li class="hello">hello</li>
<li>world</li>
<li>你好</li>
<li class="world">世界</li>
</ul>
也可以给一个标签指定多个类名，类似于封住功能，可以把相同的样式指定到一个类名里：
<style>
/* 3个div都是相同大小，用一个类名来表示样式 */
.box {
width: 100px;
height: 100px;
}
.pink {
background-color: pink;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
</style>
<div class="box pink">div1</div>
<div class="box blue">div2</div>
<div class="box yellow">div3</div>
id选择器
id选择器是指以id名作为选择器，用 “#” 来定义。
语法格式：
#id名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<div id="box">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</div>
通配符选择器
通配符选择器是指选择页面中所有的标签，包括html、body、head等标签，用 “*” 来定义。
语法格式：
*{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<style>
/* 将所有标签的文字都变为红色*/
* {
color: red;
font-size: 30px;
}
</style>
<div>
<p>我是个p</p>
</div>
<ul>
<li><span>我是个span</span></li>
<li><span>我也是个span</span></li>
</ul>
一般在写页面之前会重置样式，比如：
*{
margin: 0;
padding: 0;
}
复合选择器
后代选择器
后代选择器可以选择出父标签下的子标签
语法格式：
父标签 子标签{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
要选择出 ol 下的 li 标签：
<style>
ol li {
color: red;
font-size: 20px;
}
</style>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
也可以选择出“孙子”标签：
<style>
ol li {
color: red;
font-size: 20px;
}
/* 选择后2代的标签 */
ul li a {
color: pink;
text-decoration: none;
}
</style>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>
<a href="#">我是ul下的li下的a标签</a>
</li>
</ul>
子选择器
子选择器是指选择最近一级的子标签
语法格式：
父标签>子标签{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
选择了div下的第一级 a 标签
<style>
div>a {
color: red;
text-decoration: none;
}
</style>
<div>
<a href="#">我是最近的一级标签</a>
<p>
<a href="#">我是第二级标签</a>
</p>
</div>
并集选择器
并集选择器是指可以选择多个标签（类名和id都可以）定义样式
语法格式：
标签1, 标签2,...{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<style>
/* 同时选择div标签和p标签 */
div,
p {
color: red;
}
/* 同时选择p标签和a1类名 */
p,
.a1 {
font-size: 30px;
}
</style>
<div>我是div</div>
<p>我就是个p</p>
<ul>
<li><a class="a1" href="#">我是ul下的li下的a标签</a></li>
<li><a href="#">我是ul下的li下的a标签</a></li>
</ul>
伪类选择器
伪类选择器用于向某些选择器添加特殊效果，用冒号 “：” 表示
链接伪类
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标位于其上的链接 */
a:active /* 选择活动链接（鼠标按下未弹起的链接） */
默认的a标签样式时蓝色且带下划线的
<style>
/* 未被访问，改变样式 */
a:link {
color: black;
text-decoration: none;
}
/* 已被访问，改变样式 */
a:visited {
color: yellow
}
/* 鼠标移到链接上时，改变样式 */
a:hover {
text-decoration: underline;
font-size: 30px;
color: skyblue
}
/* 鼠标点下还未弹起时，改变样式 */
a:active {
color: red;
}
</style>
<a href="#">我是未被访问的a链接</a>
点击之前的样式：
点击之后的样式：
一般点击之后样式就保持visited的样式了，再刷新也回不去link的样式了，这时候可以清除浏览器缓存来恢复
鼠标移到链接上时（截图的时候看不到鼠标指针…）：
鼠标点下时（截图的时候还是看不到鼠标指针…）：
为了确保样式能够生效，请按照 link -> visited -> hover -> active的顺序进行声明
focus选择器
用于选取获取焦点（光标）的表单元素，一般用于给input使用
用户名<input type="text">
input默认样式（未获取焦点）：
获取焦点：
定义样式，获取焦点时背景颜色变黄：
input:focus {
background-color: yellow;
}
CSS3新增选择器
属性选择器
属性选择器可以根据标签的属性来选择定义样式
| 选择符 | 说明 |
|---|---|
| E[att] | 选择具有att属性的E标签 |
| E[att=“val”] | 选择具有att属性且属性值为val的E标签 |
| E[att^="val] | 选择具有att属性且值以val开头的E标签 |
| E[att$="val] | 选择具有att属性且值以val结尾的E标签 |
| E[att*=“val”] | 选择具有att属性且值含有val的E标签 |
E[att]:
<style>
/* 选择带有value的input标签 */
input[value] {
color: pink;
}
</style>
<input type="text" value="请输入用户名">
<input type="text">
E[att=“val”]:
<style>
/* 选出type的值为password的input标签
input[type=password] {
color: pink;
}
</style>
<input type="text">
<input type="password">
</body>
E[att^="val]：
<style>
/* 将所有标签的margin重置为0 */
* {
margin: 0;
}
/* 给每个div设置公共样式 */
div {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
/* 选择class属性值以box开头的div标签 */
div[class^=box] {
margin: 10px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="div"></div>
E[att$="val]：
<style>
/* 将所有标签的margin重置为0 */
* {
margin: 0;
}
/* 给每个div设置公共样式 */
div {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
/* 选择class属性值以div结尾的div标签 */
div[class$=div] {
margin: 10px;
}
</style>
<div class="box1-div"></div>
<div class="box2-div"></div>
<div class="box3-div"></div>
<div class="box4-div"></div>
<div class="box5-footer"></div>
E[att="val]：*
<style>
/* 将所有标签的margin重置为0 */
* {
margin: 0;
}
/* 给每个div设置公共样式 */
div {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
/* 选择class属性值包含box的div标签 */
div[class*=box]
margin: 10px;
}
</style>
<div class="box1-div"></div>
<div class="box2-div"></div>
<div class="box3-div"></div>
<div class="box4-div"></div>
<div class="footer"></div>
结构伪类选择器
结构伪类选择器主要根据文档结构来选择标签，常用语选择父类标签里的子标签。
| 选择符 | 说明 |
|---|---|
| E :first-child | 匹配父标签的第一个子标签E |
| E :last-child | 匹配父标签的最后一个子标签E |
| E :nth-child(n) | 匹配父标签的第n个子标签E |
| E :first-of-type | 指定类型E的第一个 |
| E :last-of-type | 指定类型E的最后一个 |
| E :nth-of-type(n) | 指定类型E的第n个 |
注意！！！冒号(:)前要加空格
<style>
/* 选择ul下的第一个li */
ul li:first-child {
color: red;
}
/* 选择ul下的最后一个li */
ul li:last-child {
color: pink;
}
/* 选择ul下的第三个li */
ul li:nth-child(3) {
font-size: 30px;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
关于nth-child(n), n 可以是关键字：even偶数、odd奇数；
<style>
/* 选择ul下的第偶数个li */
ul li:nth-child(even) {
font-size: 30px;
}
/* 选择ul下的第奇数个li */
ul li:nth-child(odd) {
font-size: 60px;
}
</style>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
<style>
/* 给div下的第一个p标签定义样式 */
div p:first-of-type {
color: pink
}
/* 给div下的第一个a标签定义样式 */
div a:last-of-type {
color: red
}
/* 给div下的第2个p标签定义样式 */
div p:nth-last-of-type(2) {
font-size: 30px;
}
</style>
<div>
<p>我是第1个p</p>
<a href="#">我是第1个a链接</a>
<p>我是第2个p</p>
<a href="#">我是第2个a链接</a>
<p>我是第3个p</p>
<a href="#">我是第3个a链接</a>
</div>
伪元素选择器
伪元素选择器可以利用css创建新标签，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 说明 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before创建一个元素，但是属于行内元素。
- before和after必须有content属性。
- before在父元素内容前创建，after则在后面创建。
用一个小案例来说明用法，一个简易的搜索框，在div后插入一个“搜索按钮”：
<style>
div {
width: 300px;
height: 25px;
border: 1px solid black;
position: relative;
}
/* 一个简易搜索按钮。。。 */
div::after {
content: "搜索";
text-align: center;
width: 50px;
height: 25px;
background-color: pink;
position: absolute;
right: 0;
}
</style>
<div>输入要搜索的内容</div>
样式很随意，可以根据自己的需要修改添加样式。
本文章参考了b站pink老师的html、css视频，再根据自己的思考将css选择器知识进行了总结。内容比较简单，写了有点久，如果有错误请指出，感谢观看。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
