十个常用的 CSS Selector

#01 ID Selector

格式：#id值
用于选取拥有 id 这个属性，并且 id 属性值相等的 HTML 元素，例：

<div id="the-id">Hello World</div>
<div>Hello World</div>

#the-id {
   
  font-size: 24px;
  background-color: yellow;
  padding: 8px; 
}

id 在整个 HTML 页面内必须是唯一的，一个 id 只能用在一个 HTML 元素上，而一个 HTML 元素也只能有一个 id

#02 Class Selector

格式：.class值
用于选取拥有 class 这个属性，并且 class 属性值相等的 HTML 元素，例：

<div class="the-class blue">Hello World</div>
<div class="blue">Hello World</div>

.the-class {
   
  font-family: Helvetica;
  font-size: 24px;
  color: yellow;
}
.blue {
   
  background-color: blue;
}

一个 class 可以套用到多个 HTML 元素上，而一个 HTML 元素也可以拥有多个 class

#03 Tag Selector

格式：Tag名（直接使用 Tag 名）
用于选取 Tag 名相同的 HTML 元素，例：

<h1 class="container">Hello World</h1>
<div class="container">Hello World</div>

h1 {
   
  color: blue;
}
div.container {
   
  background-color: yellow;
}

#04 空格

格式：selectorA sele