一、常用（基本）的选择器
1.元素选择器(标签选择器)
语法 : 标签名{}
作用 : 选中对应标签中的内容
例:p{} , div{} , span{} , ol{} , ul{} ......
2.类选择器(class选择器)
语法 : .class属性值{}
作用 : 选中对应class属性值的元素
例子 :
<style>
.A{ 属性：属性值；}
.B{属性：属性值；}
.C{属性：属性值；}
</style>
<p class="A">段落1</p>
<p class="B">段落1</p>
<p class="C">段落1</p>
代码示例：
<style>
.book_name{
color: blue; /*class类选择器book_name把文字定义为蓝色*/
}
h1{ /*h1标签选择器*/
border: 2px dashed red; /*边框为2px红色虚线*/
width: 280px; /*所有p元素定义为宽度为280像素*/
}
</style>
<body>
<h1 class="book_name" id="jinyong1">《书剑恩仇录》 </h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h1 class="book_name" id="jinyong2">《天龙八部》</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h1 class="book_name" id="jinyong3">《碧血剑》</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>运行结果：
注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值
3.id选择器
语法 : #id属性值{}
作用 : 选中对应id属性值的元素
例子 : <p id="A">段落1</p>
<p id="B">段落1</p>
<p id="C">段落1</p>
#A{} , #B{} , #C{} ......
注意 : id的属性值只能给1个,可以重复利用,不能以数字开头
4.通配符选择器
语法 : *{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距
例子 : *{
margin: 0; //外间距
padding: 0; //内间距
}
二、群组选择器
语法 : 选择器1,选择器2,选择器3...{}
作用 : 同时选中对应选择器的元素
代码示例：
<style>
/* 用群组的目的是为了简化代码量 */
div,p,h3,.li2{
font-size: 30px;
}
div,.li2,.text3{
color: red;
}
p{
color: blue;
}
h3{
color: pink;
}
</style>
<div>盒子1</div>
<p>段落1</p>
<p>段落2</p>
<h3>文本标题3</h3>
<h3 class="text3">文本标题3</h3>
<ol>
<li>有序列表</li>
<li class="li2">有序列表</li>
<li>有序列表</li>
</ol>运行结果：
复合选择器
复合选择器包括交集选择器、并集选择器、和后代选择器
1.交集选择器
“交集”选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中，第一个选择器必须是标签选择器，第二个选择器必须是 class 类选择器或 id选择器。这两个选择器之间不能有空格，必须连续书写。
格式：p.class{Color:red; font-size:16px;}
代码示例：
<style type="text/css">
p{
font-size: 14px; /*定义文字大小为14px*/
color: #00F; /*定义文字颜色为蓝色 */
text-decoration: underline; /*让文字带有下划线*/
}
p.myContent{ /*定义交集选择符 */
font-size: 20px; /*定义文字大小为20px*/
text-decoration: none; /*定义文字不带下划线*/
border: 1px solid #C00; /*设置文字带红色边框效果*/
}
</style>
<body>
<p>1.“交集”选择符示例</p>
<p class="myContent">2.“交集”选择符示例</p>
<p>3.“交集”选择符示例</p>
</body>运行结果：
说明：页面中只有第2个段落使用了“交集”选择器，可以看到格式的最终结果为字体
大小为20px、蓝色字体、红色边框且无下划线，刚好是两个选择器所定义的样式的交集
2.并集选择器
在CSS中，可以使用逗号分隔的"并集"选择符来选择多个元素，即选择多个选择器所匹配的元素
可以使用多个不同类型的选择器进行并集选择。例如，如果想选择具有类名为"class1"的元素和所有<a>标签元素，可以使用以下选择器：
代码：
<style type="text/css">
h1,h2,h3{
color: purple;/*定义文字颜色为紫色*/
}
h2.special,#one{
text-decoration: underline;/*定义文字带有下划线*/
}
</style>
<body>
<h1>示例文字h1</h1>
<h2 class="special">示例文字h2</h2>
<h3>示例文字h3</h3>
<h4 id="one">示例文字h4</h4>
</body>运行结果：
三、关系选择器
1.后代选择器
后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素
后代选择符（descendant combinator）：使用空格来选择一个元素的后代元素 （可跨代）
代码示例：
<title>后代选择器（可跨代） 用空格</title>
<style>
p span{
color: red;/* 定义段落中span标签文字颜色为红色 */
}
span{
color: blue;/* 定义普通span标签文字颜色为蓝色 */
}
</style>
<body>
<p>嵌套使用<span>CSS标签</span>的方法</p>
嵌套外的<span>标签</span>不生效
</body>运行结果：
2.子代选择器
子代选择器（child combinator）：使用 ">" 符号来选择一个元素的直接子元素。（不可跨代）
代码示例：
<style>
/* 子代选择器（不可跨代） */
ul>#s2{
color: green;
}
</style>
</head>
<body>
<h1 class="book_name" id="jinyong1">《书剑恩仇录》 </h1>
<ul>
<li>第一章</li>
<li id="s2">第二章</li>
<li>第三章</li>
</ul>
<h1 class="book_name" id="jinyong2">《天龙八部》</h1>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
<h1 class="book_name" id="jinyong3">《碧血剑》</h1>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</body>运行结果：
3.相邻兄弟选择器
相邻兄弟选择符（adjacent sibling combinator）：使用 "+" 符号来选择一个元素的紧邻兄弟元素
代码示例：
<style>
h2+ul{
color: blue;
}
</style>
<h2 class="book_name" id="jinyong1">《书剑恩仇录》 </h2>
<ul>
<li>第一章</li>
<li id="s2">第二章</li>
<li>第三章</li>
</ul>
<h1 class="book_name" id="jinyong2">《天龙八部》</h1>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
<h1 class="book_name" id="jinyong3">《碧血剑》</h1>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul> 运行结果：
4.通用兄弟选择器
通用兄弟选择符（general sibling combinator）：使用 "~" 符号来选择一个元素之后的所有兄弟元素
代码示例：
<style>
h1~ul{
color: purple;
}
</style>
<h1 class="book_name" id="jinyong1">《书剑恩仇录》 </h1>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
<h1 class="book_name" id="jinyong2">《天龙八部》</h1>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
<h1 class="book_name" id="jinyong3">《碧血剑》</h1>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>运行结果：
5.案例
运用各类选择器实现下面网页：
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器练习</title>
<style>
header nav ul li a{
color: red;
}
article>h3{
color: green;
}
h3+p{
color: yellow;
}
h1~p{
font-size: 50px;
}
</style>
</head>
<body>
<header>
<h1 align="center">广东云浮中医药职业学院</h1>
<p align="center">欢迎来到: <ins>计算机学院</ins></p>
<hr>
<nav>
<ul type="none">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">学生风采</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<section>
<h2>最新文章</h2>
<article>
<h3>文章标题</h3>
<p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>
<br><br><br>
<p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>
</article>
<br>
<aside>
<h3>侧边栏</h3>
<p>侧边栏内容，如快速链接、广告等。</p>
<table border="1">
<tr>
<th>专业</th>
<th>链接</th>
</tr>
<tr>
<td>计算机应用技术</td>
<td><a href="专业A详情页.html">专业A详情</a></td>
</tr>
<tr>
<td>数字媒体技术</td>
<td><a href="专业B详情页.html">专业B详情</a></td>
</tr>
</table>
</aside>
</section>
<section>
<h4>联系我们</h4>
<form>
姓名:
<input type="text" id="name" name="name"><br>
邮箱:
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
</main>
<hr>
<footer>
<p>版权所有 © 2024 广东云浮中医药职业学院计算机学院</p>
</footer>
</body>
</html>
四、伪类选择器
1.常用的伪类选择器
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个元素
关于:nth-child()的特殊值(括号内的内容可以填写以下几种)
n 第n个 n的范围0到正无穷（全选）
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
以child结尾的是在所有元素中选择
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type() 选中第n个元素
以type结尾的是在相同元素中选择
2.否定伪类
:not() 将符号条件的元素去除
3.元素的伪类
:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的
由于隐私的问题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态
五、伪元素选择器
同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态
常见的几个伪元素：
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的元素
::before 元素开始的位置前
::after 元素结束的位置后
befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
