1.1 直接选择器

• .class
• #id
• *
• element
• element,element
• :root
• :not(selector)
• :empty

.class

• 类选择器

.test-Class {
    color: red;
}

<p class="test-Class">测试 .class 选择器</p>

#id

• id 选择器

#test-id {
    color: aqua;
}

<p id="test-id">测试 #id </p>

*

• 所有

* {
    background-color: azure;
}

element

• 单一元素

h1 {
    color: red;
}

<h1>测试 element </h1>

element,element

• 多元素

h1,h2,h3 {
    color: red;
}

<h1>测试 element,element </h1>
<h3>测试 element,element </h3>
<h5>测试 element,element </h5>

:root

• 根元素

:root {
    background-color: aliceblue;
}

:not(selector)

• 选择器取反

.test {
    color: orange;
}
:not(.test) {
    color: red;
}

<p>ppp</p>
<p class="test">ppp</p>

:empty

• 空元素

p:empty {
    background-color: red;
    height: 30px;
}

<p></p>