自從上回從 Wiki 發現 CSS Attribute Selector 強大之處之後 又過了一段時日 CSS Attribute Selector
但是其實 CSS 還有一些小祕密 就讓我們來瞧瞧
1.複數class
這個應該還算常見 比如我有兩個樣式 .borderStyle .colorStyle
如果我需要某元素同時具有這兩種樣式的效果 我可以這麼寫
<style>
.borderStyle
{
border: 1px solid #999;
}
.colorStyle
{
color: blue;
}
</style>
<div>
<input value="aaa" class="borderStyle" type="button" />
<input value="bbb" class="colorStyle" type="button" />
<input value="ccc" class="borderStyle colorStyle" type="button" />
</div>
但是如果我想要第三個按鈕再做些變化的話該怎麼寫? 咦? .borderStyle colorStyle 好像沒辦法 因為對 CSS 而言 空格是下一層物件的意思了 =3=
想想 Attribute Selector
我們的 HTML 是一種 XML 所以我們的 class 也是一種 Attribute
所以我們可以使用 Attribute Selector
<style>
.borderStyle
{
border: 1px solid #999;
}
.colorStyle
{
color: blue;
}
[class='borderStyle colorStyle']
{
padding: 10px;
font-size: 16pt;
}
</style>
<div>
<input value="aaa" class="borderStyle" type="button" />
<input value="bbb" class="colorStyle" type="button" />
<input value="ccc" class="borderStyle colorStyle" type="button" />
</div>
值得注意的是 我們仍需要小心 CSS 的順序性 如果有覆寫之前設定過的屬性 會以最後指定的為準
2.複數attribute
我們之前已經會了 使用 Attribute Selector 來設定樣式
<style>
[data-hasBorder='true']
{
border: 1px solid #999;
}
[data-hasBorder='false']
{
border: none;
}
[data-isBig='true']
{
font-size: 16pt;
}
[data-isBig='false']
{
font-size: 9pt;
}
</style>
<div>
<input value="aaa" data-hasborder="true" data-isbig="true" type="button" />
<input value="bbb" data-hasborder="false" data-isbig="true" type="button" />
<input value="ccc" data-hasborder="true" data-isbig="false" type="button" />
<input value="ddd" data-hasborder="false" data-isbig="false" type="button" />
</div>
如過這回我們想要在 同時符合兩項 Attribute 的元素 做變化該怎麼辦?
答案很簡單沒人說 [] 只能有一個
<style>
[data-hasBorder='true']
{
border: 1px solid #999;
}
[data-hasBorder='false']
{
border: none;
}
[data-isBig='true']
{
font-size: 16pt;
}
[data-isBig='false']
{
font-size: 9pt;
}
[data-hasBorder='true'][data-isBig='true']
{
color: red;
}
[data-hasBorder='false'][data-isBig='false']
{
color: green;
}
</style>
<div>
<input value="aaa" data-hasborder="true" data-isbig="true" type="button" />
<input value="bbb" data-hasborder="false" data-isbig="true" type="button" />
<input value="ccc" data-hasborder="true" data-isbig="false" type="button" />
<input value="ddd" data-hasborder="false" data-isbig="false" type="button" />
</div>
大會串一下
<style>
input#btn1.btn[data-hasborder='true'][data-isbig='false']
{
color: orange;
font-size: 24pt;
}
</style>
<div>
<input id="btn1" class="btn" value="aaa" data-hasborder="true" data-isbig="false" type="button" />
</div>
TagName#Id.Class[Attribute1='value'][Attribute2='value']
