选择器
<!--
1.常用选择器
1）标签选择器（元素选择器） - 直接将标签名作为选择器，选中当前页面中所有指定的标签
2)id选择器 - 在id属性值前加#号作为一个选择器，选中当前页面中id值指定的标签（id一般是唯一的）
3）类选择器（class选择器） - 在class属性之前加.作为一个选择器，选中当前页面中所有class值是指定的值的标签
注意：不同的标签的class值可以相同，同一个标签可以同时拥有多个不同的class值
4)后代选择器 - 将多个独立的选择器用空格隔开，作为一个选择器
5)父子选择器 - 将多个独立的选择器用>隔开，作为一个选择器
6)群组选择器 - 将多个独立的选择器用逗号隔开作为一个选择器，同时选中每个选择器选中的标签
7)通配符 - 将*作为选择器，选中当前页面中所有的标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 */
/* p{
color: aquamarine;
} */
/* id选择器 */
/* #p1{
color: gold;
} */
/* 类选择器 */
/* .p1{
color: seagreen;
}
.p2{
background-color: #FFE4C4;
} */
/* 后代选择器 */
/* div #p5{
color: firebrick;
} */
/* 父子选择器 */
/* div>#p4{
color: skyblue;
} */
/* 群组选择器 */
/* #p4,.p1,a{
color: coral;
} */
/* 通配符选择器 */
/* *{
color: deeppink;
} */
</style>
</head>
<body>
<h1 id="h1">标题一</h1>
<p class="p1">段落1</p>
<a id="a1" href="www.baidu.com">百度</a>
<p class="p2 p1">段落二</p>
<div id="div1">
<p class="p2">段落三</p>
<h2 class="p1">标题二</h2>
<p id="p4">段落四
<p id="p5">段落五</p>
</p>
</div>
</body>
</html>
选择器的优先级
<!-- 选择器的优先级
选择器的优先级看选择器的权重值，谁的权重值大，谁的优先级就高，如果权重级一样，那谁后写谁优先级高，内联样式表的优先级最高
标签选择器：1
class选择器：2
id选择器：4
后代选择器：求各个选择器的和
可以在某个属性后面加！important 让当前属性的有限级最高，内联也比不了！
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c2{
color: mediumaquamarine;
}
#p1{
color: plum;
}
p{
color: gray;
}
</style>
</head>
<body>
<div id="div1" class="c1">
<p class="c2" id="p1">标题1</p>
</div>
</body>
</html>
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
