第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

帶有類的第一個元素的CSS選擇器

帶有類的第一個元素的CSS選擇器

寶慕林4294392 2019-05-23 13:06:31
帶有類的第一個元素的CSS選擇器我有一堆帶有類名的元素red,但我似乎無法class="red"使用以下CSS規(guī)則選擇第一個元素:.red:first-child {    border: 5px solid red;}<p class="red"></p><div class="red"></div>這個選擇器有什么問題,如何糾正?感謝這些評論,我發(fā)現(xiàn)該元素必須是其父母的第一個孩子才能被選中,這與我的情況不同。我有以下結(jié)構(gòu),這條規(guī)則失敗,如評論中所述:.home .red:first-child {    border: 1px solid red;}<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>我怎樣才能讓第一個孩子上課red?
查看完整描述

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或更早版本)。


查看完整回答
反對 回復(fù) 2019-05-23
?
qq_遁去的一_1

TA貢獻1725條經(jīng)驗 獲得超8個贊

正確答案是:

.red:first-child, :not(.red) + .red { border:5px solid red }

第一部分:如果元素是第一個到它的父級并且具有類“紅色”,它將獲得邊界。
第二部分:如果“.red”元素不是第一個到它的父元素,而是緊跟一個沒有類“.red”的元素,它也應(yīng)該得到所述邊界的榮譽。

小提琴或它沒有發(fā)生。

Philip Daubmeier的答案雖然被接受了,但卻不正確 - 請參閱隨附的小提琴。
BoltClock的答案可行,但不必要地定義和覆蓋樣式
(特別是否則會繼承不同邊框的問題 - 你不想聲明其他邊框:none)

編輯:如果你有幾次非紅色的“紅色”,每個“第一”紅色將獲得邊框。為了防止這種情況,人們需要使用BoltClock的答案。看小提琴


查看完整回答
反對 回復(fù) 2019-05-23
  • 3 回答
  • 0 關(guān)注
  • 6227 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號