檢查數據屬性是否設置爲父div div/css並將其用於子div以及

我有div標籤，其中data-type屬性與其關聯。我想根據數據類型設置不同的樣式來應用不同的樣式。檢查數據屬性是否設置爲父div div/css並將其用於子div以及

<div data-type="type1">Hello, World!</div>

我可以檢查該屬性data-type是否在css/less中設置或否？這個問題用this解決。

但是，如果我申請這個data-type僅歸因於父div，我可以用這個屬性對所有的孩子div標籤爲好。例如，

<div data-type=`type1`> 
    <div id="newDiv"> </div> 
</div>

在我的CSS，我想這取決於什麼類型（data-type）設置爲其父爲#newDiv應用不同的樣式。我不想爲子div指定data-type屬性。我們如何在CSS中做到這一點？

來源

2017-09-25 Chaitanya

的可能的複製[在CSS中按數據屬性選擇元素]（https://stackoverflow.com/questions/5324415/select-elements-by-data-attribute-in-css） – Kaiido

您可以使用:not([data-type])選擇不具有無論所使用的值設置屬性data-type任何元素。

基本工作例如：

div:not([data-type]) { 
 
    color: red; 
 
}

<div data-type="type1">Hello, World!</div> 
 

 
<div>Hello, World!</div>

或者，你可以做相反的事情，並使用[data-type]選擇具有data-type屬性，無論設定值的任何

工作示例：

div[data-type] { 
 
    color: red; 
 
}

<div data-type="type1">Hello, World!</div> 
 

 
<div>Hello, World!</div>

如果要針對孩子的div的父div有該data-type屬性設置，你可以使用這樣的事情：

div[data-type]>h1 { 
 
    color: red; 
 
}

<div data-type="type1">Hello, World! 
 
    <h1> How are you?!</h1> 
 
</div> 
 

 
<hr> 
 

 
<div>Hello, World! 
 
    <h1> How are you?!</h1> 
 
</div>

這也可以反悔根據您的選擇器首選項來定位沒有設置爲data-type屬性的父元素的子元素。

div:not([data-type])>h1 { 
 
    color: red; 
 
}

<div data-type="type1">Hello, World! 
 
    <h1> How are you?!</h1> 
 
</div> 
 

 
<hr> 
 

 
<div>Hello, World! 
 
    <h1> How are you?!</h1> 
 
</div>

如果你有更復雜的結構，你可以使用通配符*選擇的構建匹配非常廣泛的模式，選擇。字母代表在該元素居住與aaa是一個直接子和bbb是一個孫子樹的深度...等

基本示例：

[data-type] * h1, 
 
[data-type] h1 { 
 
    color: red; 
 
}

<div data-type="type1"> 
 
    <h1> aaa</h1> 
 
</div> 
 

 
<hr> 
 

 
<div> 
 
    <h1> aaa</h1> 
 
</div> 
 

 
<hr> 
 

 
<div id="test" data-type="type1"> 
 
    <div> 
 
    <h1> bbb</h1> 
 
    <div> 
 
     <h1> ccc</h1> 
 
    </div> 
 
    </div> 
 
    <h1 class="wow"> aaa</h1> 
 
    <div> 
 
    <h1 class="wow"> bbb</h1> 
 
    </div> 
 
</div> 
 

 
<hr> 
 

 
<div id="test"> 
 
    <h1 class="wow"> aaa</h1> 
 
    <div> 
 
    <div> 
 
     <h1> ddd</h1> 
 
    </div> 
 
    <h1 class="wow"> ccc</h1> 
 
    </div> 
 
</div>

來源

2017-09-25 06:21:25

@我haz kode，提到的3和4片段只有工作爲直接的孩子。直接父級應該設置data- *屬性，否則style將不會被應用。在我的場景中，div的多重嵌套在那裏，只有頂層父母，我有data- *屬性集。 – Chaitanya

@我haz kode，我編輯了你的答案，添加片段5，其實它失敗了。有沒有辦法在CSS中處理這種情況？ – Chaitanya

讓我快看，我會盡快發佈@Chaitanya –

如果你發現在你的data-type價值的模式，是的，你可以：

/* 1. Attribute value starts with "type" */ 
div[data-type^="type"] { 
    /* Styles */ 
} 

/* 2. Attribute value contains "type" */ 
div[data-type*="type"] { 
    /* Styles */ 
}

作品爲：TYPE1，而TYPEx，typeaskdasd，等...
適用於：abc 類型 xyz,type XYZ，等...

來源

2017-09-25 06:15:10

檢查數據屬性是否設置爲父div div/css並將其用於子div以及

回答

相關問題