3. CSS选择器

h1 {
    color: blue;
}

<h2>Read</h2>
<h2>Green</h2>
<h2>Blue</h2>

h2 {
    color: red;
}

• Class Sector

.red-heading {
    color: red;
}

<h2 class="red-text">Red</h2>
<h2>Green</h2>
<h2>Blue</h2>

.red-text {
    color: red;
}

<h2 class="red-text"> Heading 2 </h2>
<h3>Heading 3</h3>
<p class="red-text">Paragraph</p>

.red-text {
    color: red;
}

• ID Selector
  • Class Selector可以作用在多个元素上
  • ID selector仅仅可以作用在一个元素上

<h2 id = "main"> Red </h2>
<h2>Green</h2>
<h2>Blue</h2>

#main {
    color: red;
}

• Attribute Selector

<p draggable="true">Drag me</p>
<p draggable="false">Don't Drag me</p>
<p draggable="false">Don't Drag me</p>

p[draggable="false"] {
    color: red;
}

• Universal Selector

<h1 class="title">Hello</h1>
<h2 id="heading">World</h2>

<p draggable="true">This is a website</p>

* {
    color: red;
}

• 练习