是否可以為元素定義CSS樣式，僅在匹配的元素包含特定元素（作為直接子項）時才適用？我認為最好用一個例子來解釋。注意：我正在嘗試設置父元素的樣式，具體取決于它包含的子元素。<style> /* note this is invalid syntax. I'm using the non-existing ":containing" pseudo-class to show what I want to achieve. */ div:containing div.a { border: solid 3px red; } div:containing div.b { border: solid 3px blue; }</style><!-- the following div should have a red border because if contains a div with class="a" --><div> <div class="a"></div></div><!-- the following div should have a blue border --><div> <div class="b"></div></div>注意2：我知道我可以使用javascript來實現，但是我只是想知道是否可以使用某些（對我而言）未知的CSS功能。
3 回答
慕桂英4014372
TA貢獻1871條經驗 獲得超13個贊
我正在處理這個問題，在我的情況下，我必須顯示一個子元素并相應地校正父對象的高度（由于某些原因，我沒有時間進行調試，因此自動調整大小無法在bootstrap標頭中工作） 。
但是，我認為不用動態地向父級添加CSS類，而是使用CSS選擇性地顯示子級，而不是使用JavaScript修改父級。這將保持邏輯中的決策，而不是基于CSS狀態。
tl; dr; 將aand b樣式應用于父項<div>，而不是子項（當然，并不是每個人都可以做到這一點。即，由Angular組件自行決定）。
<style>
.parent { height: 50px; }
.parent div { display: none; }
.with-children { height: 100px; }
.with-children div { display: block; }
</style>
<div class="parent">
<div>child</div>
</div>
<script>
// to show the children
$('.parent').addClass('with-children');
</script>
- 3 回答
- 0 關注
- 488 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消