类型、类和 ID 选择器
大约 2 分钟
类型、类和 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;
}