文章目录
首先先上一段HTML，作为我们修改的对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>观沧海</h3>
<h4>曹操</h4>
<h4>东汉</h4>
<p>东临碣石，以观沧海。</p>
<p>水何澹澹，山岛竦峙。</p>
<p>树木丛生，百草丰茂。</p>
<p>秋风萧瑟，洪波涌起。</p>
<p>日月之行，若出其中；</p>
<p>星汉灿烂，若出其里。</p>
<p>幸甚至哉，歌以咏志。</p>
</body>
</html>
标签选择器 p{}
这个选择器就有点简单粗暴了，话不多说，直接上代码。
/*直接简单粗暴的把标签写出来*/
p{
font-size: 50px;
color: blue;
}
/*如果重复写了，则覆盖上一个标签中的属性
如果上一个里面没有该属性，则直接添加*/
p{
font-size: 30px;
text-align: center;
}
类选择器 .class{}
这个就是在标签上增加一个class属性，观察代码。
其中HTML做出一定的修改。
<p class="line1">东临碣石，以观沧海。</p>
<p class="line1">水何澹澹，山岛竦峙。</p>
CSS：
p{
font-size: 50px;
color: blue;
}
p{
font-size: 30px;
text-align: center;
}
/*最终结果就是class属性为line1
的这两行颜色变成黑色，其他的没有变化*/
.line1 {
color: black;
}
id选择器 #id{}
这个和类选择器有些许类似，但是id的值是在整个文档中独一无二的。
<p id="line1">东临碣石，以观沧海。</p>
<p id="line2">水何澹澹，山岛竦峙。</p>
CSS书写格式如下：
#line1 {
color: blueviolet;
}
#line2 {
color: black;
}
后代选择器 div p{}
这个选择器就有点意思了，为了方便观察，我们需要把HTML做一次大的调整。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>观沧海</h3>
<h4>曹操</h4>
<h4>东汉</h4>
<div>
<p>东临碣石，以观沧海。</p><!--第一句-->
<p>水何澹澹，山岛竦峙。</p><!--第二句-->
</div>
<div class="div2">
<p class="class1">树木丛生，百草丰茂。</p><!--第三句-->
<p id="id1">秋风萧瑟，洪波涌起。</p><!--第四句-->
</div>
<div id="div3">
<p class="class2">日月之行，若出其中；</p><!--第五句-->
<p id="id2">星汉灿烂，若出其里。</p><!--第六句-->
</div>
<p>幸甚至哉，歌以咏志。</p>
</body>
</html>
下面是CSS代码：
/*对于第一二两句
然而这个时候是所有的div里面的字都变色了，
这是因为标签选择器会选中所有元素*/
div p{color: blueviolet;}
/*对于第三四句*/
.div2 p{color: black;}
/*对于第三句*/
.div2 .class1{text-align: center;}
/*对于第四句*/
.div2 #id1{font-family: "Microsoft Tai Le";}
/*对于第五句*/
#div3 .class2{font-size: larger;}
当然后代不止是仅仅两个标签，理论上讲，可以通过这种方式实现无限多的锁定。
交集选择器 p.class{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>观沧海</h3>
<h4>曹操</h4>
<h4>东汉</h4>
<p>东临碣石，以观沧海。</p><!--第一句-->
<p>水何澹澹，山岛竦峙。</p><!--第二句-->
<p class="class1">树木丛生，百草丰茂。</p><!--第三句-->
<p id="id1">秋风萧瑟，洪波涌起。</p><!--第四句-->
<p class="class2">日月之行，若出其中；</p><!--第五句-->
<p id="id2">星汉灿烂，若出其里。</p><!--第六句-->
<p>幸甚至哉，歌以咏志。</p>
</body>
</html>
CSS:
/*首先是选中所有的p元素
然后取出其中类属性为class1的*/
p.class1{color: blueviolet}
/*这个方法也是一样*/
p#id1{color: aqua}
这个选择器的原理是选取相交的部分
子代选择器 p>span{}
这种选择器与后代选择器比较类似，但是这个选择器只能选中其直系子代`
<p>
<span>东临碣石，以观沧海。
<span>水何澹澹，山岛竦峙。</span>
</span>
</p>
CSS：
/*后代选择器会使得所有的span的字体变蓝*/
p span{color: blue;}
/*子代选择器只会使其儿子变绿*/
p>span{color: green;}
并集选择器 p,span{}
并集选择器是选中所有指定的标签。这个不难理解，不做过多赘述。
选择器的优先级
对于单个的选择器来说，有如下关系
id>类>标签
对于高级选择器来说，我们采用权重的方式来划分
例如对于①#id1 #id2 .class1 p {} 和 ②#id1 .class1 .class2 p{}
我们可以假定id选择器的权重为100，类选择器为10，标签选择器为1
则有①的权重为1002 + 10 + 1 = 211 ②的权重为100 + 102 + 1 = 121
显然①的权重比②的大
