有 CSS 父选择器吗？

Posted 2023-03-06

【中文标题】有 CSS 父选择器吗？

【英文标题】：Is there a CSS parent selector?

【发布时间】：2010-11-04 03:09:59

【问题描述】：

如何选择作为锚元素的直接父元素的<li> 元素？

例如，我的 CSS 是这样的：

li < a.active 
    property: value;

显然有一些使用 javascript 的方法，但我希望有某种解决方法存在于 CSS 级别 2 中。

我试图设置样式的菜单被 CMS 吐出，所以我无法将活动元素移动到 <li> 元素...（除非我为菜单创建模块设置主题，我宁愿不）。

有什么想法吗？

【问题讨论】：

Safari Tech Preview 137 今天介绍了:has() 选择器的第一个实现。

即将推出：chrome!

【参考方案1】：

我会雇用一些 JavaScript 代码来做这件事。例如，在 React 中，当您遍历一个数组时，将另一个类添加到父组件，这表明它包含您的子组件：

<div className=`parent $hasKiddos ? 'has-kiddos' : ''`>
    kiddos.map(kid => <div key=kid.id />)
</div>

然后简单地说：

.parent 
    color: #000;


.parent.has-kiddos 
    color: red;

【参考方案2】：

这是对类似（但我感觉不完全相同）问题的答案，该问题已被关闭以支持该问题，因此我在此处对 How to change the border color when input is checked 进行了回答。

由于无法使用纯 CSS 根据子级的状态来设置父级的样式，因此这个 sn-p 会更改 html，以便紧跟输入元素后有一个空的 span 元素。这个 span 元素什么都不做，直到输入悬停在该点上，它显示自己并扩展以适应与已设置位置的祖先相同的大小。这是标签本身，而不是输入。因此，边框（阴影）就像在标签上一样。

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;


.OuterField 
  display: flex;


.listLabel 
  padding: 8px 5px;
  border: 2px solid black;
  width: 32%;
  margin: 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
  position: relative;


input[type="radio"]~span 
  display: none;


input[type="radio"]:checked~span 
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  box-shadow: 0 0 0 3px orange;
  position: absolute;
  top: 0;
  left: 0;

<div class="OuterField">
  <label for="List1" class="listLabel">List 1
        <input type="radio" id="List1" name="list" value="List1">
        <span></span>
     </label>
  <label for="List2" class="listLabel">List 2
         <input type="radio" id="List2" name="list" value="List2">
         <span></span>
     </label>
</div>

【讨论】：

非常感谢 (+1) 但是如果只有 border 而没有 box-shadow 怎么办。如何居中比，试图改变span标签上的top: -2pxleft: -2pxwidth: 102%height: 112%。它有效，但仅适用于某些屏幕尺寸，并且不会在所有屏幕尺寸的黑色边框上重叠。我是否必须给出绝对值或者也有解决这个问题的方法。再次感谢您的帮助，非常感谢。

找到了一个可以使用width: calc(100% + 4px);height: calc(100% + 4px);和top: -2pxleft: -2px的解决方法

很高兴你有一些有用的东西。是的，很难让一个绝对放置的元素与另一个元素完全位于同一位置，以使细边框之类的东西完全对齐——即使排列是精确的 CSS 方式，底层屏幕像素可能会显示（因为可以是几个屏幕像素到一个 CSS 像素）所以你的解决方案是一个实用的解决方案。

【参考方案3】：

在 CSS 中，我们可以在层次结构中向下级联到属性，但不能在相反的方向上级联。 要修改子事件的父样式，可能使用jQuery。

$el.closest('.parent').css('prop','value');

【讨论】：

问的问题是 CSS 选择器。当然用JS你也可以做到

【参考方案4】：

uBlock Origin 有 :has() - 见https://github.com/gorhill/uBlock/wiki/Procedural-cosmetic-filters

【讨论】：

在为网站编写 CSS 时，基于 JavaScript 的插件 uBlock Origin 有什么好处？

@TylerH 如果您不知道，uBlock 使用 CSS 选择器来定义其修饰过滤器。这个 SO 页面在查找与 uBlock 兼容的 CSS 选择器时匹配的通用结果中排名很高，这个答案很有用:)

@MahmoudAl-Qudsi 使用 uBlock Origin 很有用，但在创建网站时编写 CSS 就不行了，这就是这个问题的意义所在。