优雅哥

CSS3学习笔记-02-选择器

6/3/2020 CSS3选择器

# 文章目录

有关 CSS 的优先级可以取看我的上一篇文章，两分钟掌握 CSS 优先级及引入方式！ (opens new window)

# 一、全局选择器

*全局选择器：

<style>
  * {
    color: red;
  }
</style>

<body>
  <div>content</div>
  <p>全局选择器</p>
</body>
1
2
3
4
5
6
7
8
9
10

效果：
在这里插入图片描述

# 二、标签选择器

多个标签名用逗号分隔，表示并列的关系。

<style>
  h1,
  h2,
  h3,
  p {
    font-size: 16px;
  }
</style>
1
2
3
4
5
6
7
8

效果：
在这里插入图片描述

# 三、结构选择器

# 3.1 后代选择器(华夏子孙 向下无限选择)

<style>
  marn article h2 {
    color: red;
  }
</style>
<body>
  <main>
    <article>
      <h1>Are</h1>
      <aside>
        <h2>content</h2>
      </aside>
      <h2>AreAre</h2>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果:

在这里插入图片描述

# 3.2 > 儿子选择器 只往下选择一层

<style>
  main article > h2 {
    color: red;
  }
</style>
<body>
  <main>
    <article>
      <h1>Are</h1>
      <aside>
        <h2>content</h2>
      </aside>
      <h2>AreAre</h2>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果:
在这里插入图片描述

# 3.3 ~ 兄弟选择器

这里需要注意只选择当前元素后边的。

<style>
  article h1 ~ h2 {
    color: green;
  }
</style>
<body>
  <main>
    <article>
      <h2>大哥</h2>
      <h1>Are</h1>
      <h2>兄弟1</h2>
      <aside>
        <h2>content</h2>
      </aside>
      <h2>兄弟2</h2>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果:
在这里插入图片描述

# 3.4 + 铁兄弟(紧挨着的)

注意：这里只选择后边的第一个

<style>
  article h1 + h2 {
    color: green;
  }
</style>
<body>
  <main>
    <article>
      <h2>大哥</h2>
      <h1>Are</h1>
      <h2>兄弟1</h2>
      <aside>
        <h2>content</h2>
      </aside>
      <h2>兄弟2</h2>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果：
在这里插入图片描述

# 四、[] 属性选择器

如果有多个属性，也就是多个[][]那么表达的意思是：
且的关系

<style>
  input[type="text"] {
    color: red;
  }
</style>
<body>
  <main>
    <article>
      <input type="text" value="Are" />
      <aside>
        <h2>content</h2>
      </aside>
      <input type="button" value="提交" />
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果：
在这里插入图片描述
我们还可以扩展开来写，例如：

<style>
  input[type="text"][class] {
    color: red;
  }
</style>
<body>
  <main>
    <article>
      <input type="text" value="Are" class="text" />
      <input type="text" value="Are" />
      <aside>
        <h2>content</h2>
      </aside>
      <input type="button" value="提交" />
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

解读：选择input标签type属性等于text且有class属性的标签。
效果：
在这里插入图片描述

# 4.1 ^ 以什么开始 $以什么结束

^ 符号规定属性以什么开头
& 符号规定属性以什么结尾

<style>
  input[class^="text"] {
    color: blue;
  }
  input[class$="tent"] {
    background-color: red;
  }
</style>
<body>
  <main>
    <article>
      <input type="text" value="Are" class="text" />
      <input type="text" value="Are" class="textContent" />
      <aside>
        <h2>content</h2>
      </aside>
      <input type="button" value="提交" />
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果：
在这里插入图片描述

# 4.3 ~ 属性里边有这个值

<style>
  input[class~="Con"] {
    color: red;
  }
</style>
<body>
  <main>
    <article>
      <input type="text" value="Are" class="text Con" />
      <input type="text" value="Are" class="textContent Content" />
      <aside>
        <h2>content</h2>
      </aside>
      <input type="button" value="提交" />
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果：
在这里插入图片描述

# 4.4 * 属性里边有这个字符串

<style>
  input[class*="Con"] {
    color: red;
  }
</style>

<body>
  <main>
    <article>
      <input type="text" value="Are" class="text" />
      <input type="text" value="Are" class="textContent" />
      <aside>
        <h2>content</h2>
      </aside>
      <input type="button" value="提交" />
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

该选择器表达的意思是：
input 标签的 class 里边只要出现了Con这个字符串，就把文字设置为红色
效果：
在这里插入图片描述

# 4.5 | 以什么开始 可以跟-符号 也可以选中

<style>
  input[class|="Con"] {
    color: red;
  }
</style>
<body>
  <main>
    <article>
      <input type="text" value="Are" class="Con" />
      <input type="text" value="Are2" class="Con-tent" />
      <input type="text" value="Are3" class="Con.tent" />
      <input type="text" value="Are4" class="Content" />
      <aside>
        <h2>content</h2>
      </aside>
      <input type="button" value="提交" />
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果：
在这里插入图片描述

# 五、伪类选择器

# 5.1 常见伪类列表

  1.     a:link 超链接默认样式

  2.     a:hover 鼠标经过超链接

  3.     a:active 鼠标点击

  4.     a:visited 点击过后

  5.     input:focus 获得焦点

  6.     :target 选择器可用于选取当前活动的目标元素
    实例：W3School :target 选择器 (opens new window)
  7.     :root 选择器用匹配文档的根元素。
    注：在 HTML 中根元素始终是 HTML 元素。
  8.     :empty选择器选择每个**没有**任何**子级或文本节点**的元素。
    实例：菜鸟教程 :empty 选择器 (opens new window)
<body>
  <a href="https://www.baidu.com">百度</a>
</body>
<style>
  /* 默认样式 */
  a:link {
    color: red;
  }
  /* 鼠标经过 */
  a:hover {
    color: teal;
  }
  /* 点击发生的时候 */
  a:active {
    color: black;
  }
  /* 点击之后的 */
  a:visited {
    color: yellow;
  }

  /* 获取焦点 */
  input:focus {
    background-color: red;
  }
  /* 鼠标经过 */
  input:hover {
    background-color: teal;
  }
  /* 点击发生的时候 */
  input:active {
    background-color: black;
  }
</style>
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

# 5.2 :target 选择器可用于选取当前活动的目标元素

实例：菜鸟教程 :target (opens new window)

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。

效果：
锚点链接实例
在这里插入图片描述

# 5.3 :empty 隐藏空的元素

:empty 选择器选择每个没有任何子级的元素（包括文本节点）。

<body>
  <li>列表1</li>
  <li></li>
  <li>列表3</li>
</body>
<style>
  /*所有为空的子元素设置为隐藏
    :empty {
        display: none;
    }*/

  /*对li标签为空的元素*/
  li:empty {
    display: none;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果：
在这里插入图片描述

# 六、结构伪类选择器

# 6.1 :firsrt-child 选择器匹配其父元素中的第一个子元素。

<style>
  article > :first-child {
    color: red;
  }

  article :first-child {
    background-color: teal;
  }

  article h1:first-child {
    border: 4px solid black;
  }
</style>
<body>
  <main>
    <article>
      <h1>Are</h1>
      <h1>Are</h1>
      <aside>
        <h1>aside_h1</h1>
        <h2>content</h2>
      </aside>
      <div>
        <a href="">超链接</a>
      </div>
      <h2>AreAre</h2>
    </article>
  </main>
</body>
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

效果：
在这里插入图片描述

# 6.2 :first-of-type 匹配其父元素下特定类型的第一个子元素。

<style>
  article h1:first-of-type {
    background-color: teal;
  }
</style>
<body>
  <main>
    <article>
      <h1>Are</h1>
      <h1>Are</h1>
      <aside>
        <h2>content</h2>
      </aside>
      <h2>AreAre</h2>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果：
在这里插入图片描述

# 6.3 :last-child :last-of-child 用法类似

# 6.4 :only-child 选择唯一的子元素

<style>
  article :only-child {
    color: red;
  }
</style>
<body>
  <main>
    <article>
      <h1>1</h1>
      <p>2</p>
      <aside>
        <h1>3</h1>
      </aside>
      <div>
        <p>4</p>
        <p>5</p>
      </div>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

解读：选择 article 里边有子元素并且只有一个子元素的标签。

效果：
在这里插入图片描述

# 6.5 :only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

指定属于父元素的特定类型的唯一子元素

<style>
  article > h1:only-of-type {
    color: red;
  }
</style>
<body>
  <main>
    <article>
      <h1>1</h1>
      <p>2</p>
      <aside>
        <h1>3</h1>
      </aside>
      <div>
        <p>4</p>
        <p>5</p>
      </div>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

# 七、根据元素编号灵活选择

# 7.1 :nth-child() 根据元素编号灵活选择

<style>
    article :nth-child(1){
        color: red;
    }
    article>:nth-child(1){
        background-color: teal;
    }
</style>
</head>
<body>
    <main>
        <article>
            <h1>1</h1>
            <p>2</p>
            <aside>
                <h1>3</h1>
            </aside>
            <div>
                <p>4</p>
                <p>5</p>
            </div>
        </article>
    </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果：
在这里插入图片描述

# 7.2 :nth-child(n) 选择父元素下的所有元素

这里的 n 代表的是从 0 到无穷大
此外：even 也代表的是偶数行

<style>
  article :nth-child(n) {
    background-color: teal;
  }
</style>
<body>
  <main>
    <article>
      <h1>1</h1>
      <p>2</p>
      <aside>
        <h1>3</h1>
      </aside>
      <div>
        <p>4</p>
        <p>5</p>
      </div>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果：
在这里插入图片描述

# 7.3 :nth-child(2n) 偶数行变色

<style>
  ul :nth-child(2n) {
    background-color: teal;
  }
</style>
<body>
  <main>
    <article>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </article>
  </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

# 7.4 :nth-child(2n-1) 基数行变色

此外：odd 也代表的是基数行

# 7.5 :nth-child(-n+4) 选取指定的前几个

解读：这里+的是几，就是选择前几个

<style>
  ul :nth-child(-n + 4) {
    background-color: teal;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：
在这里插入图片描述

# 7.6 :nth:child(n+4) 从第几个开始

要从第几个开始取，这里的是就改成几

<style>
  ul :nth-child(n + 4) {
    background-color: teal;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：
在这里插入图片描述

# 7.7 h1:nth-of-type() 找出父元素下指定类型的第几个元素

<style>
  article h1:nth-of-type(2) {
    color: red;
  }
</style>
<body>
  <article>
    <h1>Are</h1>
    <aside>
      <h2>content</h2>
    </aside>
    <h1>new</h1>
  </article>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果:
在这里插入图片描述

# 7.8 :nth-last-child() 从后面开始取

实例：取后两个

<style>
  ul li:nth-last-child(-n + 2) {
    color: red;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：
在这里插入图片描述

# 7.9 :nth-last-of-type() 按指定类型，从后开始取

# 7.10 排除掉某些个 (支持无限套娃 S)

<style>
  ul li:nth-of-type(-n + 4):not(:nth-of-type(2)) {
    background-color: teal;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：
在这里插入图片描述

# 八、文本伪类操作

# 8.1 ::first-letter 首个文字

# 8.2 ::first-line 首行

p::first-letter {
  color: red;
}
p::first-line {
  color: teal;
}
1
2
3
4
5
6

效果：
在这里插入图片描述

最后更新于: 2021年9月15日星期三晚上10点10分
Dawn
DDRKirby(ISQ)