选择器的分类可分为基本选择器,复合选择器,CSS3中新增的选择器三种类型来讲解。
1.基本选择器
在上一篇博客中已经介绍过基本选择器,在这里直接COPY过来。
1)类选择器
...
<body>
<p class="important_point">这是一个重点内容</p>
</body>
...
.important_point{
color:red; /*设置段落的字体颜色为红色*/
font-size:14px; /*设置字体的大小为14px*/
}
2)id选择器
...
<body>
<p id="important_point">这是一个重点内容</p>
</body>
...
#important_point{
color:red; /*设置段落的字体颜色为红色*/
font-size:14px; /*设置字体的大小为14px*/
}
3)标签选择器
...
<body>
<p>这是一个重点内容</p>
</body>
...
p{
color:red; /*设置段落的字体颜色为红色*/
font-size:14px; /*设置字体的大小为14px*/
}
三种选择器的效果是一样的:
总结:
类选择器:格式(class="类名"),一个标签可以有多个类,多个标签也可以同属同一个类。css表示方法(.类型{属性名=属性值;})
id选择器:格式(id="id名"),一个标签只有有一个属性名,同时id名是唯一的,不同的标签不能使用同一个id名。css表示方法(.id名{属性名=属性值;})
标签选择器:直接使用标签即可.css使用方式(标签{属性名=属性值;})
2.复合选择器
1)交集选择器
交集选择器是由两个选择器直接构成的,结果是选中两个选择器各自范围的交集(第一个必须是标签选择器,第二个必须是类选择器或者ID选择器)
标签选择器与类选择器形成的交集选择器
<div>
<p class="toy">这是一个玩具</p>
</div>
div.toy{
corlor:blue;
font-size:20px;
}
标签选择器与id选择器形成的交集选择器
<div>
<p id="toy">这是一个玩具</p>
</div>
div#toy{
corlor:blue;
font-size:20px;
}
2)并集选择器
就是同时选择多个选择器,多个选择器之间用","隔开,每个选择器可以是任何类型的选择器。
div,h1,p{
....
}
div.class1,#toy,p{
....
}
3)后代选择器
后代选择器是通过嵌套的方式,对特殊位置的HTML标签进行控制,写法是把外层标签写在前面,内层标签写在后面,标签与标签之间使用空格隔开。
div li{
....
}
div li a{
....
}
4)子选择器
子选择器用于选中标签的直接后代(就是儿子,不是孙子),定义符号是大于号(>)
div>li{
....
}
5) 相邻选择器
相邻选择器的定义符号是(+),可以选择紧跟在它后面的一个兄弟元素(这两个元素具有共同的父元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试专用</title>
<style>
div+p{
color:red;
}
</style>
</head>
<body>
<div>略略略略略略</div>
<p>本行是相邻选择器,所以字体颜色是红色</p>
<p>本行不与div相邻,所以字体颜色不是红色</p>
</body>
</html>
效果如下图所示:
3.CSS3新增的选择器
在这里用一张思维导图来说明,显示的部分都是常用的,没有显示的部分都是不常用的。
本博客由博主原创,如需转载需说明出处!谢谢支持!