类型、类和 ID 选择器

这是可用的最简单的选择器，也是工作中最常用到的选择器。

类型选择器

类型选择器 有时也叫做 “标签名选择器” 或者是 “元素选择器”，因为它在文档中选择了一个 HTML 标签/元素的缘故。

标签（元素）名称

标签（元素）名称就是选择器

代码示例

<h1>Hello World!</h1>

h1{
  color:red; /** 选择类型为 h1 的元素 */
}

全局选择器

全局选择器 是由一个星号（*）代指的，它选中了文档中的所有内容或者是父元素中的所有内容。

*

选择全部（所有）元素

代码示例

<div>
    <h1>Hello World!</h1>
    <p>this is an example</p>
</div>

*{
    /** 选择页面的全部元素 */
    margin:0;
    padding:0;
}
div *{
    /** 选择div元素下面的所有元素 */
    color:red;
}

类选择器

类选择器 以一个句点（.）开头，会选择文档中应用了这个类的所有元素，标签中 class 属性的值就是这个元素的类。

.xxx

选择应用了这个类的所有元素

代码示例

<div class='content'>
    <h1 class='text'>Hello World!</h1>
    <p class='text example'>this is an example</p>
</div>

.content{
    /** 选择 class 为 content 的元素 */
    font-size:16px;
}
.content .text{
    /** 选择 class 为 content 的元素下面的子元素 class 为 text 的元素 */
    color:red;
}
h1.text{
    /** 选择类型为 h1 并且 class 为 text 的元素 */
    color:#000;
}
.text.example{
    /** 选择 class 为 text 并且 class 同时为 example 的元素 */
    font-size:14px;
}

ID 选择器

ID 选择器 开头为 ( # ) 而非 ( . )，不过基本上和上面的类选择器是同种用法。在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素。

#xxx

选择应用了这个ID的元素，一个ID应在文档中只出现一次，与类选择器用法相似

代码示例

<div id='content'>
    <h1 class='text'>Hello World!</h1>
    <p id='example' class='text'>this is an example</p>
</div>

#content{
    /** 选择 id 为 content 的元素 */
    font-size:16px;
}
#content .text{
    /** 选择 id 为 content 的元素下面的子元素 class 为 text 的元素 */
    color:red;
}
h1.text{
    /** 选择类型为 h1 并且 id 为 text 的元素 */
    font-style:italic
}
#example.text{
    /** 选择 id 为 example 并且 class 为 text 的元素 */
    color:green;
}