本文详细介绍了CSS中常用的选择器，包括元素选择器、ID选择器、类选择器、通配选择器，以及如何通过这些选择器来设置元素样式。此外，还探讨了复合选择器，如并集选择器和交集选择器，以及关系选择器，如子元素选择器和后代元素选择器。最后，讲解了属性选择器和伪类选择器的用法，展示了它们在网页布局和交互设计中的重要性。
常用选择器：
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
通配选择器 作用：选择页面中的所有元素 语法：*
class 是一个标签的属性，它和id类似，不同的是class可以重复使用 可以通过class属性来为元素分组 可以同时为一个元素指定多个class属性
常用选择器的源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
将所有的段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
*/
/* p{
color: aqua;
}
h1{
color: red;
}*/
/*
将 野火烧不尽 设置为粉色
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
*/
#box{
color: deeppink;
}
/*将 锄禾日当午 和 汗滴河下苦 设置为蓝色
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
*/
/*.li{
color: blue;
}
.abc{
font-size: 48px;
}
*/
/*
通配选择器
作用：选择页面中的所有元素
语法：*
*/
*{
color: red;
}
</style>
</head>
<body>
<h1 class="li abc">大美女</h1>
<p id="box">低头望明月</p>
<p >野火烧不尽</p>
<!-- class 是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
-->
<p class="li">锄禾日当午</p>
<p class="li">汗滴河下苦</p>
<p>谁知盘中餐</p>
</body>
</html>
复合选择器：
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
交集选择器：
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
复合选择器完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 将class为red的元素设置为红色（字体）*/
.red{
color: red;
}
/*将class为red的div字体大小设置为30px*/
/*
交集选择器：
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
color: blue;
}
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
#b1,.p1,.h1,span,div.red{}
*/
h1,span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red"> 我是P元素</p>
<div class="red2 a b c ">我是div2</div>
<h1>标题</h1>
<span>李江宇</span>
</body>
</html>
关系选择器：
父元素 - 直接子元素的元素叫做父元素 子元素 - 直接被父元素包含的元素是子元素 祖先元素 - 直接或间接包含了后代元素的元素叫做祖先元素 -一个元素的父元素也是它的祖先元素 后代元素 - 直接或间接被祖先元素包含的元素叫做后代元素 - 子元素也是后代元素 兄弟元素 - 拥有相同父元素的元素是兄弟元素
子元素选择器： 作用：选中指定父元素的指定元素 语法：父元素>子元素
div.box > span{
color: orange;
}
后代元素选择器： 作用：选中指定元素内的指定后代元素 语法：祖先 后代
div span{
color: skyblue;
}
/*或者*/
div > p >span{
color: blueviolet;
}
选择 下 一个兄弟 : 语法：前一个 + 下一个 p的下一个兄弟，得相邻，且只有一个（自己写）
p + span{
color: red;
}
选择 下边 所有的兄弟元素 : 语法：兄 ~ 弟
p ~ sapn{
color: red;
}
关系选择器完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
/*
为div的子元素span设置一个字体颜色红色
（为div直接包含的span设置一个字体颜色）
子元素选择器
作用：选中指定父元素的指定元素
语法：父元素>子元素
*/
/* div.box > span{
color: orange;
}
*/
/*
后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代
*/
/* div span{
color: skyblue;
}
*/
/* div > p >span{
color: blueviolet;
}
*/
/*
选择 下 一个兄弟
语法：前一个 + 下一个
p的下一个兄弟，得相邻，且只有一个（自己写）
*/
p + span{
color: red;
}
/*
选择 下边 所有的兄弟元素
语法：兄 ~ 弟
*/
p ~ sapn{
color: red;
}
</style>
</head>
<body>
<!--
父元素
- 直接子元素的元素叫做父元素
子元素
- 直接被父元素包含的元素是子元素
祖先元素
- 直接或间接包含了后代元素的元素叫做祖先元素
-一个元素的父元素也是它的祖先元素
后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
兄弟元素
- 拥有相同父元素的元素是兄弟元素
-->
<div class="box">
我是div
<p>
我是div中的元素
<span>我是P元素中的span</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<div>
<span>我是div外的span</span>
</div>
</body>
</html>
属性选择器：
1.[属性名] 选择含有 指定属性 的元素 2.[属性名=属性值] 选择含有 指定属性 和 属性值 的元素 3.[属性名^=属性值] 选择属性值 以 指定值 开头 的元素 4.[属性名$=属性值] 选择属性值 以 指定值 结尾 的元素 5.[属性名*=属性值] 选择属性值中含有某值的元素的元素
属性选择器完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1.[属性名] 选择含有 指定属性 的元素
2.[属性名=属性值] 选择含有 指定属性 和 属性值 的元素
3.[属性名^=属性值] 选择属性值 以 指定值 开头 的元素
4.[属性名$=属性值] 选择属性值 以 指定值 结尾 的元素
5.[属性名*=属性值] 选择属性值中含有某值的元素的元素
*/
/* !*1*! p[title]{
color: red;
}*/
/* !*2*!p[title=abc]{
color: blue;
}
*/
/* !*3*! p[title^=abc]{
color: green;
}
*/
/* !*4*!p[title$=abc]{
color: red;
}
*/
/*5*/p[title*=e]{
color: green;
}
</style>
</head>
<body>
<p title="abc">少侠离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与古今缺乏</p>
</body>
</html>
伪类选择器：
伪类（不存在的类，特殊的类） -伪类用来描述一个元素的特殊状态 比如：第一个子元素，被点击的元素，鼠标移入的元素.... -伪类一般情况下都是使用：开头 :first-child 第一个子元素 :last-child 最后一个元素 :nth-child()选中第n个子元素 特殊值： n 第n个 n的范围0到正无穷 2n 或者 even 表示选中偶数位的元素 2n+1 或者 odd 表示选中奇数位的元素 -以上这些伪元素都是根据所有的子元素进行排序 :first-of-type :last-of-type :nth-of-type() -这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行 - :not() 否定伪类 - 将符合条件的元素从选择器中去除
伪类选择器完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*将ul里的第一个li设置为红色*/
/*
伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移入的元素....
-伪类一般情况下都是使用：开头
:first-child 第一个子元素
:last-child 最后一个元素
:nth-child()选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或者 even 表示选中偶数位的元素
2n+1 或者 odd 表示选中奇数位的元素
-以上这些伪元素都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行
- :not() 否定伪类
- 将符合条件的元素从选择器中去除
*/
/* 一.
ul > li:first-child{
color: red;
}
ul > li:last-child{
color: green;
}
ul > li:nth-child(2n+1){
color: yellow;
}
ul > li:nth-child(even){
color: skyblue;
}
*/
/*二.
ul > li:first-child{
color: red;
}
!*<ul>
<span>我是第一个span</span>
<li>第0个</li>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
<li>第7个</li>
</ul>*!
这种情况下没有任何有红色，ul > li:first-child在所有元素下排序，
但是span不是li所有没有任何出现红色
*/
/*三.
ul > li:first-of-type{
color: yellow;
}
!* <ul>
<span>我是第一个span</span>
<li>第0个</li> ——它出现黄色
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
<li>第7个</li>
</ul>*!
*/
/*
ul > li:not(:nth-child(3)) 表示 <li>第1个</li>被去除颜色了
ul > li:not(:nth-of-type(3)) 表示<li>第2个</li>被去除颜色了
*/
ul > li:not(:nth-of-type(3)){
color: hotpink;
}
</style>
</head>
<body>
<ul>
<span>我是第一个span</span>
<li>第0个</li>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
<li>第7个</li>
</ul>
</body>
</html>
此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习。若对码友有用可参考！！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
