CSS：选择器：引入方式/选择器及其组合_css怎么添加一个选择器到另一个选择器中-CSDN博客

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

格言：程序员厌恶复制粘贴！

@想一想@：为什么？

使用CSS的方式
CSS设置可以放在三个地方：

内联式Inline（也叫行内样式）：这是我们已经学过的，CSS的设置放置在HTML元素的style属性里面，这里面的设置只能作用于当前元素
嵌入式Embedding（也叫页内样式）：CSS设置放置在一个标记块里面。这里面的设置能作用于整个当前页面。
可以写在页面任何地方，但我们通常把它放在head中：

外联式Linking（也叫外部样式）：把CSS设置放置在一个独立的以.css为后缀的文件中，文件中直接写样式，不需要

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

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

标签选择器：表示所有该标签均适用 {}中定义的样式：
/所有p标签都是蓝色文字/
p{
color:blue;
}
类选择器：
在元素中添加一个属性：属性名class，属性值自己设定，比如说red

源栈欢迎您！

然后，在

类和Id的名字，可查看：命名规则 - 汇总。

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

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

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

源栈

如果这三种选择器里设置的样式并不冲突，该元素可以同时（层叠）使用这些样式：

当出现冲突时（比如都设置了color，但color值不同），优先级选择从高到低（简化版）：

行内样式
id选择器
类选择器
标签选择器
*选择器
演示：使用F12调试工具

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

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

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

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

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

组合
在

分组
逗号（,）" 分隔：p, .mark p和.mark都一样（）

后代
空格" " 分隔：p .mark 在p里面的.mark受影响（）

父子
大于符号">"分隔: p>.mark 在p的直接下一级里的.mark受影响（）

兄弟
“+”：相邻
“~”：所有
直接写在一起：

标签和类：p.mark 标注了该类的元素
类和类：.mark.important （至少）同时使用了mark和important两个类
PS：学习这种复杂语法的意义：

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

如何选择/组织CSS内容？【常见面试题】
一般来说，CSS会是前端最混乱的部分。大致因为：

开发人员对其掉以轻心，不予重视
层叠冲突
牵一发而动全身

最简单粗暴的方式：只允许使用外部样式。以100%实现“HTML内容与CSS表现分离”，即HTML文件中完全没有CSS样式的设置，所有的CSS设置都在.css文件中完成。

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

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