文章目录
1 CSS基本语法
1.上节课我们讲到三种向html页面插入css的方法。每种方法都对应者不同的语法
（1）内联样式：在html元素前标签上用style属性来修饰单个标签内的内容
（2）内嵌样式和外联样式，选取相应的html元素进行修饰，一次可以选择多个标签来修饰他们。
2.内嵌样式和外联样式选区元素有很多的讲究，今天就主要来看看这里面的讲究。基本的语法都是
selector
{
属性：值；
}
注意css中的值不需要引号引起来
2 selector选择器
2.1 通配符选择器*
语法：.{}
现象：所有文字被修饰成为棕色
代码：
<style>
*
{
color:sienna;
}
</style>
</head>
<body>
<h1 id="first">第一个标题</h1>
<h2 id="second">第二个标题</h2>
<h3 id="third">第三个标题</h3>
</body>
2.2 根据元素的id或class，或者元素的其他属性进行选择
2.2.1.根据元素id，一个html页面id是某个元素的唯一标识符（可以没有，但有就要唯一），可以找到特定标签。
语法：#id名{}
现象：下面只有第一行文字被修饰成为棕色
代码：
<style>
#first
{
color:sienna;
}
</style>
</head>
<body>
<h1 id="first">第一个标题</h1>
<h2 id="second">第二个标题</h2>
<h3 id="third">第三个标题</h3>
</body>
2.2.2.根据元素class，一个html页面class可以找到一组标识符（这些元素都有class属性并且class属性的值相同）
语法：。class名{}
现象：下面只有第一行文字被修饰成为棕色
代码：
<style>
.smaller_than_3
{
color:sienna;
}
</style>
<title>Title</title>
</head>
<body>
<h1 class=" smaller_than_3" id="first">第一个标题</h1>
<h2 class=" smaller_than_3" id="second">第二个标题</h2>
<h3 class=" not_smaller_than_3" id="third">第三个标题
</body>
2.2.3.根据元素的属性满足的条件进行选择
语法：
这个属性值可以是自定义的，只要能抓取到对应的元素就行了
2.2.4.根据元素的标签进行选择。只要是这种标签就选中。
语法：标签名{}
现象：下面只有第二行文字被修饰成为棕色
代码：
<style>
h2
{
color:sienna;
}
</style>
</head>
<body>
<h1 id="first">第一个标题</h1>
<h2 id="second">第二个标题</h2>
<h3 id="third">第三个标题</h3>
</body>
2.3 根据标签之间的关系进行选择
2.3.1 后代选择器
1.语法: 标签1 标签2{}
2.效果：两个链接都变红
3.代码
<style>
h1 a
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1">链接1</a>
</p>
<a href="#2">链接2</a>
</h1>
</body>
2.3.2 子元素选择器
1.语法:标签1>标签2{}
2.效果：只有第二个链接变红
3.代码
<style>
h1>a
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1">链接1</a>
</p>
<a href="#2">链接2</a>
</h1>
</body>
2.3.3临近元素选择器，标签1后面第一个标签2
1.语法：标签1+标签2{}
2.效果：第2条链接变红
3.代码、
<style>
p+a
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1">链接1</a>
</p>
<p></p>
<a href="#2">链接2</a>
<a href="#3">链接3</a>
</h1>
</body>
2.3.4 后面的元素，相同的父元素，标签1后面所有的标签2
1.语法：标签1~标签2{}
2.效果：第2，3条链接都变红
3.代码
<style>
p+a
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1">链接1</a>
</p>
<a href="#2">链接2</a>
<a href="#3">链接3</a>
</h1>
</body>
2.4 组选择器
1.语法：选择器1，选择器2，选择器3{}
多个选择器选择后的标签都用享用的方法修饰
2.5 伪类元素修饰
http://www.w3school.com.cn/css/css_pseudo_classes.asp
2.6 选择器组合
选择器之间可以相互组合选择更加精确元素，必须注意空格。
例如选择更加精确链接，h1标签下class为new的链接
<style>
h1 a.new
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1" class="new">链接1</a>
<a href="#1">链接1.1</a>
<a href="#1" class="new">链接1.2</a>
</p>
<a href="#2">链接2</a>
</h1>
</body>
2.7交集选择器
交集选择器：将两个选择器紧挨着写在一起，作用是选取这两个选择器的交集部分，格式有三：
a.标签选择器.类名
b.标签选择器#id名
c.标签选择器[属性名="属性值"]
3 多个css修饰的效果
1.一个选择器选择之后可以有多个修饰效果
2.同时一个html文件里也可以有多个选择器选择修饰
3.但是如果多个修饰器选择了同一个html元素，那么这个html元素应该遵从哪一个修饰效果呢？
这里就要谈到选择器的优先级了，不过我们一般在应用时 不会重复对一个标签进行设置。了
https://www.cnblogs.com/zxjwlh/p/6213239.html
3.1 权重 对于不同位置的css有不同的权重
权重表示这个修饰的有效程度，如果对于标签的某个属性有两个修饰，那么标签的最终样式取决于权重大的。
3.1.2 根据css的方式划分
1.内联样式>嵌入式和外部式
因为内联样式直接在某个标签上设置样式，因此不存在重复设置的情况，更加准确，更加有效
2.嵌入式和外部式都是通过选择器实现对标签的修饰，有可能重复，因此权重较低一些。
例如下面的文字内联样式比其他样式权重高
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: #0000FF;
}
</style>
</head>
<body>
<p style="color: #FF0000">
这是一段文字
</p>
</body>
3.1.2 根据css选择器来划分。
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
属性选择器的权重为0010
伪类选择器的权重为0010
伪元素选择器的权重为0010
后代选择器的权重：所包含选择器的权重之和
子选择器的权重：所包含选择器的权重之和
交集选择器权重为选择器之和
继承样式的权重为0000
行内样式的权重为1000，优先级最高
---------------------
作者：Stavin Li
来源：CSDN
原文：https://blog.csdn.net/m0_37285193/article/details/81567522
版权声明：本文为博主原创文章，转载请附上博文链接！
举例
例如下面虽然都选择了p，但是 body p 的权重相加后高于p，所以前者有效。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p{
color: #0000FF;
}
p{
color: #FF0000;
}
</style>
</head>
<body>
<p>
这是一段文字
</p>
</body>
</html>
3.1.3 完全相同选择器
如果有完全相同的选择器，那么谁在后面谁有效。
链接文件可以把它看作是在head里style后面的补充，与嵌入式等级相同，如果有相同的选择器，还是根据出现的顺序和权重判断。
显示红色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: #0000FF;
}
p{
color:#FF0000;
}
</style>
</head>
<body>
<p>
这是一段文字
</p>
</body>
3.1.4 特殊情况
无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
3.1.5总结
当然css是面向属性来修饰，意思就是
1.如果有多个选择器都修饰了某个属性，那么就根据权重来判断这个属性在哪个选择器中有效。
2.虽然有多个选择器选择了某个标签，但是他们修饰的不同的属性，那么他们就不会相互影响了。
3.如果搞不清权重，感觉自己设计的css样式没有表现出来，可以用浏览器打开后F11，shift+ctrl+c选择标签并且查看css样式
我们至此学完了选择器的知识
以后就是学习选择了标签之后如何对他们操作了