色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

具有內(nèi)聯(lián)和/或父樣式(或類)的CSS Select元素

CSS
錢斌斌1年前8瀏覽0評論

我有這樣一份文件:

<html>
  ...
  <body style="direction: rtl;">
    <div class="col-ml-auto">
      some elements following body's direction
    </div>
    ...
    <div class="col-ml-auto" style="direction: ltr;">
      some elements forced to be ltr
    </div>
  </body>
</html>

我可以使用以下語法選擇父方向元素:

.col-ml-auto{margin-left:auto}
[style*="rtl"] .col-ml-auto{margin-left:unset;margin-right:auto}

它選擇正常元素，但行內(nèi)方向沒有影響。

我可以使用以下語法選擇內(nèi)聯(lián)方向元素:

.col-ml-auto{margin-left:auto}
.col-ml-auto[style*="rtl"]{margin-left:unset;margin-right:auto}

它選擇內(nèi)聯(lián)方向元素，但不選擇父方向元素，那么如何處理兩者呢？

你不會有一個基于CSS設置的選擇器，這會產(chǎn)生一個循環(huán)。例如，如果我們有一個假設的:direction()偽選擇器，它對CSS設置的方向很敏感，規(guī)則如下:direction(ltr){ direction:RTL；}會堵塞發(fā)動機。

但是，即使你所有的方向規(guī)則都設置為inline style = & quot"屬性，即使你確定你永遠不會有類似style = & quot方向:RTL；方向:ltr"我懷疑你能找到一個選擇器來區(qū)分最接近匹配A的父元素和最接近b的父元素。

所以你最好的選擇可能是利用這里的繼承，例如聲明所有你想設置為css變量的樣式。然后，(仍然假設所有的方向都是通過style = & quot"屬性)，您可以這樣做

[style*=direction][style*=rtl] {
  --rule-1: rtl-value
}
[style*=direction][style*=ltr] {
  --rule-1: ltr-value;
}

[style*=direction][style*=rtl] {
  --rule-1: green
}
[style*=direction][style*=ltr] {
  --rule-1: red;
}

* {
  border: 1px solid var(--rule-1);
}

<body style="direction: rtl;">
  <div class="col-ml-auto">
    some elements following body's direction
  </div>
  ...
  <div class="col-ml-auto" style="direction: ltr;">
    some elements forced to be ltr
  </div>
</body>