CSS:基本选择器、层级选择器、选择器权重优先级
程序员文章站
2022-05-01 22:18:43
...
<!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>选择器1:基本选择器</title>
</head>
<body>
<h2>itme1</h2>
<h2 title="hello">itme2</h2>
<h2 id="a">item3</h2>
<h2 id="a">item4</h2>
<h2 class="b">item5</h2>
<h2 class="b">item6</h2>
<style>
/* 基本选择器:根据元素自身特点来选择 */
/* 1.标签选择器 */
h2 {
color: red;
}
/* 2.属性选择器 */
h2[title="hello"] {
color: green;
}
/* 3.id选择器,用于唯一元素,id唯一性由程序员控制,浏览器不检查 */
h2[id="a"] {
color: blue;
}
/* 4.class类选择器 ,用于多个元素*/
h2[class="b"] {
color: violet;
}
/* id ,class是高频属性 */
h2#a,
h2.b {
/* color: orange; */
background-color: yellow;
}
/* 层叠样式表,后面的覆盖前面的 */
/* 通配符,选择下面所有的元素 */
html body * {
background-color: gray;
/* background-color: gray !important; */
/* !important;//提权到100%,优先级别最高 */
}
/* 上下文选择器 */
</style>
</body>
</html>
<!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>选择器2:层级选择器/上下文选择器</title>
</head>
<body>
<!-- ul.list>li.item*8{itme$} -->
<ul class="list">
<li class="item">itme1</li>
<li class="item second">itme2</li>
<li class="item">
itme3
<!-- ul.inner>li*3{item3_$} -->
<ul class="inner">
<li>item3_1</li>
<li>item3_2</li>
<li>item3_3</li>
</ul>
</li>
<li class="item">itme4</li>
<li class="item">itme5</li>
<li class="item">itme6</li>
<li class="item">itme7</li>
<li class="item">itme8</li>
</ul>
<style>
/* 1.子元素 */
.list>li {
border: 1px solid #000;
}
/* 2.后代,选择所有的后代,不加> 空格即可 */
.list li {
border: 1px solid rgb(248, 26, 26);
}
/* 3.相邻关系,相邻兄弟+ */
.item.second+* {
background-color: gray;
}
/* 4.选择所有兄弟,后面的 */
.item.second~* {
background-color: rgb(223, 26, 26);
}
</style>
</body>
</html>
<!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>3.选择器的权重/优先级(重点)</title>
</head>
<body>
<h1 class="title" id="active">Hello</h1>
<style>
body h1.title#active {
/* 1 1 2 */
color: red;
}
body h1.title {
/* 0 1 2 */
color: greenyellow;
}
body h1 {
/* 0 0 2 */
/* body加上后,权重变为0 0 2 */
color: darkorange;
}
h1 {
/* 0 0 1 */
color: green;
/* 后面的覆盖前面的 ,如果要前面的生效,则要提权*/
}
/* 规则
第一位:标签数量 个位
第二位:class数量 十位
第三位:id数量 百位
id不推荐使用,因为权重太高了,为了让代码具有弹性,尽量使用class
为什么不使用最低权重的标签呢,因为标签数量太少了,而class可以任意命名。
*/
/* h1 {
color: violet !important;
} */
/* bootsrap ,element ui这些都不能改,因为升级会覆盖 */
</style>
<div class="col-md-3 vip">Bootstrap</div>
<style>
div.col-md-3.vip {
border: 6px solid rgb(241, 14, 60);
}
div.col-md-3 {
border: 1px solid #002;
}
</style>
</body>
</html>
上一篇: 关于分表后数据查找定位问题
下一篇: PHP 四种基本排序算法的代码实现(1)