目录
一,基础选择器
1.通配选择器 (权重最低)
* 表示通配符,它可以匹配任何标签
使用方式
*{
css内容
}
2.标签名选择器
E{css内容}给所有标签名为E的元素设置css样式
3.类名选择器
.类名{css内容} 使用的时候需要在标签上绑定 class="类名"如果有多个
类名,使用 空格 隔开,类名最好不要超过5个
4.id选择器(权重最高)
#id名{css内容}
在一个页面中,id是唯一的,只能绑定在一个标签上,也就是一个页面中
没有同名的id
5.群组选择器
如果多种选择器所表达的css内容是相同的,则可以把他们写成群组选择器
.wp,#abc,div{css内容}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器</title>
<style>
/* 通配选择器:权重最小 */
*{
color: #ad1616;
}
/* 标签名选择器 */
div{
border: 1px #f00 solid;
}
span{
font-size: 30px;
color: pink;
}
/* 类名选择器 */
.mu-lan1{
background: rgba(255, 0, 0, 0.3);
}
.wp{
width: 200px;
height: 200px;
border: 1px rgb(6, 0, 0) solid;
}
/* id选择器 */
#abc{
font-size: 40px;
color: #04be02;
}
#book{
font-size: 80px;
background-color: #ff0;
}
/* 群组选择器 */
#abc,div ,.wp{
background-color: rgb(79, 50, 50);
}
</style>
</head>
<body>
<!--
一,基础选择器
1.通配选择器 (权重最低)
* 表示通配符,它可以匹配任何标签
使用方式
*{
css内容
}
2.标签名选择器
E{css内容}给所有标签名为E的元素设置css样式
3.类名选择器
.类名{css内容} 使用的时候需要在标签上绑定 class="类名"如果有多个
类名,使用 空格 隔开,类名最好不要超过5个
4.id选择器(权重最高)
#id名{css内容}
在一个页面中,id是唯一的,只能绑定在一个标签上,也就是一个页面中
没有同名的id
5.群组选择器
如果多种选择器所表达的css内容是相同的,则可以把他们写成群组选择器
.wp,#abc,div{css内容}
-->
<span >木兰诗</span>
<p class="wp">关山度若飞</p>
<div>寒光照铁衣</div>
<div id="abc" class="mu-lan1 wp">木兰不用尚书郎</div>
<div id="book">可汗大点兵</div>
</body>
</html>
二.层次选择器
1.后代选择器
E m { css内容 } 通过E选择器 设置 E中的 m 选择器 的css内容,m可以是E的
子级,也可以是E的后代中的某一个选择器
2.父子选择器
E>M {css内容} 通过E选择器找到 E选择器的子级M选择器,设置css内容
3.兄弟选择器
E~M{css内容}通过E选择器找到 该元素之后所有选择器名为M的兄弟元素,并
设置css样式
4.相邻兄弟选择器
E+M{css内容} (后面跟的只能是相邻的东西,不能是class名)过E选择器找到 该元素
之后第一个兄弟元素M,并且对M设置css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层次选择器</title>
<style>
/* 后代选择器 */
ul li{
border:1px #c81d1d solid;
list-style: none;
}
ul span{
font-size: 30px;
}
/* 父子选择器 */
ul>li{
background-color: #ccc;
}
ul>li>span{
color: #04be02;
}
div>ul>li>div>span{
color: #c81d1d;
}
div em{
font-size: 30px;
}
/* 兄弟选择器 */
.f~li{
height: 50px;
}
/* 相邻兄弟选择器 */
.f+li{
height: 100px;
color: #ff0;
}
</style>
</head>
<body>
<!--
1.后代选择器
E m { css内容 } 通过E选择器 设置 E中的 m 选择器 的css内容,m可以是E的
子级,也可以是E的后代中的某一个选择器
2.父子选择器
E>M {css内容} 通过E选择器找到 E选择器的子级M选择器,设置css内容
3.兄弟选择器
E~M{css内容}通过E选择器找到 该元素之后所有选择器名为M的兄弟元素,并
设置css样式
4.相邻兄弟选择器
E+M{css内容} (后面跟的只能是相邻的东西,不能是class名)过E选择器找到 该元素
之后第一个兄弟元素M,并且对M设置css样式
-->
<div>
<ul>
<li>世上<span>无难事</span> </li>
<li>世上<span>无难事</span></li>
<li class="f">世上无难事</li>
<li> <div>世 <span>上无难事</span></div> </li>
<li>世上无难事</li>
<li>世上无难事</li>
<li>世上无难事</li>
<li><div><em>世上无难事</em></div></li>
<li class="m">世上无难事</li>
<li>世上无难事</li>
</ul>
</div>
</body>
</html>
三,伪类选择器
a的伪类,伪类是css系统创建好的内部的类,用来对标签的某个时机设置样式
link:初始时候的状态
visited:点击之后的状态
hover:鼠标悬浮时候的状态
active:鼠标点击时候的状态(鼠标按下不松手)
顺序 l-> v -> h -> a (先爱后恨)
ie8以后,任何标签都可以添加 :hover 伪类
可以根据hover 触发 元素本身,以及通过元素能找到的元素的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
a:link{
color: #04be02;
}
a:visited{
color: pink;
}
a:hover{
color: #ff0;
font-size: 40px;
font-weight: bold;
background: #ccc;
text-decoration: none;
}
a:active{
color: #f60;
}
.wp{
width: 200px;
height: 200px;
background-color: #f60;
display: none;
}
/* 相邻选择器 */
.show:hover+div {
display:block ;
}
/* 后代选择器 */
.show:hover span{
display: none;
}
.change{
width: 200px;
height: 200px;
background-color: #f6f;
}
.change:hover{
background-color: #f60;
color: pink;
font-size: 20px;
width: 250px;
height: 250px;
}
img{
display: none;
}
.a-1:hover+img{
display: block;
}
</style>
</head>
<body>
<!--
a的伪类
伪类是css系统创建好的内部的类,用来对标签的某个时机设置样式
link:初始时候的状态
visited:点击之后的状态
hover:鼠标悬浮时候的状态
active:鼠标点击时候的状态(鼠标按下不松手)
顺序 l-> v -> h -> a (先爱后恨)
ie8以后,任何标签都可以添加 :hover 伪类
可以根据hover 触发 元素本身,以及通过元素能找到的元素的变化
-->
<a href="###">数鸭子</a>
<a href="###" class="show">显示和隐藏 <span>同行十二年不知木兰是女郎</span> </a>
<div class="wp"></div>
<div class="change">不知木兰是女郎</div>
<a class="a-1" href="###">图片</a>
<img src="./image/微信图片_20230705173001.png" alt="">
</body>
</html>
四,选择器的优先级
什么时候需要考虑选择器的优先级?
不同的选择器,同时作用于同一个标签元素,并且他们具有相同的
css属性设置,对该css属性设置不同的值。
选择器优先级的强弱顺序:
1.!important 100000
2.行间样式,在标签上添加 style属性 10000
3.id选择器 1000
4.类名选择器,伪类选择器,属性选择器 100
5.(标签名)元素选择器,伪元素 10
6.通配符选择器 1
7.系统默认提供的css属性 0
假设后面的数字是权重的值,那么在比较的时候,只需把选择器的值
相加,然后比较大小即是权重的大小。
如果他们的值相同,后来者居上(后面覆盖前面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器优先级</title>
<style>
#abc,#abc1{
background-color: #04be02;
}
.wp{
width: 200px;
height: 200px;
background-color: #f60 !important;
}
.wp1{
width: 200px;
height: 200px;
background-color: #ccc;
}
.wp2{
background-color: rgb(0, 255, 242);
}
/* 具有类名txt的span标签 */
span.txt{
color: rgb(18, 93, 190);
}
.wp2 span{
color: #ff0;
}
span{
color: #f00;
}
</style>
</head>
<body>
<!--
什么时候需要考虑选择器的优先级?
不同的选择器,同时作用于同一个标签元素,并且他们具有相同的
css属性设置,对该css属性设置不同的值。
选择器优先级的强弱顺序:
1.!important 100000
2.行间样式,在标签上添加 style属性 10000
3.id选择器 1000
4.类名选择器,伪类选择器,属性选择器 100
5.(标签名)元素选择器,伪元素 10
6.通配符选择器 1
7.系统默认提供的css属性 0
假设后面的数字是权重的值,那么在比较的时候,只需把选择器的值
相加,然后比较大小即是权重的大小。
如果他们的值相同,后来者居上(后面覆盖前面)
-->
<div id="abc" class="wp"></div>
<div class="wp1" id="abc1" style="background-color: #f0f;"></div>
<div class="wp2 wp1 ">
<span>归来见天子</span>
<span class="txt">归来见天子</span>
</div>
<span class="txt">归来见天子</span>
</body>
</html>