我的元素可以反映不同的狀態，或者由用戶觸發(:hover, :focus等等)或由服務器操縱(data-status="finished", disabled等等)。我可以針對已更改狀態的元素，但我似乎無法找到一種方法，根據所述元素的狀態來針對DOM中的其他元素。例子：<section>
<div>Element 1</div>
<div data-status="finished">Element 2</div>
<div>Element 3</div></section><section>
<div>Element 4</div>
<div class="blink">Element 5</div>
<div>Element 4</div>
<div>Element 4</div>
<div class="spin">Element 4</div>
...</section>或者用適當的樣式呈現服務器端的元素。是否有CSS選擇器允許我根據目標元素的狀態指定應該選擇哪些元素？類似于：div[data-status~=finished]:affect(.blink, .spin)這樣我也可以不具有相同父級的目標元素只有CSS？
3 回答
慕容708150
TA貢獻1831條經驗 獲得超4個贊
我不會重復他討論過的任何偽類選擇器，
我們現在有一個新的偽類，在CSS 3中是*目標.
這個
:target當URL中的散列和元素的id相同時，CSS中的偽選擇器匹配。
(“目標”的具體用法是“樣式”元素，該元素是目標元素，并且在視區頂部當前不可見)
因此，實際上可以根據用戶交互(具體單擊)使用(MIS)來更改其他元素樣式，當與另一個偽類或同級選擇器一起使用時。
例如：父母兄弟姐妹的目標子女。
:target?section?div[data-status=finished]?{
??color:?red;}a,a:visited?{
??text-decoration:?none;
??color:?#000;}section?{
??border:?1px?solid?grey;}<nav?id='nav'> ??<h4>This?is?Navigation?section</h4> ??<section> ????sibling????<div><a?href='#nav'>(child)click?me?to?target?child??of?sibling?of?parent</a> ????</div> ??</section> ??<section> ????sibling????<div?data-status="finished">(child)I?am?child?of?parent?of?sibling</div> ??</section></nav>
請注意，以前不可能對父元素或html層次結構中的任何其他元素進行樣式設置。:target被介紹了。它仍然是新的，這樣做(根據另一個元素的單擊選擇另一個元素)并不是原因。:target是為。
缺點:
使用Target的目標元素，將不需要在單個頁面中使用太多，或者它會使您在整個頁面中暢所欲言。
為元素指定的樣式保持在它上，直到目標保持不變。
- 3 回答
- 0 關注
- 813 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消