css選擇器(2)——屬性選擇器和基於元素結構關系的選擇器
阿新 • • 發佈：2018-02-21
tro 性能 border end 元素 接受 span div word
在有些標記語言中，不能使用類名和id選擇器，於是css2引入了屬性選擇器。
3.屬性選擇器
a)根據是否存在該屬性來選擇
如果希望選擇有某個屬性的元素，例如要選擇有class屬性的所有h1元素，使其文本為銀色，可以這樣寫：
/*根據單個屬性來選擇*/
h1[class]{
color:sliver;
}
/*還可以根據多個屬性來選擇*/
h1[class][id]{
color:yellow;
}
b)根據具體屬性值來選擇
<style>
/*也可以利用多個屬性值來選擇,第二段變成了紅色*/
p[class=‘one‘][alt=‘two‘]{
color:red;
}
</style>
<body>
<p class=‘one‘>一個class屬性</p>
<p class=‘one‘ alt=‘two‘>一個class屬性加上一個alt屬性</p>
</body>
c)根據部分屬性值來選擇
~=：如果屬性能夠接受詞列表，可以根據其中的任意一個詞進行選擇。
*=word1：選擇屬性值中包含word1的所有元素
^=start：選擇屬性值中以start開頭的所有元素
$=end：選擇屬性值中以end結尾的所有元素
<style> p[class~=‘bar‘]{ color:red; } p[class*=‘wo‘]{ color:blue; } p[class^=‘th‘]{ color:yellow; } p[class$=‘ur‘]{ color:purple; } </style> <body> <p class=‘one bar‘>one</p><!--紅色--> <p class=‘one bard‘>與上一段作為對比</p><!--默認顏色--> <p class=‘two ok‘>two</p><!--藍色--> <p class=‘three‘>three</p><!--黃色--> <p class=‘four‘>four</p><!--紫色--> </body>
d)特定屬性選擇器
直接看例子：
/*選擇src屬性等於figure或者以figure-開頭的元素*/
img[src|=‘figure‘]{
border:1px;
}
4.基於文檔結構的選擇器
a)後代選擇器——使用空格分隔：
選擇h1中的所有em元素：
h1 em{
color:gray;
}
/*當然並不限於兩個選擇器，例如：*/
/*將p標簽下的所有span標簽下的所有em元素的文本顏色設置為灰色*/
p span em{
color:em
}
b)子元素選擇器——使用>號分隔
選擇h1的子元素而不是後代元素
<style> h1 > em{ color:red; } </style> <body> <h1>sjfsl<span><em>不會被選擇到</em></span><em>會被選擇到</em></h1> </body>
c)相鄰兄弟（不能是堂兄弟，即擁有相同的父元素）選擇器——使用＋號分隔
<style> p + h1{ color:red; } </style> <body> <p>第一段</p> <h1>第二段</h1><!--顏色變紅--> <h1>第三段</h1><!--顏色不變-->
</body>
css選擇器(2)——屬性選擇器和基於元素結構關系的選擇器