HTML元素神器！元素选择器 VS 类选择器 VS ID选择器，谁更强大？

元素选择器（Element Selector）

选元素这招真有那么神奇，它可以根据HTML元素的标签名字来设置样式！举个例子，要是你想让所有段落都焕然一新，那就试试这么做吧：

css

p {
    color: red;
    font-size: 16px;
}

这样一来，所有的段落元素都会变成红色字体，大小为16像素。

p {
  color: blue;
}

类选择器（Class Selector）

给元素添上class属性，在css文件中添加相应的分组式样式，就能轻轻松松把许多项目都统一风格咯！这种做法不仅节省宝贵的代码空间，也能方便我们批量完成相同设计效果。来瞧瞧下面这段话吧：

.text-red {

然后在HTML中使用：

“`html

.button {
  background-color: red;
}

这是红色字体

Click me

<span class=”text-red”>这也是红色字体</span>

这样就可以让不同类型的元素都应用了相同的红色字体样式。

ID选择器（ID Selector）

给 HTML 元素上选个”id”属性，然后用”#”号在 CSS 中找到它，这就是所谓的 ID 选择器了！其实，就是给某一个元素自己定一套独特的风格。比如说下面这个例子：

#unique-element {

font-weight: bold;

#header {
  background-color: yellow;
}

在HTML中使用方式如下：

<div id=”unique-element”>这个文本会加粗显示</div>

This is the header

子元素选择器（Child Selector）

诶你听说过子元素选择器吗？用“>”就ok~这玩意儿能选中包裹在其他元素里的小元素们！比如，想让div下边的第一个p变亮些，就直接这么写吧：

div > p {

background-color: yellow;

这行代码可以让div下面的所有p标签的背景色都变成黄色。

后代选择器（Descendant Selector）

p > span {
  color: red;
}

后代选择器能用空格选中所有子元素！比如想给ul列表里面的每个li都加个样式的话，就直接这么做吧：

ul li {

This is a red text.

list-style-type: circle;

这段代码会将ul列表内部所有li标签变成实心圆点列表。

叫上亲戚的小技巧儿

亲们！相邻兄弟选器其实就是用那个“+”号，就跟我们玩捉迷藏似的，要是找不到，回头找找看呗！给大家举个栗子嘛：

h2 + p {

font-style: italic;

p span {
  background-color: gray;
}

以上代码会将紧跟在h2标题后面的p标签文字设置为斜体显示。

通用选择器（Universal Selector）

This is a gray text.

通用选取很简单，用这个单个小星星（*）就能搞定！它可以帮你选中HTML文件中的全部元素。快来瞧瞧我是怎么做到的~

*{

margin:0;

padding:0;

上述代码将页面中所有元素的外边距和内边距都设为0。

说白了，CSS选择器就像各种不同的工具，各有各的用处和特点。学会熟练运用，掌握如何搭配使用，就能让网页设计变得更加顺畅自如，减小工作量~

h2 + p {
  color: blue;
}

CSS选择器真的很重要，尤其是在搞实战项目的时候。会玩儿好它，页面就能美美哒，还能省事儿提效率。

别忘了，写CSS样式表还要熟悉各种常见选择器，再会灵活用好组合和嵌套选择器才行，这样我们就能写出更加贴合实际需求的样式了！

Heading 2
This paragraph is immediately following the h2 element.