小和尚学习-CSS选择器

希望的灯一旦熄灭，生活刹那间变成了一片黑暗。——普列姆昌德

基础选择器
- ID选择器
- 元素选择器
- 类选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
组合选择器
- 后代选择器
- 子代选择器
- 相邻兄弟选择器
- 兄弟选择器
- 并列选择器
CSS层叠
- 解决过程
- - 一. 比较重要性
  - 二. 比价特殊性
  - 三. 比较源次序

在网页开发中我们经常需要对页面中的元素进行操作（比如：给字体加色、来个鼠标悬浮特效等）这时候我们就需要通过选择器来精确定位到指定元素给其添加对应的样式，本章内容主要介绍下常见选择器

基础选择器

ID选择器

通过#id值定位元素，全局中的id值是唯一的

<div id="demo">id选择器<div>

/* id为demo的元素，字体颜色设置为红色 */
#demo {color: red;
}

元素选择器

通过元素类型名称定位元素

<p>元素选择器</p>
<p>元素选择器</p>
<p>元素选择器</p>

/* p元素，字体颜色设置为红色 */
p {color: red;
}

类选择器

通过.class值定位元素，可以设置多个

<div class="demo">类选择器</demo>
<div class="demo">类选择器</demo>
<div class="demo">类选择器</demo>

/* 类名为demo的元素，字体颜色设置为红色 */
.demo {color: red;
}

属性选择器

通过[属性名=属性值]来定位元素

属性	说明
[attr]	选中带有attr属性的元素
[attr=value]	选中带有attr属性，且属性值为value的元素
[attr^=value]	选中带有attr属性，且属性值为以value开头的元素
[attr$=value]	选中带有attr属性，且属性值为以value结尾的元素
[attr*=value]	选中带有attr属性，且属性值为包含value的元素
[attr~=value]	选中带有attr属性，且属性值为包含value的元素（value左右必须用空格隔开）
[attr\|=value]	选中带有attr属性，且属性值为为value或value-开头的元素

<a href="">百度1</a>
<a href="https://www.baidu.com">百度2</a>
<a href="www.baidu.com">百度3</a>
<a href="www.baidu.cn">百度4</a>
<a href="www.sina.com.cn">新浪1</a>
<a href="www. sina .com.cn">新浪2</a>
<a href="sina-www..com.cn">新浪3</a>

/* 带有href属性的元素，字体颜色设置为红色 */
[href] {color: red;
}
/* 带有href属性，且属性值为https://www.baidu.com元素，字体颜色设置为绿色 */
[href="https://www.baidu.com"] {color: green;
}
/* 带有href属性，且属性值以www开头的元素，字体颜色设置为粉色 */
[href^="www"] {color: pink;
}
/* 带有href属性，且属性值以.cn结尾的元素，字体颜色设置为紫色 */
[href$=".cn"] {color: purple;
}
/* 带有href属性，且属性值包含sina的元素，字体颜色设置为棕色 */
[href*="sina"] {color: brown;
}
/* 带有href属性，且属性值包含sina的元素（必须以单独一个词显示），字体颜色设置为天蓝色 */
[href~="sina"] {color: skyblue;
}
/* 带有href属性，且属性值以sina-开头的元素，字体颜色设置为橙色 */
[href|="sina"] {color: orange;
}

伪类选择器

通常表示元素的某种状态

<p>鼠标悬浮状态</p>

/* 鼠标悬浮状态下的p元素，字体颜色设置为红色 */
p:hover {color: red;
}

伪元素选择器

伪元素：元素末额外添加的元素，伪元素选择器就是用于获取到这个额外元素

<p><span>JavaScript权威指南</span>是每一个前端开发人员必读书本</p>

/* 选择after，before两个伪元素，将其内容设置为书名号，同时设置伪元素字体颜色为红色 */
span:before {content: "《";color: red;
}
span:after {content: "》";color: red;
}

组合选择器

由两个或两个以上选择器所组成的选择器

后代元素：父元素下所有的元素，都是后代元素

子元素：最接近父元素的后代元素

后代选择器

通过 element A 空格 element B 定位到A元素的后代元素B

<!-- 以最外层div为父元素 -->
<div><p>儿子</p> <!-- 1 --> 后代元素、子元素<main> <!-- 1 --> 后代元素、子元素<p>孙子</p> <!-- 2 --> 后代元素<section> <!-- 2 --> 后代元素<p>重孙</p> <!-- 3 --> 后代元素</section></main>
</div>

、/* 选中div元素下所有的p元素，字体颜色设置为红色 */
div p {color: red;
}

子代选择器

通过 element A > element B 来定位A元素的子代元素B

<div><p>儿子</p> <!-- 1 --><main> <!-- 1 --><p>孙子</p> <!-- 2 --><section> <!-- 2 --><p>重孙</p> <!-- 3 --></section></main>
</div>

、/* 选中div元素下子元素p元素（子元素：标记1的元素），字体颜色设置为红色 */
div > p {color: red
}

相邻兄弟选择器

通过 element A + element B 定位A元素的下一个兄弟元素B

<div>当前元素</div>
<p>第一个兄弟元素</p>
<p>第二个兄弟元素</p>
<p>第三个兄弟元素</p>

/* 选中div元素的下一个兄弟元素，并且是p元素，字体颜色设置为红色 */
div + p {color: red;
}

兄弟选择器

通过 element A ~ element B 定位A元素后面的所有兄弟元素B

<p>上一个兄弟元素</p>
<div>当前元素</div>
<p>第一个兄弟元素</p>
<p>第二个兄弟元素</p>
<p>第三个兄弟元素</p>

/* 选中div元素后面所有的p元素，字体颜色设置为红色 */
div ~ p {color: red;
}

并列选择器

通过element A ， element B，elementC 来定位多个元素

<p>A</p>
<div>B</div>
<span>C</span>

/* 选中p、div、span元素，将字体颜色设置为红色 */
p, div, span {color: red;
}

CSS层叠

声明冲突：同一样式，多次作用与同一样式

层叠（权重计算）：解决声明冲突的过程（浏览器自动处理）

解决过程

只有上一级比较无法确定时，才会去下一级比较

一. 比较重要性

重要性从高到低依次递减

作者样式表：开发者写的样式代码

1）作者样式表中的!important样式
2）作者样式表中的普通样式
3）浏览器的默认样式

二. 比价特殊性

主要针对选择器

总体规则：选择器的范围约窄，越特殊

具体规则：通过选择器，计算一个4位数权重值（xxxx）

1）千位：如果内联样式记1；否则记0
2）百位：等于选择器中ID选择器的数量
3）十位：等于选择器中类选择器、伪类选择器、属性选择器的数量
4）个位：等于选择器中伪元素选择器、元素选择器的数量

三. 比较源次序

后面的代码覆盖前面的代码