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

问题描述

有没有更优雅的写法?

.standard {填充顶部:50px；底部填充: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 {填充顶部:0；}

是否有一些选择器可以检查在 2 个或更多元素上找到的类的匹配项，而实际上并不知道确切的类名?比如这样的:

.standard.color-* + .standard.color-* {填充顶部:0；}

我目前所拥有的(上面发布的)按照我想要的方式在我的网站上显示，但我只是好奇我是否注定要不断添加 .standard.color-# + .standard.color-# 用于我需要的每种新颜色(在这种情况下是全宽 <section> 标签的背景颜色).p>

例子:

<section class="standard color-0"></section>//顶部和底部填充<section class="标准颜色-1"></section>//顶部和底部填充-----------------------------------------------------------------------<section class="标准颜色-1"></section>//顶部和底部填充<section class="标准颜色-1"></section>//padding-top: 0;(如果两个color-#"完全相同，则会丢失其顶部填充)

简化的帖子和代码.<section> 将始终有一个 .standard 类和一个带有 .color-0 的 .color- 类正在 background-color: transparent;.

解决方案

不幸的是，由于选择器的静态特性，CSS 没有提供一种方法让一个复合选择器引用另一个复合选择器的任何部分，即使使用一种类似正则表达式的语法.因此，例如，在两个复合选择器中，如果不对实际值进行硬编码，就不能匹配具有与其前一个兄弟相同的类名或属性值的元素.唯一的解决方案是您拥有的解决方案.

正如我在对上面链接的问题的回答中提到的，如果您使用的是预处理器，则可以稍微自动化一下.它仍然会在 CSS 中产生相同的硬编码选择器，但实际编写这些选择器的任务被卸载到预处理器上.这是一个使用 SCSS 的示例:

.standard {填充顶部:50px；底部填充:50px；&% 连续 {填充顶部:0；}//要容纳更多编号的类，只需编辑此循环@for $i 从 0 到 8 {&.color-#{$i} + &.color-#{$i} {@extend % 连续；}}}

同样，这需要提前知道这些值.如果你不能写下所有可能的值(或者你不想写)，你需要编写一个脚本来检查运行时的值.

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.

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