连接多个 CSS

Question

说我有这个 html :

<div class="div">
    <div class="sub-div"></div>
    <div class="sub-div"></div>
    <div class="extra-sub-div"></div>
</div>

目前如果我想得到第二个子div，我可以这样做:

.div .sub-div:nth-child(2) {
  attribute: value;
  (...)
}

现在，如果我想要额外的子div，我可以这样做:

.div .extra-sub-div {
  attribute: value;
  (...)
}

现在让我们假设 css 的属性和值对所有 都是相同的。

类似于：

width: 80px;

写什么 css 将所有这些 div 集中在一个中，而不是像这样写多个 css :

1.

.div .sub-div:nth-child(1) {
  width: 80px;
}

.div .sub-div:nth-child(2) {
  width: 80px;
}

.div .extra-sub-div {
  width: 80px;
}

?

Answer 1

div >

.div > div {
  color: red;
  width: 80px;
}

<div class="div">
    <div class="sub-div">1</div>
    <div class="sub-div">2</div>
    <div class="extra-sub-div">3</div>
</div>

以“-div”结尾：

div[class$="-div"] {
  color: green;
  width: 80px;
  background: yellow;
}

<div class="div">
    <div class="sub-div">1</div>
    <div class="sub-div">2</div>
    <div class="extra-sub-div">3</div>
  <div class="extra-sub-no">4</div>
</div>

Answer 2

您可以对每个需要的元素使用 ,，例如：

.div .sub-div:nth-child(1), .div .sub-div:nth-child(2), .div .extra-sub-div {
  width: 80px;
  color:red;
}

<div class="div">
    <div class="sub-div">1</div>
    <div class="sub-div">2</div>
    <div class="extra-sub-div">3</div>
</div>

Answer 3

当您将 CSS 个选择器组合在一起时，您可以将相同的样式应用于多个不同的元素，而无需在您的样式中重复这些样式sheet。不用两个、三个或更多 CSS 规则来做同样的事情（例如，将某物的宽度设置为 80px），而是使用一个 CSS 规则来完成同样的事情。

要将 CSS 个选择器组合成一个样式 sheet，请使用逗号分隔样式中的多个组合选择器。

.div .sub-div:nth-child(1), .div .sub-div:nth-child(2), .div .extra-sub-div {
  width: 80px;
}

Answer 4

.div div{
   width: 80px;
}

这个 CSS 将 select .div .sub-div:nth-child(1), .div .sub-div:nth-child(2), .div .extra-sub-div 和

Answer 5

我个人只是将另一个 class 添加到子 div 元素中，用 space 分隔。这样您就不会针对所有子 div-元素，而只会针对具有此确切 class.

的子元素

如果您在父 div 中有子元素并且您不希望它们具有 .red-class-class 中的样式，这很好：

.red-class {
  color: red;
}

<div class="div">
  <div class="red-class sub-div">text</div>
  <div class="red-class sub-div">text</div>
  <div class="red-class extra-sub-div">text</div>
  <div class="extra-sub-div">text</div>
</div>

Answer 6

问题不是很清楚

我假设最适合你的是 select 第一级的 div，例如：

 .div > div {
    width: 80px;
}

或者如果您想要前三项

.div div:nth-child(-n+3) {
    width: 80px;
}

无论如何，css 中有很多网站可以为您提供提示：例如：

https://css-tricks.com/useful-nth-child-recipies/

连接多个 CSS

Concatenate multiple CSS

html

javascript

css

frontend