基本选择器:
/* 基本选择器: */
/* 1标签选择器 */
h2 {
color: red;
}
/* 2属性选择器 */
h2[title="hello"] {
color: seagreen;
}
/* id:用在唯一元素 */
h2[id="a"] {
color: rgb(21, 226, 110);
}
/* class: 用于多个元素 */
h2[class="b"] {
color: steelblue;
}
/* id,class是高频属性 */
/* id=# */
h2#a {
color: turquoise;
}
/* class=. */
h2.b {
color: tomato;
}
/* 推荐用class */
/* 3.群组选择器 */
h2#a,
h2.b {
background-color: rgb(196, 20, 20);
}
/* 4.通配选择器,用“,”分隔 */
html body * {
background-color: rgb(116, 13, 13);
}
/* !important 提权到最高*/
选择器的权重
<title>选择器的权重</title>
<h1>hello</h1>
<style>
/* 提权 */
/* 最高权重 */
h1 {
color: aqua !important;
}
/* 112 */
/* 2:个标签,1:class,1:一个id */
body h1.title#active {
color: rgb(92, 44, 10);
}
/* 提权 */
/* 012 */
/* 2个标签,一个class,0个id */
body h1.title {
color: cadetblue;
}
/* 提权 */
/* 002 */
/* 2个标签,0个class ,0个id */
body h1 {
color: brown;
}
/* 相同的权重,上下位置决定 */
/* 0 0 1 */
h1 {
color: blue;
}
不推荐用id ,权重太高后边没有提的空间,推荐用class,标签数量太少