css 各类选择器 - 维洛BLOG

元素名称

页面上的所有

元素都将居中对齐，并带有红色文本颜色：

<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
p {
  text-align: center;
  color: red;
}

2022-12-15T14:19:47.png

id 属性

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
注意：id 名称不能以数字开头。

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
#para1 {
  text-align: center;
  color: red;
}

2022-12-15T14:21:16.png

class 属性

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
注意：类名不能以数字开头！

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 
.center {
  text-align: center;
  color: red;
}

2022-12-15T14:23:16.png

通用选择器（*）

选择页面上的所有的 HTML 元素。
下面的 CSS 规则会影响页面上的每个 HTML 元素：

<h1>Hello world!</h1>

<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
* {
  text-align: center;
  color: blue;
}

2022-12-15T14:26:11.png

分组选择器

h1、h2 和 p 元素具有相同的样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

最好对选择器进行分组，以最大程度地缩减代码。
如需对选择器进行分组，请用逗号来分隔每个选择器。

<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p>

</body>

2022-12-15T14:28:07.png

2022-12-15T14:33:24.png

后代选择器

选择div中的p，div外的p不选择

<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>

<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>

</body>

2022-12-15T14:35:27.png

子选择器

只选择div里的p，不选择在div里另一元素中的p

<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
  <p>div 中的段落 4。</p>
</div>

<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>

</body>

2022-12-15T14:38:21.png