本篇博客主要是讲的css基础中的引入、选择器与权重问题
CSS引入
在学习CSS之前我们要了解到什么是CSS？
CSS 指层叠样式表 (Cascading Style Sheets)，CSS的样式定义如何显示 HTML 元素。
CSS的引入方式有三种，内部样式表、行内样式表和外部样式表。
内部样式表：放在style标签中，一般放在head里面
优点：结构样式部分分离，嵌入式引入
行内样式表：只修改行内样式,简单修改 用双引号，样式间空格隔开 只控制当前标签
< p style="color:red; ">
外部样式表：另起一个style.css文件，在head标签里通过link rel=“stylesheet” href=“style.css” 引入到html文件中。
CSS选择器
在HTML中有许许多多的标签，我们可以通过选择器来选择我们需要的标签。在这里我们先介绍四种选择器，后面进阶版我们在补充一些能够让我们工作更高效的选择器。
通配符选择器
当我们需要修改一个页面中所有标签的样式时，可以使用通配符选择器，它的语法如下：
<html lang="en">
<head>
<title>基础选择器之通配符选择器</title>
<style>
* {
color: red;
}
/* * 这里把 html body div span li 等等的标签都改为了红色 */
</style>
</head>
<body>
<div>111</div>
<span>222</span>
<ul>
<li>333</li>
</ul>
</body>
</html>
将这个html文件中所有的样式都改成通配符选择器中设置的样子。如下图所示：
通配符选择器的权重为0,0,0,0
标签选择器
当我们需要更改某一个标签里的样式时，可以采取标签选择器，它的语法如下：
<html lang="en">
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>
这是一个盒子
</div>
<div>
这是另一个盒子
</div>
</body>
</html>
标签选择器可以选择HTML中某一类标签，对所有这类标签都更改样式。如下图所示：
标签选择器的权重为0,0,0,1
类选择器
当页面中有俩个相同标签，但我们只想对其中一个更改样式时，我们采用类选择器。
1.先给我们需要更改样式的标签起个类名。
2.在CSS中使用“.类名”的语法对该标签进行更改样式。
具体语法如下：
<html lang="en">
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
这是一个盒子
</div>
<div>
这是另一个盒子
</div>
</body>
</html>
此时只有类名为.box的div盒子是更改了样式的。如下图所示：
注意：
1.类选择器使用“.”进行标识
2.长名称或词组可以使用中横线来为选择器命名
3.不能使用纯数字、中文、特殊标签 ，尽量使用英文字母
4.命名要有意义
5.命名规范
6.在一个class里面可以调用多个类，中间用空格隔开。
类选择器的权重为0,0,1,0
id选择器
当我们有一些样式是独一无二的时，我们可以采用id选择器。
注意：id不能重复，且只能被调用一次，先调用的生效。
它的语法如下：
<html lang="en">
<head>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box1">
这是一个盒子
</div>
<div >
这是另一个盒子
</div>
</body>
</html>
此时第一个div盒子的id为box1,所以只有它的样式被更改，如下图所示：
补充：在css里面，同一个id名虽然可以调用多次，但是在js里面，多次调用同一个id会解析错误出现冲突。在CSS中我们会更偏向使用类选择器。
id选择器的权重是0,1,0,0
复合选择器
1.后代选择器
选择父元素中的所有子元素。
语法格式如下：
元素1 元素2{
样式声明；
}
更改的是元素2的样式。中间用空格隔开。
<html lang="en">
<head>
<title>复合选择器之后代选择器</title>
<style>
ul li {
width: 100px;
height: 40px;
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>这是一个盒子</li>
<li>这是一个盒子</li>
<li>这是一个盒子</li>
<li>这是一个盒子</li>
<li>这是一个盒子</li>
</ul>
<ol>
<li>这是另一个盒子</li>
<li>这是另一个盒子</li>
<li>这是另一个盒子</li>
<li>这是另一个盒子</li>
<li>这是另一个盒子</li>
</ol>
</body>
</html>
在这里只是对ul里面的所有li进行了样式更改，ol里面的li样式不会有任何变化。如下图所示：
2.子选择器
当一个标签里面有多个孩子，但我们只想修父盒子的亲孩子样式，我可以采用子选择器。
语法：
元素1>元素2{
样式声明;
}
中间没有空格
<html lang="en">
<head>
<style>
/* 此时div中的所有p都更改了颜色 */
/* .box p{
color: red;
} */
.box>p{
color: pink;
}
</style>
</head>
<body>
<div class="box">
<p>我是box盒子的亲孩子</p>
<div>
<p>我是box盒子的后代</p>
</div>
</div>
</body>
</html>
此处只更改了box盒子中的亲孩子p的样式。如下图所示：
子选择器可以在多层盒子中只更改选中的盒子的亲孩子的样式。
3.并集选择器
适用于部分盒子有相同代码块时，使用并集选择器可以优化我们的代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>复合选择器之子选择器</title>
<style>
h2,
p {
color: red;
}
h3,
ul li {
color: pink;
}
</style>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一段文字</p>
<h3>这是另一个标题</p>
<ul>
<li>这是一个列表</li>
</ul>
</body>
</html>
此处将h2和p的文字更改为一个样式，h3和li的样式改成一个样式，如下图所示：
选择器之间用 , 隔开，可以是标签名、类名或者id，在书写中最好标签与标签分行写。
4.伪类选择器
在页面中我们常看到鼠标经过某个元素时才出现一些效果，一般使用伪类选择器来实现。
这里主要介绍的是链接伪类器。
| 语法 | 效果 |
|---|---|
| a:link | 选择未访问过的链接 |
| a:visited | 选择已访问过的链接 |
| a:hover | 选择鼠标经过时的链接 |
| a:active | 选择鼠标正在选中期间时的链接 |
若是要对一个链接设置以上四个属性，要严格按照link visited hover active的顺序书写。
我们在现阶段的开发中，最常使用的是标签:hover
注意：a链接要单独书写样式。
<html lang="en">
<head>
<style>
p {
color: red;
}
p:hover {
color: pink;
}
</style>
</head>
<body>
<p>这是一段文字</p>
<p>这是另一段文字</p>
</body>
</html>
效果如图所示：
当鼠标移动到文字前：
当鼠标移动到文字上后：
伪类选择器的权重为0,0,1,0
选择器权重
我们通过选择器来更改样式，但是在使用中要注意CSS的三大特性中的层叠性和优先级。
层叠性即相同样式，后面的会覆盖前一个冲突样式，采用就近原则。
优先级就是前面每个选择器下面提到的权重问题。当我们对同一个选择器做同一个样式更改时，执行的是层叠性中的就近原则，选择器不同时就看谁优先级高就执行谁。
| 选择器 | 权重 |
|---|---|
| 继承/通配符选择器 | 0,0,0,0 |
| 标签选择器 | 0,0,0,1 |
| 类选择器/伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style=“” | 1,0,0,0 |
| ！important | 无穷大 |
优先级注意点：
1.权重是有4组数字，但是不会由进位
2.等级判断从左向右比较，某 一位数值相同，则比较下一位。
3.继承的权重是0，不管父元素权重多高，子元素继承的权重都是0.
4.权重可以叠加，但不会有进位问题
例：
ul li 权重是0,0,0,1+0,0,0,1=0,0,0,2
.nav li 权重是0,0,1,0+0,0,0,1=0,0,1,1
a链接是浏览器默认指定的颜色，蓝色带下划线，要修改必须单独指定a的样式。
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
