《CSS学习之路》002-CSS选择器

1,528 阅读1分钟

玩转 CSS 选择器, 我之前录制的免费课程, 用玩游戏的方式学习 CSS, 结合视频, 更容易理解

1585987549716

CSS 选择器的作用

  • 快速找到 CSS 元素, 为它添加样式
  • 给墙刷漆, 你得先找到墙, 不能连窗户一块刷了...

HTML 标签是树状结构

以此段代码为例, HTML 代码的结构是这个样子的...

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>this is h1</h1>
        <div>
            this is div
            <span>this is span</span>
        </div>
    </body>
</html>

html

CSS 选择器都有哪些?

CSS 选择器, 看起来复杂, 其实很简单, 以下是 CSS 选择器中, 用到的所有符号

# > . , * + ~ : { } ( ) [ ]

Type Selector

1585993381909

1585993381909

ID Selector

1585993412621

1585993381909

Child Selector

1585993461080

1585993381909

Descendant Selector

1585993512887

1585993381909

Combine Descendant & ID Selector

1585993565525

1585993381909

Class Selector

1585993603720

1585993381909

Combine the Class Selector

1585993640429

1585993381909

Comma Combinator Selector

1585993728650

1585993381909

Universal Selector

1585993757776

1585993381909

Combine Universal Selector

1585993814589

1585993381909

Adjacent Sibling Selector

1585993878130

1585993381909

General Sibling Selector

1585993926386

1585993381909

First Child Pseudo Selector

1585994024100

1585993381909

Only Child Pseudo Selector

1585994130843

1585993381909

Last Child Pseudo Selector

1585994186618

1585993381909

1585993381909

Nth Child Pseudo Selector

1585994273574

1585993381909

1585994361367

1585993381909

Nth Last Child Selector

1585994490330

1585993381909

1585994547561

1585993381909

First of Type Selector

1585994587423

1585993381909

Nth of Type Selector

1585994646682

1585993381909

1585994714120

1585993381909

Only of Type Selector

1585994821720

1585993381909

Last of Type Selector

1585994891768

1585993381909

1585994997619

1585993381909

1585995094562

1585993381909

1585993381909

Empty Selector

1585995145599

1585993381909

Negation Pseudo-class Selector

1585995216795

1585993381909

1585993381909

Attribute Selector

1585995278958

1585993381909

1585993381909

Attribute Value Selector

1585995332592

1585993381909

Attribute Starts Selector

1585995370960

Attribute Ends Selector

1585995395913

Attribute Wildcard Selector

1585995422160

1585993381909

快速跳转