H5笔记之CSS-CSDN博客

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

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

color : red;
background-color : blue;
font-size : 20px;
复制代码

<body style="color : red;">
复制代码

<style>
<body {
color : red;
}
</style>
复制代码

<link rel="stylesheet" href="index.css">
复制代码

根据标签名查找标签：

<div>div1<div>
复制代码

找到标签，设置样式：

div {
color : red;
}
复制代码

<p class="high">hello world</>
复制代码

.high{
color : red;
}


我的博客：[https://iosgg.cn/](https://iosgg.cn/)
复制代码

<p id="first">Hello world</p>
复制代码

#first{
color : red;
}
复制代码

<div class="high">div high</div>
<div class="low">div low</div>
<p class="high">p high</p>
<p class="low">p low</p>
复制代码

div, .high{
color : red;
}
复制代码

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

div high
div low
p high
p low

<div class="high">div high</div>
<div class="low">div low</div>
<p class="high">p high</p>
<p class="low">p low</p>
复制代码

div .high{
color : red;
}
复制代码

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

div high
div low
p high
p low

<div>
<p>div -> p</p>
<span>
<p>div -> span -> p</p>
</span>
</div>
<p>div p</p>
复制代码

div p {
color : red;
}
复制代码

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

div -> p
div -> span -> p
div p

<div>
<p>div -> p</p>
<span>
<p>div -> span -> p</p>
</span>
</div>
复制代码

div p {
color : red;
}
复制代码

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

div -> p
div -> span -> p

<div>
<p>div -> p</p>
<span>
<p>div -> span -> p</p>
</span>
</div>
<p>div p</p>
<p>p p</p>
复制代码

div + p {
color : red;
}
复制代码

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

div -> p
div -> span -> p
div p
p p

<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>
复制代码

div[name] {
color : red;
}
div[name][age] {
color : green;
}
div[name="Tom"] {
color : yellow;
}
复制代码

name = Jack
name = Tom
name = Bob, age = 20
no name

属性	描述
:active	向被激活的的元素添加样式
...	...

...

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