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

问题描述

有更优雅的方式来写这个吗？

  .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上找到的类的匹配更多的元素，而实际上不知道确切的类名？例如：

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

我目前（发布上面）的工作方式，我想要它就像如何在我的网站上显示，但我只是好奇是否，我注定要不断添加 .standard.color-＃+ .standard.color - ＃对于我需要的每个新颜色（在这种情况下是全宽< section> 标签的背景颜色）。

示例：

 < 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; （如果两个color-＃完全相同，则丢失其顶部填充）
  

帖子和代码。 < section> 将始终具有 .standard 类和 .color - code> class with .color-0 is background-color：transparent; 。

$不幸的是，由于选择器的静态特性，CSS不能为一个复合选择器提供引用另一个复合选择器的任何部分的方法，甚至与一个正则表达式语法。因此，例如，在两个复合选择器中，不能将具有与之前同级相同的类名或属性值的元素匹配，而不对硬实际值进行硬编码。唯一的解决方案是你有一个。

正如我在上面提到的问题的答案中提到的，如果你使用一个预处理器，你可以自动化这一点。它仍然会在CSS中产生相同的硬编码选择器，但是实际写入这些选择器的任务被卸载到预处理器。下面是使用SCSS的示例：

  .standard {
 padding-top：50px; 
 padding-bottom：50px; 
 
&％连续{
 padding-top：0; 
} 
 
 //为了容纳更多编号的类，只需编辑此循环
 @for $ i从0到8 {
& .color  - ＃{$ i } +& .color  - ＃{$ i} {
 @extend％consecutive; 
} 
} 
} 
  

的值提前。如果你不能写下所有可能的值（或你不想），你需要编写一个脚本来检查运行时的值。

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;
}

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;
}

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).

Examples:

<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)

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

解决方案

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, in both compound selectors. The only solution is the one you have.

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;
    }
  }
}

This, again, requires knowing the values in advance. If you cannot write down all the possible values (or you don't want to), you'll need to write a script to examine the values in runtime.

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