有2个或更多具有相同属性值的连续元素的选择？ [英] Is there a selector for 2 or more consecutive elements with the same attribute value?

问题描述

有没有写这个更优雅的方式？

Is there a more elegant way to write this?

.standard {
  padding-top: 50px;
  padding-bottom: 50px;
}
.standard.color-0 + .standard.color-0,
.standard.color-1 + .standard.color-1,
.standard.color-2 + .standard.color-2,
.standard.color-3 + .standard.color-3,
.standard.color-4 + .standard.color-4,
.standard.color-5 + .standard.color-5,
.standard.color-6 + .standard.color-6,
.standard.color-7 + .standard.color-7,
.standard.color-8 + .standard.color-8 {
  padding-top: 0;
}

有可能还有一些选择器检查2种以上的元素没有找到真正知道确切的类名类的比赛吗？比如是这样的：

Is there perhaps some selector that checks for matches of the classes found on 2 or more elements without actually knowing the exact class's name? Such as something like:

.standard.color-* + .standard.color-* {
  padding-top: 0;
}

我所目前（上面贴）的作品我希望它尽可能如何显示在我的网站的方式，但我只是好奇是否，还是不行，我注定要不断补充 .standard.color-＃+ .standard.color - ＃为每一个新的颜色，我需要（在这种情况下是背景颜色全宽＆lt;节＆GT; 标记）。

What I have currently (posted above) works the way I want it to as far as how it displays on my site, but I am just curious whether, or not, I am doomed to constantly add .standard.color-# + .standard.color-# for every new color I need (which in for this case are background-colors for full-width <section> tags).

例如：

<section class="standard color-0"></section> // top and bottom padding
<section class="standard color-1"></section> // top and bottom padding

-----------------------------------------------------------------------

<section class="standard color-1"></section> // top and bottom padding
<section class="standard color-1"></section> // padding-top: 0; (if both "color-#" is the exact same this loses its top padding)

编辑：简化后和code。 ＆lt;节＆GT; 将永远有一个。标准类和。颜色 - 与类。颜色​​0 是背景颜色：透明;

Simplified post and code. <section> will always have a .standard class and a .color- class with .color-0 being background-color: transparent;.

推荐答案

不幸的是，由于选择的静态特性，CSS不提供的一种化合物选择的方式来引用另一种化合物选择的任何部位，甚至没有与<一href=\"http://stackoverflow.com/questions/23593098/how-can-i-use-emulate-regex-like-backreferences-in-css-selectors\">a正则表达式的语法。所以你不能，例如，用相同的类名称匹配的元素或属性值作为previous兄弟没有硬编码的实际值。唯一的解决办法是你的人。

Unfortunately, due to the static nature of selectors, CSS doesn't offer a way for one compound selector to reference any part of another compound selector, not even with a regex-like syntax. So you can't, for example, match an element with the same class name or attribute value as its previous sibling without hardcoding the actual value. The only solution is the one you have.

正如我在回答上面链接，如果您使用的是preprocessor的问题提了，你可以在一定程度自动完成这一点。它仍然将导致CSS一样硬codeD选择器，但实际编写那些选择任务卸载到preprocessor代替。下面是一个例子使用SCSS：

As I mention in my answer to the question linked above, if you're using a preprocessor, you can automate this somewhat. It will still result in the same hardcoded selectors in CSS, but the task of actually writing those selectors is offloaded to the preprocessor instead. Here's an example using SCSS:

.standard {
  padding-top: 50px;
  padding-bottom: 50px;

  &%consecutive {
    padding-top: 0;
  }

  // To accommodate more numbered classes simply edit this loop
  @for $i from 0 through 8 {
    &.color-#{$i} + &.color-#{$i} {
      @extend %consecutive;
    }
  }
}

这篇关于有2个或更多具有相同属性值的连续元素的选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！