3 回答

TA貢獻1793條經(jīng)驗 獲得超6個贊
該:first-child
選擇的目的是,像它的名字說,選擇父標(biāo)簽的第一個孩子。孩子必須嵌入在同一個父標(biāo)簽中。您的確切示例將起作用(剛試過這里):
<body> <p class="red">first</p> <div class="red">second</div></body>
也許您已將標(biāo)簽嵌套在不同的父標(biāo)簽中?您的類標(biāo)簽red
真的是父母下的第一個標(biāo)簽嗎?
另請注意,這并不僅適用于整個文檔中的第一個此類標(biāo)記,而是每次將新父項包裹在其中時,例如:
<div> <p class="red">first</p> <div class="red">second</div></div><div> <p class="red">third</p> <div class="red">fourth</div></div>
first
然后third
會變紅。
更新:
我不知道為什么馬丁刪除了他的答案,但他有解決方案,:nth-of-type
選擇器:
<html><head><style type="text/css">.red:nth-of-type(1){ border:5px solid red;} </style></head><body> <div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div></body></html>
致Martyn的學(xué)分。更多信息,例如這里。請注意,這是一個CSS 3選擇器,因此并非所有瀏覽器都能識別它(例如IE8或更早版本)。

TA貢獻1725條經(jīng)驗 獲得超8個贊
正確答案是:
.red:first-child, :not(.red) + .red { border:5px solid red }
第一部分:如果元素是第一個到它的父級并且具有類“紅色”,它將獲得邊界。
第二部分:如果“.red”元素不是第一個到它的父元素,而是緊跟一個沒有類“.red”的元素,它也應(yīng)該得到所述邊界的榮譽。
Philip Daubmeier的答案雖然被接受了,但卻不正確 - 請參閱隨附的小提琴。
BoltClock的答案可行,但不必要地定義和覆蓋樣式
(特別是否則會繼承不同邊框的問題 - 你不想聲明其他邊框:none)
編輯:如果你有幾次非紅色的“紅色”,每個“第一”紅色將獲得邊框。為了防止這種情況,人們需要使用BoltClock的答案。看小提琴
添加回答
舉報