問題描述

有沒有更優雅的寫法?

.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 個或更多具有相同屬性值的元素的選擇器?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！