CSS 选择器

CSS 选择器

如果要在 HTML 中为元素设置 CSS 样式，需要通过 CSS 选择器选择对应的样式，简单来说 CSS 选择器有三种：id 选择器、class 选择器、标签选择器，直接在标签内部写 CSS 就不算选择器了。

这里简单了解一下 CSS 的选择器语法，和尝试一下之前有疑问的地方。

id 选择器

id 选择器，顾名思义，真的是选择器，先看例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Qyc</title> 
<style>
#sky {
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p id="sky">天选！</p>
<p>没有被选上。</p>
</body>
    
</html>

其中，通过 id 选择器，为 id = "sky" 的 p 元素添加了样式。

#S {...} 是 id 选择器的使用方式，使用 # 标识 Selector，为选择的 id 的标签添加样式，也只能作用于对应 id 的标签上，使用场景较少。

class 选择器

第二种选择器，class 选择器才是 CSS 的正确打开方式，看例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Qyc</title> 
<style>
.center {
    text-align:center;
}
.color {
    color:#ff0000;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色</p> 
</body>

</html>

其中，h1 标签应用了 center 样式居中，p 标签应用了 center 和 color 样式居中和设置颜色为红色。

.S {} 是 class 选择器的使用方式，使用 . 标识 Selector。class 选择器，顾名思义，比较像一个类，类中设置了具体的样式，标签可以通过设置 class 属性去应用这些样式。从这个角度看，class 选择器并不是样式选择标签，而是标签选择不同的 class 样式使用。

标签也可以设置多个 class 属性，如例子中的 p 标签，此时多种样式会一起生效。至于出现冲突的情况，等下再讨论。

class 选择器还可以缩小使用范围，指定某个标签选择它时才有效，如：

<style>
p.center {
    text-align:center;
}
.color {
    color:#ff0000;
}
</style>

这种语法看起来才顺眼，意思非常明显：center 是属于 p 标签的，只有 p 标签设置 center 时才会生效，而其他标签不会。

标签选择器

标签选择器就更好理解了，直接指定某标签的具体样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Qyc</title> 
<style>
h1 {
    text-align:center;
    color:#88e46d;
}
p {
    text-align:center;
    color:#6b56e6;
}
</style>
</head>

<body>
<h1>标题居中，颜色为绿色</h1>
<p>段落居中，颜色为紫色</p> 
</body>

</html>

简单粗暴，可能大伙第一次看 CSS 都是看的这种吧。

这三种选择器的优先级为：id > class > 标签，当然，直接在标签里写样式的优先级还是最高的，即内联样式。

使用多个类且有冲突

回到之前说的问题，当使用多个 class 时，这些 class 内部的样式有冲突，那以哪个为准呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Qyc</title> 
<style>
.qy{
    text-align:center;
    /*绿色*/
    color:#88e46d;
}
.qy-lz {
    text-align:center;
    /*紫色*/
    color:#6b56e6;
    background-color: #88e46d;
}
</style>
</head>

<body>
<h1 class="qy">标题居中，颜色为绿色</h1>
<p class="qy qy-lz">段落居中，颜色为？</p> 
</body>

</html>

这个例子中的 p 标签的字体颜色是 qy-lz 样式设置的紫色。为什么呢？这时很容易下意识的认为，在 class 属性设置时，qy-lz 在后面，后面的会覆盖前面的。

但其实并不是这样，class 样式的优先级与指定顺序无关，而是和 class 的定义顺序有关。此处 p 标签显示紫色的原因是，qy-lz 在 qy 之后定义，仅此而已，即使换成

<p class="qy-lz qy">段落居中，颜色为？</p>

效果也是一样的。因此，在定义 CSS 样式时，要把基础的定义在前面，这样以后有额外需求，可以覆盖之前的样式。

总结

简单了解了一下 CSS 选择器，顺便解决了之前的疑惑。

除了以上说的三种选择器外，CSS 还有组合选择符：

  • 后代选择器(以空格 分隔)
  • 子元素选择器(以大于 > 号分隔）
  • 相邻兄弟选择器（以加号 + 分隔）
  • 普通兄弟选择器（以波浪号 ～ 分隔）

不过还不到深入研究这些的时候呢。

posted @ 2022-07-20 20:17  Qirror  阅读(39)  评论(0)    收藏  举报
Live2D