CSS中的各种选择器及优先级

最新推荐文章于 2026-04-12 20:04:03 发布

原创最新推荐文章于 2026-04-12 20:04:03 发布 · 766 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

HTML

本文深入讲解了CSS中的各种选择器，包括派生选择器、id选择器、类选择器、属性选择器及其优先级，帮助读者理解如何精确控制网页样式。

css中的各种选择器

1.派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式

<style>
  div p span{
    color:blue;
  }
</style>

<div>
  <p>我是<span>行内元素</span></p>
</div>

2.id选择器

id选择器可以为标有特定 id 的HTML元素指定样式，id是一般是独有的，
这一点在你设置 id 的时候一定要注意
id 选择器可以以"#"来定义

<style>
#div1 {
  color: red;
}

#p1 {
  color:black;
}

#p1 span {
  color:pink;
}
</style>

<div id="div1">
  我是div1
  <p id="p1">我是<span id="span1">行内元素</span></p>
</div>

3.类选择器

在HTML中，总会出现多个的一类标签，而对一类标签的样式往往是一样的，
这种时候用id显然是不合适的，类选择器就是为这种时候而出的。
类选择器以一个"."来定义

<style>
.div {
  color:#000000;
}

.p {
  color:#118888;
}

.span {
  color:#881122;
}
</style>

<div id="div1" class="div">
  我是div1
  <p id="p1" class="p">我是<span id="span1" class="span">行内元素</span></p>
</div>

4.属性选择器

对带有指定属性的 HTML 元素设置样式

<style>
.div {
  color:red;
}

[title] {
  color: blue;
}
</style>

<div id="div1" class="div">
  我是div1
</div>

<div class="div" title="">
  我是div2,我不想要div的样式
</div>

<div class="div">
  我是div3,我想要div的样式
</div>

5.选择器优先级

1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover,li:nth-child）

标签

#HTML #CSS