Question

下面的例子应该理解我的问题。

<div id="bmw" class="car">
  <div class="seats">4</div>
  <div class="fuel">petrol</div>
</div>
<div id="merc" class="car">
  <div class="seats">2</div>
  <div class="fuel">petrol</div>
</div>

使用css可以选择seats元素的bmw元素。我不想在bmw

的子元素中添加额外的类标记

以及如何选择所有汽车类元素的座位

<div id="bmw" class="car">
  <div class="seats">4</div>
  <div class="fuel">petrol</div>
</div>
<div id="merc" class="car">
  <div class="seats">2</div>
  <div class="fuel">petrol</div>
</div>
<div id="mazda" class="truck">
  <div class="seats">2</div>
  <div class="fuel">diesel</div>
</div>

以及如何选择包含汽车和座位类的元素

<div id="godrej" class="car seat">
  <div class="hands">0</div>
</div>

Answer 1

这是非常基本的CSS

#bmw .seats {
    /* your rules go here */
}

请参阅#bmw是ID选择器。 .seats是一个类选择器。如果您按照发布的方式合并它们，那么.seats

内的所有内容都会#bmw

我认为您需要了解有关CSS的更多信息，这是CSS 101

<强>更新

要选择.seats内的所有.car，只需使用

即可

.car .seats {
    /* your rules go here */
}

Answer 2

#bmw .seats {
    /* your can specify styles here */
}

您可以选择任何标记的任何子元素，后跟父元素

未应用bmw元素样式的

您可以指定类或ID来应用样式

Answer 3

 #bmw .seat{}

.car .seat{}

在第一个规则将适用于具有id bmw的元素内具有类座位的所有元素。

在第二个同时拥有等级汽车和座位的元素。

.car.seats{}

这将适用于Class=""属性

中的元素

.car .seats{} //with space in between

这将适用于将父类作为car和子类作为席位的元素。

有没有办法使用css选择元素的子元素

3 个答案: