组合使用css选择器

最新推荐文章于 2025-06-13 09:21:43 发布

转载最新推荐文章于 2025-06-13 09:21:43 发布 · 472 阅读

本文详细介绍了CSS中组合选择器的使用方法，包括.classA.classB这类选择器的应用，以及如何通过组合选择器精确地定位到同时具有多个类名的元素。同时也探讨了ID选择器与类选择器结合使用的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组合使用css选择器（参考地址：https://www.cnblogs.com/starof/p/4453458.html）

今天看到有网站使用.classA.classB类似的选择器，不知道是否有人和我一样没有用过，所以了解一下，以下记录。

一、用法介绍

在css中.classA.classB指的是一个元素，同时满足classA和classB，即(class="classA classB")

复制代码

<style>
.classA.classB{
  border:1px solid red;
}
.classa .classb{
  border:1px solid blue;
}
</style>
------------------------------------------------
<body>
<input type="text" class="classA classB" value="选择器为.classA.classB"/>
<div class="classa">
  <input class="classb" type="text" value="选择器为.classa .classb" />
</div>
</body>

复制代码

id选择器也是类似的：

复制代码

<style>
#id.class{
  width:150px;
  height:50px;
  background-color: red;
}
#id .class{
  width:150px;
  height:50px;
  background-color: green;
}
</style>
--------------------------------------------------------
<body>
<div id="id" class="class">选择器#id.class</div>
<br/>
<div id="id">
<div class="class">
选择器#id .class
</div>
</div>
</body>

复制代码