一個html節點的多個css規則

有人可以幫助我使用css語法來獲得具有數據屬性的html節點的多個css規則。一個html節點的多個css規則

下面是一些代碼，做工作：

<html> 
<head> 
</head> 
<div class='Css_Rule_red Css_Rule_size'> 
    Test text 
</div> 

<style>.Css_Rule_red { 
    color: red; 
} 
.Css_Rule_size { 
    font-size: 500px; 
} 
</style> 
</html>

這裏是我當前的代碼：

<html> 
<head> 
</head> 
<div data-custom-css='Css_Rule_red Css_Rule_size'> 
    Test text 
</div> 

<style>[data-custom-css='Css_Rule_red'] { 
    color: red; 
} 
[data-custom-css='Css_Rule_size'] { 
    font-size: 500px; 
} 
</style> 
</html>

無論是'Css_Rule_red'和'Css_Rule_size'工作獨立，但是，上面的代碼並不顯示任何的當組合在一起時，'Css_Rule_red'或'Css_Rule_size' css規則。

如何在使用數據屬性時擁有多個css規則？

來源

2015-09-21 user3736648

你可能想是這樣的：

.Css_Rule_red { 
     color: red; 
    font-size: 500px; 
    }

來源

2015-09-21 11:28:51 ProblemSolver

因爲data-custom-css比class一個單獨的標籤，你應該使用[data-custom-css='Css_Rule_red Css_Rule_size'] ..

<style> 
[data-custom-css='Css_Rule_red Css_Rule_size'] 
{ 
    color: red; 
    font-size: 500px; 
} 
</style>

或

<div data-custom-css='Css_Rule_red' data-custom-css2='Css_Rule_size'> 
    Test text 
</div> 

<style>[data-custom-css='Css_Rule_red'] { 
    color: red; 
} 
[data-custom-css2='Css_Rule_size'] { 
    font-size: 500px; 
} 
</style>

來源

2015-09-21 11:29:31 Sachin

https://amcss.github.io/

有關屬性選擇更多信息 - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

[data-custom-css~="Css_Rule_red"] { 
    color: red; 
} 

[data-custom-css~="Css_Rule_size"] { 
    font-size: 500px; 
}

來源

2015-09-21 11:30:05 0x860111

你將不得不使用不同的數據屬性爲每個數據項。數據屬性與ID相同。如果你使用多個，他們都不會工作。如果你想把這兩個類作爲數據屬性，你可以將它們設置爲：

<html> 
<head> 
</head> 
<div data-custom-css-colour='Css_Rule_red' data-custom-css-size='Css_Rule_size'> 
    Test text 
</div> 

<style> 
    [data-custom-css-colour='Css_Rule_red'] { 
    color: red; 
    } 
    [data-custom-css-size='Css_Rule_size'] { 
    font-size: 500px; 
    } 
</style> 
</html>

來源

2015-09-21 11:35:08

一個html節點的多個css規則

回答

相關問題