如何选择作为锚点元素的直接父级的 <li>
元素?
例如,我的 CSS 如下:
li < a.active {
property: value;
}
很明显可以用JavaScript做到这一点,但我希望存在CSS Level 2本身的解决方法。
我正在尝试样式化的菜单是由CMS生成的,所以我不能将活动元素移动到<li>
元素中...(除非我主题化菜单创建模块,但我宁愿不这样做)。
如何选择作为锚点元素的直接父级的 <li>
元素?
例如,我的 CSS 如下:
li < a.active {
property: value;
}
很明显可以用JavaScript做到这一点,但我希望存在CSS Level 2本身的解决方法。
我正在尝试样式化的菜单是由CMS生成的,所以我不能将活动元素移动到<li>
元素中...(除非我主题化菜单创建模块,但我宁愿不这样做)。
没有CSS(也就是CSS预处理器)的父选择器,这是因为“CSS工作组以前拒绝父选择器提案的主要原因与浏览器性能和增量渲染问题有关。”
<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
{kiddos.map(kid => <div key={kid.id} />)}
</div>
.parent {
color: #000;
}
.parent.has-kiddos {
color: red;
}
* {
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>
border
没有box-shadow
,该怎么居中呢?尝试在span
标签上更改top: -2px
、left: -2px
、width: 102%
、height: 112%
。它可以在某些屏幕尺寸上工作,但不会在所有屏幕尺寸上重叠黑色边框。我必须给出绝对值吗?还是有其他方法解决这个问题?再次感谢您的帮助,非常感激。 - Ranawidth: calc(100% + 4px);
height: calc(100% + 4px);
与 top: -2px
left: -2px
。 - Rana
:has()
选择器的实现。 - TylerHel.parenteElement.parenteElement...
一致的工作方式,比如a:active:parent:parent
或者甚至是a::active::parent::parent
,用两个分号。这不仅更符合现有伪类的逻辑,而且更易于使用和链接,以便在需要时向上多级。我真的希望有这种实现,因为我真的很讨厌使用:has(something)
:它既没有逻辑性,也没有直观性和人体工程学可用性。JavaScript 的方式更好,远胜于 :has()。 - willy wonka