雖千萬人而吾往矣...
+號選擇器
該選擇器是相鄰兄弟選擇器,什么是相鄰兄弟選擇器呢?
即----兩個元素同級別,有同一個父元素,相當于jquery的next。
舉例
- css代碼
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
- html代碼
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
-
運行效果
image.png - 解釋
body下面的h1和五個p元素為兄弟元素,他們有同一個父元素body。
h1+p的話僅僅是選擇的其后的第一個p元素,對于其他的p元素無效。
checked元素
選擇所有被選中的元素。僅僅適用于input的多選按鈕和單選按鈕。
比較常用的方式如下:
input:checked
{
background-color: #ff0000;
}
此時,所有被選中的單選按鈕和多選按鈕都會改變背景色。
特別注意
該選擇器僅僅適用于Opera,對于其他任何瀏覽器都不適用。