前端必修技能：高手进阶核心知识分享 - CSS 选择器

前端必修技能：高手进阶核心知识分享 - CSS 选择器

CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。CSS 选择器用于选择你想要的元素的样式的模式。

看了上面的图，你发现就算你不知道选择器名字叫什么，属于哪一种，但不知不觉的，你其实已经习惯了其中的很多种选择器的使用。嘿嘿，这就是我现在的状态。看了这图之后，你是不是有一种感慨呢？选择器太多了，到底该怎么用呢？别急，我们一个个讲下去：

简单选择器

通用选择器

• 使用 * 来选择页面中所有的元素，‌常用于重置样式。‌
• 语法：* ｛ 属性:属性值; ｝
• 重要提示：使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。

用例：下面例子用于初始化浏览器中所有标签的内外边距。

*{ padding:0; margin:0; }

元素（标签）选择器

• 通过元素名称选择 HTML 元素。例如，p 选择器将选择所有 p 元素。
• 语法：标签名｛ 属性:属性值; ｝

用例：下面例子用来定义H1的颜色为红色:

h1{ color:red; }

ID选择器

• 通过元素的唯一标识符（ID）选择 HTML 元素。ID 选择器以 # 开头，后面跟着 ID 名称，例如 #nav选择器将选择 id为 nav的元素。
• 语法：ID名｛ 属性:属性值; ｝

重要提示：因为ID的唯一性，通常用于 程序交互。一般通过ID选择器来定义HTML框架结构的布局效果，因为HTML框架元素色ID值都是唯一的。若你的页面中包含了重复ID名称的元素，将可能引起不确定的浏览器行为，比如引起Js无法正常工作。建议：尽量用class选择器编写CSS样式。

用例：下面例子用于给id为logo的元素定义文字颜色：

#logo{ color:#ccc; }

类选择器

• 通过类别名称选择具有特定类别的 HTML 元素。类选择器以 . 开头，后面跟着类别名称。
• 语法：.className｛ 属性:属性值; ｝

用例：下面例子给所用类名为 son 的元素定义文字颜色：

.son{ color:red; }

属性选择器

• 属性选择器是通过元素的属性以及属性值来选择对应元素的。
• 语法：选择器[属性名]{属性：属性值；}

以下是几种常见的属性选择器以及它们的写法和用法：

[attribute]

[attribute]选择器：选择包含指定属性的元素。如果希望选择有某个属性的元素，而不论这个属性值是什么，就可以使用这个属性选择器。

div[class] { color: red;}

上述例子指定了所有 div元素中 包含属性名为 class 的文字颜色为红色，

<div >我</div> 
<div class='black' >爱</div> 
<div class=''>你</div> 
<div id='go'>们</div> 
<p class="card">你知道吗？</p>

将上述CSS