文章目录
- [一. 选择器](#一. 选择器)
-
- [1. 标签选择器](#1. 标签选择器)
- [2. 类选择器](#2. 类选择器)
- [3. ID选择器](#3. ID选择器)
- [4. 分组选择器](#4. 分组选择器)
- [5. 派生与子元素选择器](#5. 派生与子元素选择器)
- [6. 属性选择器](#6. 属性选择器)
- [7. 伪类选择器](#7. 伪类选择器)
- [8. 伪对象选择器](#8. 伪对象选择器)
- [9. 选择器的优先级别](#9. 选择器的优先级别)
-
- [css优先级 的 6大分类](#css优先级 的 6大分类)
一. 选择器
1. 标签选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| element | p/div/span | 选择所有含有指定标签的元素 |
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
}
span {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<div>Hello</div>
<span>World</span>
<p>你好</p>
</body>
</html>2. 类选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| .class | .info | 选择 class="info" 的所有元素 |
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.info{
color: pink;
}
</style>
</head>
<body>
<div class="info">Hello</div>
<div class="a">World</div>
<div class="b">你好</div>
</body>
</html>3. ID选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| #id | #Oh | 选择 id="Oh" 的元素 |
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#Oh{
color: red;
}
</style>
</head>
<body>
<div class="info" id="o1">Hello</div>
<div class="a" id="Oh">World</div>
<div class="b" id="o2">你好</div>
</body>
</html>4. 分组选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| element,element | div, p | 选择所有div元素和所有p元素 |
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,p {
color: red;
}
</style>
</head>
<body>
<div class="info" id="o1">Hello</div>
<p class="a" id="Oh">World</p>
<span class="b" id="o2">你好</span>
</body>
</html>5. 派生与子元素选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| element element.class | ul li.name | 选择所有具备当前祖辈容器为li,且li的祖辈容器必须为ul,且需要引入name类 |
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li.name {
color: red;
}
</style>
</head>
<body>
<ul>
<li>Hello</li>
<li>World</li>
<li class="name">你好</li>
</ul>
</body>
</html>| 选择器 | 例子 | 描述 |
|---|---|---|
| element>element | ul > li | 选择父元素是 ul 的所有 li 元素 |
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul > li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>Hello</li>
<ol>
<li>World</li>
</ol>
<li class="name">你好</li>
</ul>
</body>
</html>6. 属性选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性的所有元素 |
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[target] {
color: red;
}
</style>
</head>
<body>
<ul>
<li>Hello</li>
<ol>
<li target="世界">World</li>
</ol>
<li class="name">你好</li>
</ul>
</body>
</html>7. 伪类选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| :active | a:active | 选择活动链接。 |
| :checked | input:checked | 选择每个被选中的 input 元素。 |
| :default | input:default | 选择默认的 input 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 input 元素。 |
| :empty | p:empty | 选择没有子元素的每个 p 元素（包括文本节点）。 |
| :enabled | input:enabled | 选择每个启用的 input 元素。 |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 p 元素。 |
| :focus | input:focus | 选择获得焦点的 input 元素。 |
| :fullscreen | :fullscreen | 选择处于全屏模式的元素。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
| :in-range | input:in-range | 选择其值在指定范围内的 input 元素。 |
| :indeterminate | input:indeterminate | 选择处于不确定状态的 input 元素。 |
| :invalid | input:invalid | 选择具有无效值的所有 input 元素。 |
| :lang(language) | p:lang(it) | 选择 lang 属性等于 "it"（意大利）的每个 p 元素。 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 p 元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 p 元素的每个 p 元素。 |
8. 伪对象选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| ::after | p::after | 在每个p的内容之后插入内容。 |
| ::before | p::before | 在每个 p 的内容之前插入内容。 |
| ::first-letter | p::first-letter | 选择每个 p 元素的首字母。 |
| ::first-line | p::first-line | 选择每个 p 元素的首行。 |
9. 选择器的优先级别
行内样式（style="..."）>ID 选择器(#box{...})>类选择器(.con{...})>标签选择器(dic{...})>通用选择器(*{...})
css优先级 的 6大分类
通常可以将css的优先级由高到低分为6组：
-
第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
-
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
-
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
-
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
-
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
-
第六优先级：通配选择器，如*{marigin:6px;}