如何申請一個div模式的css

我有兩個divs，假設第一個是edit-text-field-12，其他的形式是edit-text-field-12-23。而這些數字的變化，我想申請不同的CSS爲div。是否可以在CSS中完成。如何申請一個div模式的css

我想爲模式edit-text-field-12下的所有div應用背景顏色紅色，模式爲edit-text-field-12-23的div使用背景顏色藍色。

可能嗎？

<input type="checkbox" id="edit-text-field-12" value="12"> 
<input type="checkbox" id="edit-text-field-12-23" value="12-23"> 
<input type="checkbox" id="edit-text-field-12-46" value="12-46"> 
<input type="checkbox" id="edit-text-field-12-39" value="12-39"> 

<input type="checkbox" id="edit-text-field-17" value="17"> 
<input type="checkbox" id="edit-text-field-17-21" value="17-21"> 
<input type="checkbox" id="edit-text-field-17-34" value="17-34">

有很多類型的複選框輸入。在另一個字段的更改中填入此列表。具有模式edit-text-field-*的複選框是父母，並且具有模式'edit-text-field--'的複選框是子元素。我想用兩種不同的背景來展示它。

來源

2016-10-17 Fazeela Abu Zohra

嘗試。首先-DIV-的className + DIV {}。這將有助於，如果你的第一個div的classname不會改變 –

液在BOTTOM

假設這些都是IDS，您可以選擇其中所有像這樣：

[id^="edit-text-field-"] { 
    /* YOUR CSS */ 
}

這將選擇edit-text-field-11，edit-text-field-12，edit-text-field-12-23等

更具體本部分選擇，你可以在12添加到末尾等，如。

[id^="edit-text-field-12"] { 
    /* YOUR CSS */ 
}

這將選擇edit-text-field-12，edit-text-field-12-23，但不edit-text-field-11。

對於個人 IDS，語法如下：

#edit-text-field-12 { 
    /* YOUR CSS */ 
}

如需進一步閱讀，請W3Schools CSS Selectors，這也解釋了所有可用的可能的CSS選擇器您。

在響應的問題編輯：

#edit-text-field-12 { 
    /* YOUR CSS for the first bit */ 
} 
[id^="edit-text-field-12-"] { 
    /* YOUR CSS for the other bits */ 
}

17替換12用於第二組等

您不能選擇12是任何數字的部分，因爲沒有通配符 CSS中的值（例如， edit-text-field-*-），所以你必須重複上述，你可以使用逗號，所以你不要重複樣式。

#edit-text-field-12, 
#edit-text-field-17 { 
    /* YOUR CSS for the first bit */ 
} 
[id^="edit-text-field-12-"], 
[id^="edit-text-field-17-"] { 
    /* YOUR CSS for the other bits */ 
}

甲溶液此，作爲輸入的值爲，值爲，是使用這些值來檢測它們是哪種類型。

這樣做，你可以像這樣選擇的一切：

[id^="edit-text-field-"]:not([value*="-"]) { 
    /* YOUR CSS for the first bit */ 
    background: #f44336; 
} 
[id^="edit-text-field-"][value*="-"] { 
    /* YOUR CSS for the other bits */ 
    background: #1976d2; 
}

來源

2016-10-17 08:00:06

@FazeelaAbuZohra編輯回覆您的編輯，請接受我的答案，如果有幫助:) –

這12可以是任何數字，我很抱歉它沒有幫助我很多 –

@FazeelaAbuZohra通配符不存在於CSS中，所以您必須爲每個12等重複。我將編輯答案來解釋。 –

您的使用partial selector如下。

div[class^="edit-text-field-"] { 

}

編輯： jQuery的解決方案

既然你沒有明確說明的，如果你正在試圖改變股利或輸入元素的背景顏色，我想你想包裝每個輸入在一個div和顏色他們。

下面是樣本片段。

要點。

我用filter()上全部投入到篩選出只有個位數的ID和兩位數的ID的使用regex

^edit-text-field-\d+$ - >確保它選擇的id像edit-text-field-12，edit-text-field-17

^edit-text-field-\d+-\d+$ - >確保它選擇的ID爲edit-text-field-12-23,edit-text-field-17-21等。

2。元素被過濾後，我使用wrap用div和適當的類名稱來包裝它們以獲取背景顏色。

希望這是有幫助的。

var singleNumberPatternElements = []; 
 
var doubleNumberPatternElements = []; 
 

 
$('input').filter(function(){ 
 
return this.id.match(/^edit-text-field-\d+$/g); 
 
}).wrap('<div class="singleNumber"/>'); 
 

 
$('input').filter(function(){ 
 
return this.id.match(/^edit-text-field-\d+-\d+$/g); 
 
}).wrap('<div class="doubleNumber"/>');

.singleNumber{ 
 
background-color:blue; 
 
} 
 

 
.doubleNumber{ 
 
    background-color:Red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="checkbox" id="edit-text-field-12" value="12"> 
 
<input type="checkbox" id="edit-text-field-12-23" value="12-23"> 
 
<input type="checkbox" id="edit-text-field-12-46" value="12-46"> 
 
<input type="checkbox" id="edit-text-field-12-39" value="12-39"> 
 

 
<input type="checkbox" id="edit-text-field-17" value="17"> 
 
<input type="checkbox" id="edit-text-field-17-21" value="17-21"> 
 
<input type="checkbox" id="edit-text-field-17-34" value="17-34">

來源

2016-10-17 08:01:16

@FazeelaAbuZohra你的新要求不能用CSS來完成，它可以用Javascript來完成/ Jquery –

我怎麼知道？ –

@FazeelaAbuZohra是你想要應用CSS還是div的複選框？我沒有在你的代碼中看到div，但在你提到關於div的問題 –

使用CSS3部分選擇

div[class^="edit-text-field-"]{ 
 
    width:100%; 
 
    background-color: blue; 
 
}

<div class="edit-text-field-12">abc</div> 
 
<div class="edit-text-field-12-23">def</div>

來源

2016-10-17 08:03:25

如何申請一個div模式的css

回答

相關問題