問(wèn)題描述

有沒(méi)有更優(yōu)雅的寫(xiě)法?

.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 個(gè)或更多元素上找到的類的匹配項(xiàng)，而實(shí)際上并不知道確切的類名?比如這樣的:

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

我目前所擁有的(上面發(fā)布的)按照我想要的方式在我的網(wǎng)站上顯示，但我只是好奇我是否注定要不斷添加 .standard.color-# + .standard.color-# 用于我需要的每種新顏色(在這種情況下是全寬 <section> 標(biāo)簽的背景顏色).p>

例子:

<section class="standard color-0"></section>//頂部和底部填充<section class="標(biāo)準(zhǔn)顏色-1"></section>//頂部和底部填充-----------------------------------------------------------------------<section class="標(biāo)準(zhǔn)顏色-1"></section>//頂部和底部填充<section class="標(biāo)準(zhǔn)顏色-1"></section>//padding-top: 0;(如果兩個(gè)color-#"完全相同，則會(huì)丟失其頂部填充)

簡(jiǎn)化的帖子和代碼.<section> 將始終有一個(gè) .standard 類和一個(gè)帶有 .color-0 的 .color- 類正在 background-color: transparent;.

不幸的是，由于選擇器的靜態(tài)特性，CSS 沒(méi)有提供一種方法讓一個(gè)復(fù)合選擇器引用另一個(gè)復(fù)合選擇器的任何部分，即使使用一種類似正則表達(dá)式的語(yǔ)法.因此，例如，在兩個(gè)復(fù)合選擇器中，如果不對(duì)實(shí)際值進(jìn)行硬編碼，就不能匹配具有與其前一個(gè)兄弟相同的類名或?qū)傩灾档脑?唯一的解決方案是您擁有的解決方案.

正如我在對(duì)上面鏈接的問(wèn)題的回答中提到的，如果您使用的是預(yù)處理器，則可以稍微自動(dòng)化一下.它仍然會(huì)在 CSS 中產(chǎn)生相同的硬編碼選擇器，但實(shí)際編寫(xiě)這些選擇器的任務(wù)被卸載到預(yù)處理器上.這是一個(gè)使用 SCSS 的示例:

.standard {填充頂部:50px；底部填充:50px；&% 連續(xù) {填充頂部:0；}//要容納更多編號(hào)的類，只需編輯此循環(huán)@for $i 從 0 到 8 {&.color-#{$i} + &.color-#{$i} {@extend % 連續(xù)；}}}

同樣，這需要提前知道這些值.如果你不能寫(xiě)下所有可能的值(或者你不想寫(xiě))，你需要編寫(xiě)一個(gè)腳本來(lái)檢查運(yùn)行時(shí)的值.

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.

這篇關(guān)于是否有 2 個(gè)或更多具有相同屬性值的元素的選擇器?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！