选择器(选中标签)
- 元素选择器(标签选择器)
直接将标签名作为选择器，选中所有指定标签
例如: div{}, p{}, a{}
- id选择器
将标签的id属性值前面加#作为选择器，选中id属性值是指定的值的标签
注意：一个页面中id值要唯一(不同标签的id值不一样)
例如: #p2{}
- class选择器(类选择器)
将标签的class属性值前加.作为选择器，选中所有class属性值是指定值的标签
例如：.c1{}
-
(通配符)
直接将作为选择器，选中当前页面所有的标签
-
- 群组选择器
将多个选择器用逗号隔开作为一个选择器，选中每个单独的选择器选中的所有标签
- 例如：a,p{} - 选中所有a标签与p标签
#p1,div{} - 选中id是p1的标签和所有的div标签
.c1,#p1,a{} - 选中所有class值是c1,id值是p1和所有的a标签
- 层级选择器(后代选择器)
将多个选择器用空格隔开作为一个选择器，按层级选择最后一个选择器选中的标签
例如：div .c1{} - 选中所有在div标签中的，class值是c1的标签
.c1 .c2 #d1{} - 选中class是c1中class是c2中的id是d1的标签
-
- 选择器的权重值
不同的选择器的权重值不一样，权重值越大优先级越高。在权重相同的时候，谁后写谁优先级高
- 不管什么情况，内联样式优先级最高
- 通配符: 0001(1)
- 元素选择器：0001(1)
- class选择器: 0010(2)
- id选择器: 0100(4)
- 群组选择器：分开看每个选择器的权重
- 后代选择器：用空格分开的所有选择器的权重之和
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style type="text/css">
.c1{
color:red;
}
.c1{
color:green;
}
div .c3{
color:blue;
}
</style>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 class="c1">我是标题</h1>
<div class="c1">
<p>我是段落1</p>
</div>
<div class="c2">
<p>我是段落2</p>
<p class="c3">我是段落2-1</p>
</div>
<div class="c3">
<p>我是段落3</p>
</div>
<div class="c4">
<p>我是段落4</p>
</div>
</body>
</html>
网友评论