CSS 全称是Cascading Style Sheets，层叠样式表，被用来控制HTML标签的样式，美化网页
。CSS有两个重点： 属性 和 选择器 。

CCS的编写格式

CCS的编写格式是以键值对的形式，如：

1
2
3
color : red;
background-color : blue;
font-size : 20px;
  • 属性一般由属性名和属性值组成，左边是属性名，右边是属性的值

CSS有3种书写形式：

  1. 行内样式：（内联样式）直接在标签的 style 属性中书写
1
<body style="color : red;">
  1. 页内样式：在本网页的 style标签中书写
1
2
3
4
5
<style>
<body {
color : red;
}
</style>
  1. 外部样式：在单独的CSS文件中书写，然后在网页中用link引入
1
<link rel="stylesheet" href="index.css">

CSS选择器:

1. 标签选择器

根据标签名查找标签：

1
<div>div1<div>

找到标签，设置样式：

1
2
3
div {
color : red;
}
2. 类选择器
1
<p class="high">hello world</>
1
2
3
.high{
color : red;
}
3. id选择器
1
<p id="first">Hello world</p>
1
2
3
#first{
color : red;
}
4. 并列选择器
1
2
3
4
<div class="high">div high</div>
<div class="low">div low</div>
<p class="high">p high</p>
<p class="low">p low</p>
1
2
3
div, .high{
color : red;
}

并列选择，只要一个符合条件就可以
结果：

div high
div low
p high
p low
5. 复合选择器
1
2
3
4
<div class="high">div high</div>
<div class="low">div low</div>
<p class="high">p high</p>
<p class="low">p low</p>
1
2
3
div .high{
color : red;
}

复合选择，必须全部符合条件就可以
结果：

div high
div low
p high
p low
6. 后代选择器
1
2
3
4
5
6
7
<div>
<p>div -> p</p>
<span>
<p>div -> span -> p</p>
</span>
</div>
<p>div p</p>
1
2
3
div p {
color : red;
}

只要是在div 里面的 p 标签，都符合要求，结果：

div -> p
div -> span -> p
div p
7. 直接后代选择器
1
2
3
4
5
6
<div>
<p>div -> p</p>
<span>
<p>div -> span -> p</p>
</span>
</div>
1
2
3
div p {
color : red;
}

必须是直接在div 里面的 p 标签，才符合要求，即儿子可以，孙子就不行
结果：

div -> p
div -> span -> p
8. 相邻兄弟选择器
1
2
3
4
5
6
7
8
<div>
<p>div -> p</p>
<span>
<p>div -> span -> p</p>
</span>
</div>
<p>div p</p>
<p>p p</p>
1
2
3
div + p {
color : red;
}

只要是在div 里面的 p 标签，都符合要求，结果：

div -> p
div -> span -> p
div p
p p
9. 属性选择器
1
2
3
4
<div name="Jack">name = Jack</div>
<div name="Tom">name = Tom</div>
<div name="Bob" age="20">name = Bob, age = 20</div>
<div>no name</div>
1
2
3
4
5
6
7
8
9
div[name] {
color : red;
}
div[name][age] {
color : green;
}
div[name="Tom"] {
color : yellow;
}
name = Jack
name = Tom
name = Bob, age = 20
no name
10. 伪类
属性 描述
:active 向被激活的的元素添加样式
… …
11. 伪元素

…

选择器优先级

选择器针对性越强、范围越小，优先级就越高
选择器的权值：

选择器 权值
通配符 0
标签 1
类 10
属性 10
伪类 10
id 100
important 1000
  • 原则：选择器的权值加在一起，大的优先，权值一样，后定义的优先