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

一. 选择器

1. 标签选择器

选择器例子描述
elementp/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,elementdiv, 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.classul 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>elementul > 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. 伪类选择器

选择器例子描述
:activea:active选择活动链接。
:checkedinput:checked选择每个被选中的 input 元素。
:defaultinput:default选择默认的 input 元素。
:disabledinput:disabled选择每个被禁用的 input 元素。
:emptyp:empty选择没有子元素的每个 p 元素（包括文本节点）。
:enabledinput:enabled选择每个启用的 input 元素。
:first-childp:first-child选择属于父元素的第一个子元素的每个 p 元素。
:focusinput:focus选择获得焦点的 input 元素。
:fullscreen:fullscreen选择处于全屏模式的元素。
:hovera:hover选择鼠标指针位于其上的链接。
:in-rangeinput:in-range选择其值在指定范围内的 input 元素。
:indeterminateinput:indeterminate选择处于不确定状态的 input 元素。
:invalidinput:invalid选择具有无效值的所有 input 元素。
:lang(language)p:lang(it)选择 lang 属性等于 “it”（意大利）的每个 p 元素。
:last-childp:last-child选择属于其父元素最后一个子元素每个 p 元素。
:visiteda:visited选择所有已访问的链接。
:first-of-typep:first-of-type选择属于其父元素的首个 p 元素的每个 p 元素。

8. 伪对象选择器

选择器例子描述
::afterp::after在每个 p 的内容之后插入内容。
::beforep::before在每个 p 的内容之前插入内容。
::first-letterp::first-letter选择每个 p 元素的首字母。
::first-linep::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;}