在HTML中会有许多的元素标签,当我们要为其中部分的标签添加样式时,就需要用到css选择器。常用的选择器有以下几种:
元素选择器(标签选择器)
元素(标签)选择器就是选择基本元素作为名称。例:
h1{
text-align: center;
}
p{
font-size: 30px;
}
h1、p标签可以直接作为选择器的名称。
id选择器
id选择器使用“#”进行标识,后面紧跟id名。例:
#one{ //元素id名为one
width: 50px;
}
类选择器
类选择器使用“ . ”进行标识,后面紧跟类名。例:
.div{ //类名为div
background-color: red;
}
通配符选择器
通配符选择器使用“ * ”进行标识,其能作用于页面中所有的元素。例:
*{
margin: 0;
padding: 0;
}
后代选择器
后代选择器选定指定的所有后代元素,样式:祖辈元素+空格+后代元素。例:p b { . . . }
<p>
<b></b> //选中
<span>
<b></b> //选中
</span>
</p>
示例中p元素是祖辈元素,所有b元素都是p元素的后代。
子元素选择器
子元素选择器选定父元素的所有子代元素,样式:父元素+大于号+子元素。例:p>b { . . . }
<p>
<b></b> //选中
<span>
<b></b> //未选中
</span>
</p>
示例中p元素是父元素,第二行的b元素是p元素的子代,第四行的b元素不是p元素的子代,而是span元素的子代。