css - 如何找到指定順序的某類名元素
問題描述
<p class='item2'> <p class='tcc'><p class='icon'></p><p>2017.07.07</p> </p> <p class='link'> </p> <p class='tcc'><p class='icon'></p><p>12個月</p> </p> <p class='link'> </p> <p class='tcc'><p class='icon'></p><p>2017.07.08</p> </p></p>
我想通過
item2 .tcc:nth-of-type(2) .icon{}
給第二個tcc類名的元素添加樣式,為啥會無效的。我后來想了一下,nth-of-type這類偽類選擇器前都是要元素標簽的嗎?網上的教程好像都是,不能是類名嗎?
問題解答
回答1:因為 <p class='link'></p> 也是 p 所以 第二個 tcc 其實是 nth-of-type(3)
回答2:且不說 nth-of-type 需不需要顯式指定標簽,:nth-of-type(n) 是指選擇父元素中具有指定類型的第 n 個子元素,而你的第二個 .tcc 是 .item2 的第 3 個子元素,而不是第 2 個,或許你應該寫成 .item2 .tcc:nth-of-type(3) .icon {}
回答3:item2 .tcc:nth-of-type(2) .icon{}
替換為
item2 .tcc:nth-child(3) .icon{}
相關文章:
1. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. javascript - nodejs關于進程間發送句柄的一點疑問4. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?5. 實現bing搜索工具urlAPI提交6. javascript - 移動端上不能實現拖拽布局嗎?7. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化8. phpstudy8.1支持win11系統嗎?9. 配置Apache時,添加對PHP的支持時語法錯誤10. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~

網公網安備