CSS选择器

一、基础选择器

1. 通配符选择器

语法结构：*{css属性名：属性值;}
作用：找到页面中所有的标签，然后设置样式。
注意:

  • 开发中应用极少，只有在特殊的情况下才会使用。
  • 在页面中可能会用于去除页面中默认的margin和padding。
1
2
3
4
5
6
7
8
9
10
11
12
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div>
        通配符
    </div>
</body>

2. 标签选择器

语法结构：标签名{css属性名：属性值;}
作用：通过标签名，找到页面中所有的这类标签，并设置样式。
注意:

  • 标签选择器选择的是一类标签，而不是单独的一个。
  • 标签选择器无论嵌套关系有多深，都能够找到对应的标签。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    p {
        color: red;
    }
</style>
<body>
    <div>
        111
        <p>
            2222
            <div>
                333
                <p>444</p>
            </div>
        </p>
    </div>
</body>

3. 类选择器

语法结构：.类名{css属性名：属性值;}
作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。
注意:

  • 所有的标签上都有class属性，class属性的属性值成为类名。
  • 类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头。
  • 一个标签中可以同时有多个类名，类名之间用空格隔开。
  • 类名可以重复，一个类选择器可以同时选中多个标签。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .class-one {
        color: red;
    }
    .class-two {
        font-weight: bold;
    }
</style>
<body>
    <div class="class-one">
        111
        <div>
            <div class="class-one class-two">
                222
            </div>
        </div>
    </div>

</body>

4. id选择器

语法结构：#id属性值{css属性名：属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。
注意:

  • 所有的标签上都有id属性。
  • id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的。
  • 一个标签上只能有一个id属性值。
  • 一个id选择器只能选中一个标签。
1
2
3
4
5
6
7
8
9
10
11
<style>
    #id-one {
        color: red;
    }
</style>
<body>
    <div id="id-one">
        111
    </div>
</body>

二、复合选择器

1.交集选择器

语法结构：选择器1选择器2{css样式}
作用：选中页面中同时满足多个选择器的标签。
注意:

  • 多个选择器之间没有任何东西隔开，紧挨着的。
  • 交集选择器中如果有标签选择器，标签选择器必须放在前面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    div.class-one {
        color:red;
    }
    div#id-one {
        color:green;
    }
</style>
<body>
    <div class="class-one">
        111
    </div>
    <div id="id-one">
        222
    </div>
    <div>
        333
    </div>
</body>

2.并集选择器

语法结构：选择器1,选择器2{css样式}
作用：同时选择多组标签，设置相同的样式。
注意:

  • 选择器与选择器之间用   ,  (逗号) 隔开 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    p, div, .class-one {
        color: red;
    }
</style>
<body>
    <div class="class-one">
        111
    </div>
    <div>
        222
    </div>
    <p>
        333
    </p>
</body>

三、属性选择器

1.[属性]

作用：选中含有指定属性的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <style>
    [title] {
        color: red;
    }
</style>
<body>
    <div title="111">
        111
    </div>
    <div>
        222
    </div>
</body>

2.[属性=属性值]

作用：选中含有指定属性和指定属性值的元素。
注意:

  • 属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      <style>
        [title=aaa] {
            color: red;
        }
    </style>
    <body>
        <div title="aaa">
            aaa
        </div>
        <div title="bbb">
            bbb
        </div>
    </body>

3.[属性^=属性值]

作用：选中含有指定属性和指定属性值开头的元素。
注意:

  • 属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      <style>
        [title^=aaa] {
            color: red;
        }
    </style>
    <body>
        <div title="aaa-one">
            aaa
        </div>
        <div title="aa">
            bbb
        </div>
    </body>

4.[属性$=属性值]

作用：选中含有指定属性和指定属性值结尾的元素。
注意:

  • 属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
        [title$=aaa] {
            color: red;
        }
    </style>
    <body>
        <div title="aaa-one">
            aaa
        </div>
        <div title="bbb-aaa">
            bbb
        </div>
    </body>


5.[属性*=属性值]

作用：选中指定属性和含有指定属性值的元素。
注意:

  • 属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    [title*=a] {
        color: red;
    }
</style>
<body>
    <div title="aaa-one">
        aaa
    </div>
    <div title="bbb-aaa">
        bbb
    </div>
</body>

四、关系选择器

1.父亲>儿子

作用：选择某元素后面的第一代子元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .class-one > .class-two {
        color: red;
    }
</style>
<body>
    <div class="class-one">
        <div class="class-two">
            aaa
        </div>
        <div>
            <div class="class-two">
                bbb
            </div>
        </div>
    </div>
</body>

2.祖先 后代

作用：选择某元素后面的所有子元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .class-one .class-two {
        color: red;
    }
</style>
<body>
    <div class="class-one">
        <div class="class-two">
            aaa
        </div>
        <div>
            <div class="class-two">
                bbb
            </div>
        </div>
    </div>
</body>

3.兄+弟

作用：可选择紧接在另一元素后的元素，且二者有相同父元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    .class-one+.class-two {
        color: red;
    }
</style>
<body>
    <div class="class-one">
       aaa
    </div>
    <div class="class-two">
        bbb
    </div>
</body>

4.兄~弟

作用：选取某个元素之后的所有相同元素。
注意:

  • 比如.class-one ~ h2 这句就是选取 .class-one后面所有的 h2。
  • 这个选择器两种元素必须处于同一个父元素内，被选取的元素不必直接紧随。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .class-one ~ .class-two {
        color: red;
    }
</style>
<body>
    <div class="class-one">
       aaa
    </div>
    <div>
        <div class="class-two">
            bbb
        </div>
    </div>
    <div class="class-two">
        ccc
    </div>
</body>

五、伪类选择器

六、伪元素选择器

伪元素介绍

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。

1. ::before和::after

::before 伪元素可以用来创建一个内部元素，它的内容会覆盖在父元素的内容之前。
::after 伪元素可以用来创建一个外部元素，它的内容会覆盖在父元素的内容之后。
注意:

  • content是必须的，如果不写content，伪元素会失效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  div::before {
    content: '哈哈，';
    color: red
  }
  div::after {
    content: '，您好！';
    color: green
  }

</style>
  <div>杨杨吖</div>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  div {
    position: relative;
    width: 200px;
    height: 35px;
    line-height:35px;
  }
  div::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
    transition: all 0.3s;
  }
  div:hover::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(225deg);
    transition: all 0.3s;
  }

</style>
  <div>杨杨吖</div>
</html>

2. ::first-line和::first-letter

  • ::first-line 只能用于块级元素。用于设置附属元素的第一个行内容的样式。
  • ::first-letter 只能用于块级元素。用于设置附属元素的第一个字母的样式。
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  div::first-line {
    color: green;
  }

</style>
  <div>杨杨吖<br/>杨杨吖</div>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  div::first-letter {
    color: green;
  }

</style>
  <div>杨杨吖<br/>杨杨吖</div>
</html>

3. ::selection

  • ::selection 匹配鼠标长按拖动选中的内容。

4. ::placeholder

  • ::placeholder 用于设置input元素的placeholder内容的样式。
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>

  input::placeholder {
    color: red;
  }

</style>
  <input placeholder="请输入"/>
</html>