CSS 选择具有内联和/或父样式（或类）的元素

问题描述 投票：0回答：1

我有一个这样的文件：

<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}

它选择普通元素，但内联方向没有效果。

我可以使用以下语法选择内联定向元素：

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

它选择内联定向元素，但不选择父定向元素，那么如何处理两者？

css css-selectors pseudo-class direction
1个回答
0
投票

你不会有一个基于CSS可以设置的选择器，这会创建一个循环。例如，如果我们有一个假设的 

:direction()
伪选择器，它对 CSS 设置的方向敏感，那么像 
:direction(ltr) { direction: rtl; }
这样的规则会阻止引擎。

但是，即使你所有的方向规则都是在内联 

style=""
属性中设置的，并且即使你确定你将 never 拥有类似 
style="direction:rtl; direction: ltr;"
的东西，我怀疑你会找到一个能够区分最接近父级匹配 A 的元素以及最接近 B 的元素。

因此，最好的选择可能是在这里利用继承，例如将要设置的所有样式声明为

--css-variables
。然后，（仍然假设所有方向都是通过 
style=""
属性设置的），你可以做类似的事情

[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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.