id选择器
<style>
#box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<!--
id选择器 - 用于选择当前页面标识符为XXX的元素（标识符最好唯一）
#id名称
-->
<body>
<div id="box"></div>
</body>
类选择器
<style>
.box1{
width: 100px;
height: 100px;
border: 1px solid red;
}
.box2{
background-color: yellow;
}
</style>
<!--
类选择器 - 用于选择当前页面类名含有XXX的元素（同一元素可以设置多个类名）
.class名称
-->
<body>
<div class="box1 box2"></div>
</body>
标签选择器
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<!--
标签选择器 - 用于选择当前页面上所有标签名为xxx的元素
标签名
-->
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
群组选择器
<style>
div, p, h1{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<!--
群组选择器 - 用于选择当前页面上标签名为xx1、xx2、......的元素
标签名1，标签名2，标签名3
-->
<body>
<div> div </div>
<p> p </p>
<h1> h1 </h1>
</body>
包含选择器
<style>
#a1 #a2{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<!--
包含选择器 - 用于选择当前页面某元素的子级元素
目标父级元素 目标元素
-->
</head>
<body>
<div id="a1">
<div id="a2">
</div>
</div>
</body>
选择器的优先级：
行间样式 > id选择器 > 类选择器 > 标签选择器
- 行间样式 1000
- id选择器 100
- 类选择器 10
- 标签选择器 1
如果遇到包含选择器的优先级判定，将父子标签对应选择器的得分相加，最大者则为最高优先级。
例如下图中，目标元素应显示为粉色：
如果遇到群组选择器的优先级判定，则需要判断哪个标签，就在群组里只看那个标签对应选择器的得分。
例如下图中，div标签内元素为粉色，p标签内元素为绿色：
扫一扫
106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
