<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>实例演示选择器和选择器权重</title>
</head>
<style>
/ h1 {
color: aquamarine;
}
h2 {
color: aqua;
}
#test {
font-size: 20px;
}
.title {
background-color: bisque;
}
h1,
p {
background-color: darkgrey;
}
html {
background-color: aliceblue;
} /
</style>
<body>
<!-- 样式的来源 -->
<!-- 1.浏览器默认的样式（用户代理样式）
2.用户自定义样式 -->
<h1>实例演示样式来源</h1>
<hr />
<h2 id="test" class="title">基本选择器</h2>
<!-- 标签选择器 -->
<!-- h2{
color: aqua;
} -->
<!-- 属性选择器 -->
<!-- id选择器
#test {
font-size: 20px;
} -->
<!-- class选择器 -->
<!-- .title {
background-color: bisque;
} -->
<p>群组选择器</p>
<!-- 群组选择器，用逗号隔开
h1,p {
background-color: darkgrey;
} -->
<h3>通配选择器</h3>
<!-- html{
background-color: aliceblue;
} -->
<hr />
<h1>上下文选择器</h1>
<div>
<ul>
<li class="first">
<p>title1</p>
</li>
<li>我是第二</li>
<li>我是最后</li>
</ul>
</div>
<!-- <style>
/* 子元素 > */
ul > li > p {
background-color: aquamarine;
}
/* 后代元素，空格 */
li p {
color: pink;
}
/* 相邻兄弟 + */
.first + * {
background-color: blueviolet;
}
/* 所有兄弟元素 ~ */
.first ~ * {
background-color: burlywood;
}
</style> -->
<hr />
<p id="q" class="qz">选择器权重</p>
<style>
/ 选择器权重为{0,0,1} /
p {
color: brown;
}
/ 选择器权重为{1,0,0} /
#q {
color: blue;
}
/ 选择器权重为{0,1,0} /
.qz {
color: aquamarine;
}
/ 选择器权重，把鼠标放在选择器上，即可看到权重数，权重数是由3个数字组成，如：(0,0,1)
三个权重的位置, 从右到左
第1位: 标签数量
第2位: class数量
第3位: id数量
css 将 id, class, tag（标签） 看成一个”三位整数”, id -> 百位, class -> 十位, tag -> 个位
注 : id为什么不推荐用? 因为权重太高, 为了让你的代码具有弹性,尽可能用class
为什么不用权重最低的标签呢? 只是标签的数量太少了, 而class可以任何命名 /
</style>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
