css基础学习总结(选择器篇)

一. 选择器

1. 标签选择器

选择器 例子 描述
element p/div/span 选择所有含有指定标签的元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <!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” 的所有元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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” 的元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <!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 元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <!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 类 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <!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 元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <!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 属性的所有元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <!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 组：

  1. 第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6 不支持该属性。
  2. 第二优先级：在 html 中给元素标签加 style，即内联样式。该方法会造成 css 难以管理，所以不推荐使用。
  3. 第三优先级：由一个或多个 id 选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
  4. 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖 div{margin:6px;}
  5. 第五优先级：由一个或多个类型选择器定义。如 div{marigin:6px;}覆盖*{margin:10px；}
  6. 第六优先级：通配选择器，如*{marigin:6px;}