<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b9285107-50f6-454f-9e0d-55f507db3600/css.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b9285107-50f6-454f-9e0d-55f507db3600/css.png" width="40px" /> CSS 选择器规定了CSS规则会被应用到哪些元素上

</aside>

Untitled

写在前面

本文使用一个统一的HTML案例，并通过使用不同的选择器例子来测试究竟哪些元素被添加了样式（主要是宽度为1px的边框），对应的HTML代码如下，为了方便你的理解，我在下面附带了一个树状的元素图。

HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="grandfather1">grandfather1
  <div class="father1">father1
    <div id="son11" name="TedMosby" nickName="Ted Teddy" language="zh-CN"><span>son11</span></div>
    <div id="son12" name="BobMosby"><span>son12</span></div>
    <div id="daughter11" name="LilyMosby"><span>daughter11</span></div>
  </div>
</div>
</body>
</html>

树状图

继承

继承是CSS中最基本的内容之一。
继承没有任何特定性（地位最低），我们随时可以用一个选择器来覆盖元素从父选择器继承来的样式。

可以继承的样式

一般来说，与「字体」相关的属性都会继承。以下几个属性都会继承。

<aside> 🔑 font-size：字体大小 font-weight：字体粗细 font-family：字体家族 color：字体颜色

</aside>

不可以继承的样式

一般来说，与「框」相关的属性都不会继承。以下几个属性都不会继承。

<aside> 🔑 border：边框 margin：外边距 padding：内边距 background：背景色

</aside>

基本选择器

通配选择器（Universal Selector）

选择所有元素

/* 给所有元素都加上一个🍎色边框 */
* {
  border: 1px solid red;
}

由于截图工具的原因，<body>的右侧边框无法在截图中体现出来。

类型选择器（Type Selector）

选择某个类型的元素（例如div或span）

/* 给所有div元素加上一个🍏色边框 */
div {
  border: 1px solid green;
}

类选择器（Class Selector）

选择「class属性的值 === 给定值」的所有元素
语法：.[给定值]

/* 给所有class值为father1的div添加一个🧀色边框 */
.father1 {
  border: 1px solid Gold;
}

ID 选择器（ID Selector）

选择「ID属性值 === 给定值」的哪个（唯一的）元素
语法：#[给定值]

/* 给所有ID值为son11的div添加一个🥕色边框 */
#son11 {
  border: 1px solid orange;
}

属性选择器（Attribute Selector）

通过属性名和属性值来匹配元素

语法1：[attr]

带有以attr命名的属性

/* 给有name属性的div加一个🍐色边框 */
[name] {
  border: 1px solid yellowgreen;
}

语法2：[attr=value]

带有以attr命名的属性
attr属性的属性值是value

/* 给name属性值为TedMosby的div加一个🍇色边框 */
[name=TedMosby] {
  border: 1px solid violet;
}

<aside> 💡 『#ID属性值』等同于『id=[ID属性值]』

</aside>

语法3：[attr~=value]

带有以attr命名的属性
该属性的值是一个以空格为分隔的列表
列表中至少有一个值是value

/* 给nickName属性列表中包含Teddy的div添加一个🍆色边框 */
[nickName~=Teddy] {
  border: 1px solid blueviolet;
}

<aside> 💡 『.[类名]』等同于『class~=[类名]』

</aside>

语法4：[attr|=value]

带有以attr命名的属性
该属性的值是value或以“value-”为前缀

/* 给language属性为zh-CN的div添加一个🍒色边框 */
[language|=zh] {
  border: 1px solid Coral;
}

语法5：[attr^=value]

带有以attr命名的属性
属性值以value开头

/* 给name属性以Ted开头的div添加一个🥒色边框 */
[name^=Ted] {
  border: 1px solid forestGreen;
}

语法6：[attr$=value]

带有以attr命名的属性
属性值以value结尾

/* 给name属性以Mosby结尾的div添加一个🌰色边框 */
[name$=Mosby] {
  border: 1px solid Brown;
}

语法7：[attr*=value]

带有以attr命名的属性
属性值包含value

/* 给name属性包含Mos的div添加一个🍅色边框 */
[name*=Mos] {
  border: 1px solid Tomato;
}

组合选择器

语法：A, B（A、B均为基本选择器）

/* 给name属性为BobMosby的儿子和LilyMosby的女儿添加🍓色边框 */
[name=TedMosby],
[name=LilyMosby]{
  border: 1px solid Crimson;
}

组合器

后代组合器（Descendant Combinator）

语法：A B

/* 给所有grandfather1类div的后代元素添加一个🍑色边框 */
.grandfather1 div {
  border: 1px solid PeachPuff;
}

目录

写在前面

HTML代码

树状图

继承

可以继承的样式

不可以继承的样式

基本选择器

通配选择器（Universal Selector）

类型选择器（Type Selector）

类选择器（Class Selector）

ID 选择器（ID Selector）

属性选择器（Attribute Selector）

语法1：[attr]

语法2：[attr=value]

语法3：[attr~=value]

语法4：[attr|=value]

语法5：[attr^=value]

语法6：[attr$=value]

语法7：[attr*=value]

组合选择器

组合器

后代组合器（Descendant Combinator）