<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*
元素选择器
作用:通过元素选择器选中页面所有指定元素
*/
p{
color: blueviolet;
}
h1{
color: cadetblue;
}
/*
id选择器:
通过id选择唯一的元素
语法:
#id属性值{}
*/
#pp{
color: rgb(255, 166, 0);
font-size: 900px;
}
/*
类选择器
通过class选择一组元素
语法:
.class属性值{}
*/
.p2{
color:darkcyan ;
}
/*
为id为p1,class为p2还有h1,设置背景颜色
*/
/*
并集选择器
选择器分组,可以同时选中多个选择器对应的元素
语法:
选择器1,选择器2,选择器N{}
*/
#pp,.p2,h1{
background-color: bisque;
}
/*
通配选择器:选择页面所有元素
语法: *{}
*{
color: red;
}
*/
/*
为class为p3的span元素设置背景
交集(复合)选择器:
作用:
可以选择同时满足多个选择器的元素
语法:(要满足N个条件才被选择)
选择器1选择器2选择器N{}
*/
span.p3{
color: darkgoldenrod;
}
/*
后代元素选择器
作用:选中指定元素的后代
语法:祖先元素 后代元素{}
*/
div span{
color: aqua;
}
/*
子元素选择器:
作用:选中指定父元素的子元素
语法:选中指定父元素的指定子元素
*/
div > span{
background-color: aqua;
}
</style>
</head>
<body>
<h1>锄禾</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="pp">锄禾日当午</p>
<p>锄禾日当午</p>
<!--
class属性和id属性类似,class可以重复
可以为同一个元素设置多个class属性值,用空格隔开
-->
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p3">锄禾日当午</p>
<span class="p3">123312</span>
<div>
<span>ahdahkdla</span>
</div>
<span>askdaldlka</span>
</body>
<!--
选择器的优先级:
当使用不同的选择器,选中同一个元素,设置相同的样式,样式之间产生了冲突
优先级:(可以在样式最后添加 !important 样式优先级超过内联样式)
内联样式: 优先级 1000(<p style="coloe="yellow"></p>")
id选择器: 优先级 100
类和伪类: 优先级 10
元素选择器:优先级 1
通配选择器:优先级 0
继承的样式:优先级 无
当选择器包含多种选择器,将选择器优先级相加
ps:选择器优先级不会超过他的最大数量级
选择器优先级相同,谁在后选择谁
并集选择器优先级独立计算
-->
</html>
css1.常用选择器
最新推荐文章于 2023-03-06 09:00:00 发布