[toc]
# 什么是 CSS?
> **层叠样式表, 用更少的代码, 让 HTML 更好看, 说完 o(_￣︶￣_)o**
# 如何使用 CSS?
## 行内样式
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1" style="width: 200px;height: 200px;background: red"></div>
</body>
</html>
```
## 内部样式
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background: yellowgreen;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
```
## 外部样式
```css
div {
width: 400px;
height: 400px;
background: blue;
}
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="div1"></div>
</body>
</html>
```
## 优先级问题
> 行内样式 > 内部样式 > 外部样式
# css 注释
> 很像 js 的多行注释
## 什么是元素?
> **元素（element）是文档结构的基础**
在 HTML 中，最常用的元素很容易识别，如`p`、`table`、`span`、`a`和`div`。
文档中的每个元素都对文档的表现起一定作用。
## 替换和非替换元素
在 CSS 中，元素通常有两种形式：`替换`和`非替换`
## 替换元素
替换元素内容的部分并非由文档内容直接表示。
`img` 元素，它由文档本身之外的一个图像文件来替换。
```html
<img src="howdy.gif" />
```
这个标记片段不包含任何具体内容，只有一个元素名和一个属性。
除非将其指向一个外部内容（在这里，就是由 src 属性指定的一个图像），否则这个元素没有任何意义。
`input` 元素与之类似，取决于 `input` 元素的类型，要由一个单选钮、复选框或文本输入框替换。
## 非替换元素
大多数 HTML 和 HTML 元素都是非替换元素（nonreplaced element）。
## 元素显示角色
除了替换和非替换元素，CSS2.1 还使用另外两种基本元素类型：`块级（block-level）`元素和`行内（inline-level）`元素。
## 块级元素特点
1. 总是在新行上开始；
2. 高度，行高以及外边距和内边距都可控制；
3. 宽度缺省是它的容器的 100%，除非设定一个宽度。
4. 它可以容纳内联元素和其他块元素
## 行内元素特点
1. 其他元素都在一行上；
1. 高，行高及外边距和内边距不可改变；
1. 宽度就是它的文字或图片的宽度，不可改变
1. 内联元素只能容纳文本或者其他内联元素
## 常见块级元素
- `blockquote` - 块引用
- `center` - 居中对齐块
- `div` - 常用块级容器，也是 css layout 的主要标签
- `form` - 交互表单
- `h1` - 大标题
- `h2` - 副标题
- `h3` - 3 级标题
- `h4` - 4 级标题
- `h5` - 5 级标题
- `h6` - 6 级标题
- `hr` - 水平分隔线
- `ol` - 排序表单
- `p` - 段落
- `table` - 表格
- `ul` - 非排序列表（无序列表）
## 常见行内样式
- `a` - 链接
- `b` - 粗体(不推荐)
- `big` - 大字体
- `br` - 换行
- `code` - 计算机代码(在引用源码的时候需要)
- `em` - 强调
- `i` - 斜体
- `img` - 图片
- `input` - 输入框
- `label` - 表格标签
- `select` - 项目选择
- `small` - 小字体文本
- `span` - 常用内联容器，定义文本内区块
- `strike` - 中划线
- `strong` - 粗体强调
- `sub` - 下标
- `sup` - 上标
- `textarea` - 多行文本输入框
- `u` - 下划线
## CSS 语法
`CSS选择器{属性名:属性值[;属性名:属性值...]}`
`CSS选择器{属性名:属性值;属性名:属性值}`
`CSS选择器{属性名:属性值1 属性值2;属性名:属性值}`
> _如果 CSS 语法写错了, 会怎样?_
## 元素选择器(标签选择器)
```css
div {
width: 400px;
height: 400px;
background: blue;
}
```
> _想给多个元素使用同一样式, 怎么办?_
## 分组选择器
```css
h2,
p {
color: gray;
}
```
**最典型的应用:清除内外边距**
```css
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td {
/* table elements 表格元素 */
margin: 0;
padding: 0;
}
```
**对比一下, 高下立判**
```css
h1 {
color: purple;
}
h2 {
color: purple;
}
h3 {
color: purple;
}
h4 {
color: purple;
}
h5 {
color: purple;
}
h6 {
color: purple;
}
/*********************************/
h1,
h2,
h3,
h4,
h5,
h6 {
color: purple;
}
```
## 通配符(可多可少, 可有可无)
`*` 0 个, 1 个, 或者多个
`?` 0 个, 1 个
通配选择器（universal selector）
> 显示为一个星号（\*）。这个选择器可以与任何元素匹配
```css
* {
padding: 0;
margin: 0;
}
```
## 一个标签,一个属性
```css
p {
color: red;
}
```
## 一个标签,多个属性
```css
div {
width: 200px;
height: 200px;
}
```
## 多个标签,一个属性
```css
h1,
h2,
h3,
h4,
h5,
h6 {
color: purple;
}
```
## 多个标签,多个属性
```css
h1,
h2,
h3,
h4,
h5,
h6 {
color: purple;
background: red;
}
```
## 建议多个属性的话, 结尾都加分号`;`
> 浏览器会忽略样式表中的空白符
_注意, 一个有分号, 一个没分号..._
```css
h1 {
font: 38px Helvetica;
color: yellow;
background: black;
}
```
```css
h1 {
font: 38px Helvetica;
color: yellow
background: black;
}
```
## 什么是类选择器和 ID 选择器?
> 通过类名或者 ID 名来定位元素
## 类选择器
> 要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器
```css
.div1 {
width: 200px;
height: 200px;
}
```
## 类和元素同时使用
```css
p.warning {
font-weight: bold;
}
```
## 多类选择器
> 如果类名有很多呢?
```css
.warning {
font-weight: bold;
}
.urgent {
font-style: italic;
}
.warning.urgent {
background: silver;
}
```
> 类名有顺序码?
```css
.warning {
font-weight: bold;
}
.urgent {
font-style: italic;
}
.urgent.warning {
background: silver;
}
```
> 如果元素没有这么多类名呢?
```css
.warning {
font-weight: bold;
}
.urgent {
font-style: italic;
}
.urgent.warning {
background: silver;
}
.urgent.warning.help {
background: red;
}
```
## 一个标签多个类名
```css
p.warning.help {
background: red;
}
```
## ID 选择器
```css
#first-para {
font-weight: bold;
}
```
> ID 选择器没有组合使用的必要
## 类选择器还是 ID 选择器？
> CSS 优先使用类, JS 优先使用 ID
## 类选择器和 ID 选择器区分大小写吗?
> 区分, 因为 CSS 是大小写敏感的
## 属性选择器
> 对于类选择器和 ID 选择器，你所做的实际上只是选择属性值
```css
h1[id="hello"] {
font: 38px Helvetica;
color: yellow;
background: black;
}
```
```css
h1[class="hello"] {
font: 38px Helvetica;
color: yellow;
background: black;
}
```
## 简单属性选择
```css
h1[id] {
font: 38px Helvetica;
color: yellow;
background: black;
}
```
```html
<body>
<h1 id="hello">hello world</h1>
<h1 id="hello1">hello world</h1>
<h1 id="hello2">hello world</h1>
<h1 id="hello3">hello world</h1>
<h1 id="hello4">hello world</h1>
<h1 id="hello5">hello world</h1>
</body>
```
> 有 class 属性, 别管值是多少, 都会被选中
## 多个属性(且的关系)
```css
p[id][class] {
font-weight: bold;
}
```
> _如果属性没值呢?..._
## 根据具体属性值选择
```css
a[href="https:www.baidu.com"] {
font-weight: bold;
}
```
## 根据多个属性值(且的关系)
```css
a[href="http://www.w3.org/"][title="W3C Home"] {
font-size: 200%;
}
```
> 如果是多个类名呢? 顺序呢?
```css
p[class="hello world"] {
font-weight: bold;
}
```
## 根据部分属性值选择(`~=`)
```css
h1[class~="hello"] {
font: 38px Helvetica;
color: yellow;
background: black;
}
```
```html
<body>
<h1 class="hello world">hello world</h1>
</body>
```
_其他标签也有 hello 呢?_
```css
h1[class~="hello"] {
font: 38px Helvetica;
color: yellow;
background: black;
}
```
```html
<body>
<h1 class="hello world">hello world</h1>
<h1 class="hello China">hello world</h1>
</body>
```
_只能用于 class?_
```css
img[title~="Figure"] {
border: 1px solid gray;
}
```
#### 以...开头
```css
h1[class^="hello"] {
font: 38px Helvetica;
color: yellow;
background: black;
}
```
#### 以...结尾
```css
h1[class$="hello"] {
font: 38px Helvetica;
color: yellow;
background: black;
}
```
## `^=`和`|=`的区别
- `^=`:以...开头
- `|=`:以...为前缀
## `~=`和`*=`的区别
- `~=`:包含某个单词
- `*=`:包含某个字符串
## 父与子, 祖宗与后代
## 后代选择器
```css
div h1 {
color: red;
}
```
```html
<body>
<div><h1>hello world</h1></div>
<h1>hello world</h1>
</body>
```
## 选择子元素
```css
div > h1 {
color: red;
}
```
```html
<body>
<div><h1>hello world</h1></div>
<h1>hello world</h1>
</body>
```
_支持连招吗?_
```css
div > h1 > span {
color: red;
}
```
```html
<body>
<div>
<h1><span>hello world</span></h1>
</div>
<h1>hello world</h1>
</body>
```
## 选择相邻兄弟元素
```css
div + h1 {
color: red;
}
```
```html
<body>
<div></div>
<h1><span>hello world</span></h1>
<h1>hello world</h1>
</body>
```
_兄弟元素, 支持连招吗?_
```css
div + h1 {
color: red;
}
```
```html
<body>
<div></div>
<h1><span>hello world</span></h1>
<h1>hello world</h1>
</body>
```
## 组合使用(注意阅读顺序)
`html > body table + ul{margin-top:150px;}`
## 什么是伪类和伪元素
> 看不到的类或者元素, 可以理解成隐藏类或者元素, 有了它们, 我们就可以愉快的设置样式了
## 伪类的语法
`selector : pseudo-class {property: value}`
**类和伪类, 可以搭配使用**
`selector.class : pseudo-class {property: value}`
## 锚伪类
> 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
a:link {
color: #ff0000;
} /* 未访问的链接 */
a:visited {
color: #00ff00;
} /* 已访问的链接 */
a:hover {
color: #ff00ff;
} /* 鼠标移动到链接上 */
a:active {
color: #0000ff;
} /* 选定的链接 */
</style>
</head>
<body>
<a href="https://www.baidu.com">百度一下, 你就更不知道了...</a>
</body>
</html>
```
## 伪类与 CSS 类(可以混合使用)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
a.red:visited {
color: #ff0000;
}
</style>
</head>
<body>
<a class="red" ,href="https://www.baidu.com">
百度一下, 你就更不知道了...
</a>
</body>
</html>
```
## first-child 伪类
> p:first-child 是`作为第一个儿子的p`,还是`p的第一个儿子`?
**这三个例子的区别?**
```html
<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>some text</p>
<p>some text</p>
</body>
</html>
```
```html
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight: bold;
}
</style>
</head>
<body>
<p>
some
<i>text</i>
. some
<i>text</i>
.
</p>
<p>
some
<i>text</i>
. some
<i>text</i>
.
</p>
</body>
</html>
```
```html
<html>
<head>
<style type="text/css">
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>
some
<i>text</i>
. some
<i>text</i>
.
</p>
<p>
some
<i>text</i>
. some
<i>text</i>
.
</p>
</body>
</html>
```
## 伪元素的语法：
`selector:pseudo-element {property:value;}`
## CSS 类也可以与伪元素配合使用：
`selector.class:pseudo-element {property:value;}`
## first-line 伪元素
> `first-line` 伪元素用于向文本的首行设置特殊样式。
```css
p:first-line {
color: #ff0000;
}
```
> `first-line` 伪元素只能用于块级元素。
> 下面的属性可应用于 "first-line" 伪元素：
- font 字体
- color 颜色
- background 背景
- word-spacing 字间距
- letter-spacing 单词间距
- text-decoration 文本修饰
- vertical-align 垂直对齐
- text-transform 字母大小写
- line-height 行高
- clear 清除浮动
## first-letter 伪元素
> `first-letter` 伪元素用于向文本的首字母设置特殊样式：
```css
p:first-letter {
color: #ff0000;
font-size: xx-large;
}
```
> `first-letter` 伪元素只能用于块级元素。
> 下面的属性可应用于 "first-letter" 伪元素：
- font 字体
- color 颜色
- background 背景
- margin 外边距
- padding 内边距
- border 边框
- text-decoration 文字修饰
- vertical-align 垂直对齐
- text-transform 文字大小写
- line-height 行高
- float 浮动
- clear 清除浮动
## 伪元素和 CSS 类
> 伪元素可以与 CSS 类配合使用：
```css
p.article:first-letter {
color: #ff0000;
}
```
## 多重伪元素
> 可以结合多个伪元素来使用。
```css
p:first-letter {
color: #ff0000;
font-size: xx-large;
}
p:first-line {
color: #0000ff;
}
```
## :before 伪元素
> `:before` 伪元素可以在元素的内容前面插入新内容。
在每个 <h1> 元素前面插入一幅图片：
```css
h1:before {
content: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544389178954&di=e794054d37b261335810303897df4b5b&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8b13632762d0f703fb8b190102fa513d2697c536.jpg);
}
```
## after 伪元素
> `:after` 伪元素可以在元素的内容之后插入新内容。
在每个 <h1> 元素后面插入一幅图片：
```css
h1:after {
content: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544389178954&di=e794054d37b261335810303897df4b5b&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8b13632762d0f703fb8b190102fa513d2697c536.jpg);
}
```
伪类的组合使用
```html
<html>
<head>
<style type="text/css">
h1:before {
content: "hello world";
}
h1:first-letter {
color: red;
}
</style>
</head>
<body>
<h1>I Love China && the Communist Party</h1>
</body>
</html>
```
## 优先级
继承（Inheritance）是从一个元素向其后代元素传递属性值所采用的机制。
确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的优先级。这个过程就称为层叠（cascade）。
```css
h1 {
color: red;
}
body h1 {
color: green;
}
h2.grape {
color: purple;
}
h2 {
color: silver;
}
html > body table tr[id="totals"] td ul > li {
color: maroon;
}
li#answer {
color: navy;
}
```
**特殊性值表述为 4 个部分，如：0，0，0，0。一个选择器的具体特殊性如下确定：**
对于选择器中给定的各个 ID 属性值，加 0，1，0，0。
对于选择器中给定的各个类属性值，属性选择或伪类，加 0，0，1，0。
对于选择器中给定的各个元素和伪元素，加 0，0，0，1。
结合符和通配符选择器对特殊性没有任何贡献
```css
h1 {
color: red;
} /* specifity = 0,0,0,1 */
p em {
color: purple;
} /* specifity = 0,0,0,2 */
.grape {
color: purple;
} /* specifity = 0,0,1,0 */
*.bright {
color: yellow;
} /* specifity = 0,0,1,0 */
p.bright em.dark {
color: maroon;
} /* specifity = 0,0,2,2 */
#id216 {
color: blue;
} /* specifity = 0,1,0,0 */
div#sidebar *[href] {
color: silver;
} /* specifity = 0,1,1,1 */
```
```css
h1 {
color: red;
} /* 0,0,0,1 */
body h1 {
color: green;
} /* 0,1,0,2 (winner)*/
h2.grape {
color: purple;
} /* 0,0,1,1 (winner)*/
h2 {
color: silver;
} /* 0,0,0,1 */
html > body table tr[id="totals"] td ul > li {
color: maroon;
} /* 0,0,1,7 */
li#answer {
color: navy;
} /* 0,1,0,1 (winner)*/
```
PPT 写到...
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div div div div div div div div div div div div a {
background: #000;
}
.baidu {
background: #f00;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<a
class="baidu"
href=""
>
百度一下
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
> 特殊性值 0,0,1,0 比值 0,0, 0,13 更高。
> 值是从左向右排序的。特殊性值 1,0, 0,0 大于以 0 开头的所有特殊性值，而不论后面的数是什么。
## 声明和特殊性
你是这么写的...
```css
h1 {
color: silver;
background: black;
}
```
浏览器是这么看的...
```css
h1 {
color: silver;
}
h1 {
background: black;
}
```
这两个规则的特殊性都是 0, 0 , 0 , 1,各声明得到的特殊性值也就是 0, 0 , 0 , 1。
```css
h1,
h2.section {
color: silver;
background: black;
}
```
用户代理将把它处理为：
```css
h1 {
color: silver;
} /* 0,0,0,1 */
h1 {
background: black;
} /* 0,0,0,1 */
h2.section {
color: silver;
} /* 0,0,1,1 */
h2.section {
background: black;
} /* 0,0,1,1 */
```
如果多个规则与同一个元素匹配，而且有些声明相互冲突，在这种情况下特殊性就很重要。
```css
h1 + p {
color: black;
font-style: italic;
} /* 0,0,0,2 */
p {
color: gray;
background: white;
font-style: normal;
} /* 0,0,0,1 */
*.aside {
color: black;
background: silver;
} /* 0,0,1,0 */
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
h1 + p {
color: black;
font-style: italic;
} /* 0,0,0,2 */
p {
color: blue;
background: white;
font-style: normal;
} /* 0,0,0,1 */
*.aside {
color: black;
background: yellow;
} /* 0,0,1,0 */
</style>
</head>
<body>
<h1>大家好啊!</h1>
<p class="aside">今天是个好日子</p>
<p>今天是个好日子, 心想的事儿都能成....</p>
<h1>干了这碗毒鸡汤</h1>
<p>当你觉得自己又丑又穷的时候，不要悲伤，至少你的判断是对的。</p>
<p class="aside">
你要是喜欢一个女生，从现在就开始好好学习，将来找好工作挣好多钱，等她结婚的时候多出点份子钱
</p>
</body>
</html>
```
## 通配选择器特殊性
前面提到过，通配选择器对一个选择器的特殊性没有贡献。
换句话说，其特殊性为 0,0,0,0
div 下包含的段落将是黑色，而其他元素都是灰色：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div p {
color: black;
} /* 0,0,0,2 */
* {
color: #ff0000;
} /* 0,0,0,0 */
</style>
</head>
<body>
<div><p>hello world</p></div>
hello world
</body>
</html>
```
如你所料，这意味着如果一个选择器中包含通配选择器和其他选择器，该选择器的特殊性不会因通配选择器的出现而改变。下面两个选择器的特殊性完全相同：
```css
div p /* 0,0,0,2 */
body * strong /* 0,0,0,2 */
```
## ID 和属性选择器的特殊性
需要着重指出，ID 选择器和指定 id 属性的属性选择器在特殊性上有所不同。
```css
html > body table tr[id="totals"] td ul > li {
color: maroon;
} /* 0,0,1,7 */
li#answer {
color: navy;
} /* 0,1,0,1 {winner}*/
```
第二个规则中的 ID 选择器（#answer）为选择器的总特殊性贡献了 0,1, 0,0。
而在第一个规则中，属性选择器（[id="totals"]）只对总特殊性贡献了 0,0,1,0。
因此，给定以下规则，id 为 meadow 的元素将变成绿色：
```css
#meadow {
color: green;
} /* 0,1,0,0 */
*[id:"meadow"] {
color: red;
} /* 0,0,1,0 */
```
## 内联样式特殊性
还没见过以 0 开头的特殊性...
第一个 0 是为内联样式声明保留的，它比所有其他声明的特殊性都高。考虑以下规则和标记片段：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#hello {
color: red;
}
</style>
</head>
<body>
<p id="hello" style="color:yellowgreen">hello world</p>
</body>
</html>
```
假设这个规则应用到 h1 元素，h1 的文本还将是绿色。
CSS2.1 中就是如此，这是因为每个内联声明的特殊性都是 1,0, 0,0。
## 重要性
有时某个声明可能非常重要，超过了所有其他声明。css 允许在这些声明的结束分号之前插入！important 来标志。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#hello {
color: red !important;
}
</style>
</head>
<body>
<p id="hello" style="color:yellowgreen">hello world</p>
</body>
</html>
```
如果你希望把两个声明都标志为重要，那么每个声明都需要它自己的!important 标志：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#hello {
color: red !important;
background: black !important;
}
</style>
</head>
<body>
<p id="hello" style="color:yellowgreen;background: grey;">
hello world
</p>
</body>
</html>
```
必须正确地放置`!important`,否则声明将无效。
`!important` 总是放在声明的最后，即分号前面。
如果一个属性的值可以包含多个关键词，如 font,这一点则尤其重要，必须将`!important` 标志放在声明的最后：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
p.light {
color: red;
font: smaller Times, serif !important;
}
</style>
</head>
<body>
<p class="light" id="hello" style="color:yellowgreen;background: grey;">
hello world
</p>
</body>
</html>
```
如果!important 放在 font 声明的任何其他位置，整个声明都将无效，相应地不会应用其任何样式。
标志为!important 的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
- 每日单词
- JavaScript 入门
- JavaScript 基础
- JavaScript 基础回顾
- JavaScript 函数
- 匿名函数,多维数组,数据类型转换
- JavaScript 类型转换, 变量作用域
- js 运算符(一)
- js 运算符(二)
- js 流程控制语句
- JavaScript 扫盲日
- JavaScript 牛刀小试(一)
- JavaScript 牛刀小试(二)
- JavaScript 再谈函数
- JavaScript-BOM
- JavaScript-定时器(一)
- JavaScript-定时器(二)
- 番外-轮播图源码
- JavaScript 轮播图和 DOM 简介
- JavaScript-DOM 基础-NODE 接口-属性
- JavaScript-DOM 基础-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 节点
- CSS 复习与扩展(一)
- CSS 复习与扩展(二)
- 走进 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高级
- jquery 备忘清单-1
- jquery 备忘清单-2
- 聊聊 json
- jquery 备忘清单-3