CSS：选择器：引入方式 / 种类 / 层叠和冲突 / 组合·源栈课堂·一起帮

CSS：选择器：引入方式 / 种类 / 层叠和冲突 / 组合

点击观看清晰的B站视频

当前系列： HTML和CSS

如果说我要给所有的p标签都定义一个颜色，怎么办？复制粘贴？

再次提醒：程序员厌恶复制粘贴！

使用CSS的方式

CSS设置可以放在三个地方，分别被称为：

内联式

Inline，也叫行内样式。

这是我们已经学过的，CSS的设置放置在HTML元素的style属性里面，这里面的设置只能作用于当前元素

嵌入式

Embedding，也叫页内样式。

CSS设置放置在一个<style></style>标记块里面。这里面的设置能作用于整个当前页面。

<head>
    <style>
        /*这里写CSS样式*/
    </style>
</head>

这行代码通常也放置于head标签之中。

外联式

Linking，也叫外部样式。

把CSS设置放置在一个独立的以.css为后缀的文件中，文件中直接写样式，不需要<style>标记；

然后在HTML中引入：

<link rel="stylesheet" href="/css/lucky.css" />

可以写在页面任何地方，但我们通常把它也放在head中。

说明：为方便描述，后文用<style>表示嵌入和/或外联样式表声明区域。

选择器

回头想一想我们的需求：要给所有的p标签……我们怎么表示“所有的p标签”呢？在页内样式或外部样式中，使用“标签选择器”即可。

包括标签选择器，CSS一共提供了以下类型的选择器：

标签选择器

表示所有该标签均适用 {}中定义的样式：

    /*所有p标签都是蓝色文字*/
    p{
        color:blue;
    }

类选择器

在元素中添加一个属性：属性名class，属性值自己设定，比如说red

<p class="red"> 源栈欢迎您！</p>

然后，在<style>块中以圆点（.）开头，后接red，再用花括号括起来：

    /*所有含有属性class="red"的元素，文字都是红色*/
    .red{
        color:red;
    }

Id选择器

和类选择器类似。但HTML元素中属性名为id，<style>块中，前缀为井号（#）

        <p id="primary"> 源栈欢迎您！</p>

    /*含有属性id="primary"的元素，文字是红色*/
    #primary {
        background-color: aquamarine;
    }

但是注意：按规范，一个页面甚至一个网站，一个id只能适用于一个元素——这是和class不同的，一个class可以（也应该）适用于多个元素。

PS：一个页面多个元素使用相同id的结果因浏览器不同而略有差异，但重要的是我们一开始就不应该这样用！

所以Id选择器重用的场景并不多……

属性选择器

以有无某属性，或者属性值为某某某进行匹配：

主要用于form表单

<input type="text" value="源栈欢迎你" />
<input type="button" value="大飞哥" /> <input type="checkbox" checked />

其标志符号是方括号[]：

所有带type属性的标签
```
[type]{
```
仅仅是type属性为button
```
[type="button"]{
```
被选中（checked）的表单（暂时只能通过 F12-查看器演示）
```
[checked]{
```

也可用于a标签，

<a href="https://17bang.ren">17bang.ren</a>
<a href="http://sample.17bang.ren/Code">sample.17bang.ren</a>

比如href的属性值

包含sample：
```
[href*="sample"]{
```
以https开头：
```
[href^="https"]{
```
以Code结尾，
```
[href$='code']{
```
说明：
- 不区分大小写
- 单双引号通用

*选择器

【说明】在学习盒子模型时讲解

使用星号（*）引导，{}中的样式会适用于所有元素：

* {}

通常用于“清场”（解决浏览器兼容问题等），

最常见的是设置margin和padding为0
或者用于调试添加border

层叠和冲突

一个元素可以同时设置id、class和style三种属性，^_^

<p id="primary" class="red" style="text-align:right"> 源栈欢迎您！</p>

一个class中还可以使用多个：

<h1 class="red important">源栈</h1>

如果这些样式并不冲突，该元素可以同时（层叠）使用：

当出现冲突时，CSS只能选择适用一种样式。

权重

比如不同的选择器中都设置了color，但color值不同，按优先级选择从高到低（简化版）：

行内样式
id选择器
类选择器
标签选择器
*选择器

演示：使用F12调试工具

顺序

也可能在一个/种选择器中，同一项样式设置了多次：

        .red {
            color: red;
            color: green;  /* 最终生效 */
        }

写在后面的样式会覆盖前面的样式。

包括：同一个页面引入了多个.css文件，后引入的会覆盖前面的……所以，尽量不要混用CSS框架（比如bootstrap和elementUI），否则很容易出问题。

!important

最后，你可能希望某个地方的设置永远不要被覆盖！这时候你可以使用 !important：

        p {
            /*永远无法被其他位置的设置更改，
              哪怕是 style="color: blue"*/
            color: red !important;
        }

组合

在<style>中，还可以将若干选择器组合起来定义，包括：

分组

逗号（,）" 分隔：

p, .mark {

p和.mark都使用一样的样式。

也可以更多分组：

p, .mark, div {

后代

空格" " 分隔：

p .mark{

在p元素“里面”（所有后代元素）的标记为class="mark"的元素受影响

<p> 一起帮，助力 <span class="mark">职业自由</span></p>

<p> 一起帮，<a> 助力 <span class="mark">职业自由</span></a></p>

父子

大于符号">"分隔:

p>.mark{

p元素的子元素，如果标记为class="mark"，就会受影响

兄弟

h1和p是兄弟

<h1 class="mark"> 源栈欢迎您！</h1>
<p> 一起帮，助力职业自由</p>
<p> 键盘敲烂，月薪过万</p>

"~"：其后同级所有兄弟
```
h1 ~ p {
```
"+"：向后相邻的一个兄弟
```
h1 + p {
```

交集

直接写在一起，注意没有空格：

标签和类：

p.mark{

标注了class="mark"的p元素：

<h1 class="mark"> 源栈欢迎您！</h1>
<p class="mark"> 一起帮，助力 <span >职业自由</span></p>
<p> 一起帮，助力职业自由</p>

类和类：

.mark.important{

（至少）同时使用了mark和important两个类

<h1 class="mark"> 源栈欢迎您！</h1>
<p class="mark important"> 一起帮，助力职业自由</p>
<p> 一起帮，助力 <span class="important">职业自由</span></p>

PS：学习这种复杂语法的意义：

自己组织整理代码
读懂别人这样组织整理的代码

所以，不要觉得“这个太复杂，算了，我不这样用就是了……”。你不这样用，别人会这样用！你除了自己写代码，还得去读别人的代码。

#常见面试题# 如何合理有效的组织CSS？

一般来说，CSS会是前端最混乱的部分。大致因为：

开发人员对其掉以轻心，不予重视
层叠和冲突：莫名“多”了，或者“少”了个样式，
牵一发而动全身：改一个class的定义，不知道影响多少地方

比如说

一种最简单粗暴的方式：只允许使用外部样式。这样做有两个好处：

以100%实现“HTML内容与CSS表现分离”，即HTML文件中完全没有CSS样式的设置，所有的CSS设置都在.css文件中完成。
CSS的更改更集中，更方便专人管理

但这种方式会带来几个副作用：

让CSS的命名变得更加困难。随着项目的扩大，命名将变得越来越复杂（因为你不能重名！）。但假如我可以直接使用行内样式，就根本不需要命名；使用页内样式，只需要当前页面不重名即可。
让阅读和维护变得更加困难。比如我看到一个元素被标记为class="success"，知道它使用于.success的定义，然而.success定义在哪里的呢？css设置多了以后，找起来还是比较麻烦的；更麻烦的是，多个设置之间还会互相冲突……

所以，飞哥个人建议，如果一个样式，

仅仅适用于某一个特定元素，没有任何重用价值，就直接使用行内样式
仅仅在某一个特定页面中重用，就使用页内样式
需要在多个页面中重用，就使用外部样式

#体会#：从追求“纯粹”，到寻求“妥协”。

作业

使用合适的选择器，将之前的CSS样式作业
1. 1-2题，封装成页内样式；
2. 3-4题封装成外部样式放入site.css文件中
使用选择器组合，实现以下样式：
1. h1、h2、h3中的small标签，字体大小缩小75%
2. 所有a标签没有下划线，但p标签中的除外
3. 在嵌套的列表中，一级列表项红色，其他级蓝色
4. 表格中，如果说其中一格使用了.correct，该行中随后其他所有表格内容都加上中划线
5. 紧跟在label后面的input元素背景色为gray（如果能呈现的话）
6. 使用了类.small的p标签（只能是p标签）字体大小为12px