使用生成以下内容的CMS:
<ul class="list-unstyled">
<li>content 1</li>
<li>content 2</li>
</ul>
<ul class="list-unstyled">
<li>
<span>content 3</span>
</li>
<li>
<h2>content 4</h2>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我想选择"内容4".有许多<ul>标签,类"list-unstyled".有没有办法选择.list-unstyled > li > h2李有兄弟姐妹的地方li > span
这是不必要的,所以我不仅仅选择内容4.有可能.list-unstyled > li > h2在另一个地方有一个但没有兄弟姐妹li > span
希望我清楚自己
代码说明胜于文字
<div class="parent">
<span class="child"></span>
</div>
<div class="outside"></div>
Run Code Online (Sandbox Code Playgroud)
我想做的事
.child:hover ? .outside { }
Run Code Online (Sandbox Code Playgroud)
?我要寻找的选择器在哪里
我的 Angular 2 Dart 应用程序有许多嵌套组件。如果我的组件之一的某个属性设置为 true,则会显示一个弹出窗口。
如果显示此弹出窗口,我想向文档正文添加一个类。
伪代码示例:
<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
原因很简单:如果显示弹出组件,我想禁用正文滚动 ( overflow-x:hidden;)。bool show_popup如果其中的属性popup_component.dart设置为 true,则会显示弹出组件。
不幸的是,在 CSS 中 - 据我所知 - 没有选择器来检查这个(是否有 CSS 父选择器?) - 否则我会说类似的话
body:has(.my_popup)
Run Code Online (Sandbox Code Playgroud)
在 main.css 文件或类似的文件中。
我怎样才能达到预期的结果?
我在React中使用refs或事件处理程序看到了这个问题的一些繁琐的解决方案.我想知道在样式组件中是否有解决方案.
以下代码显然不正确.当我的输入子组件具有焦点时,我正在尝试找出设置父组件的最简单方法.这可能是使用样式组件吗?
什么是最好的方法,特别是考虑到样式组件,即使它意味着依赖于上面提到的React方法之一?
const Parent = () => (
<ParentDiv>
<Input/>
</ParentDiv>
);
const ParentDiv = styled.div`
background: '#FFFFFF';
${Input}:focus & {
background: '#444444';
}
`;
const Input = styled.input`
color: #2760BC;
&:focus{
color: '#000000';
}
`;
Run Code Online (Sandbox Code Playgroud) 现在我正在开发一个应用程序。我一直在纠结如何选择孩子的父母。
我想做的是单击子项(卡)并与父项(单元格)一起执行某些操作。
有没有一种方法可以查询父项的选择器,例如
const selectedParentFromChild = document.querySelector(".child .parent")
解决方案:
对于那些也曾陷入困境的人。您可以像@Phix 在下面的评论中提到的那样使用parentElement 。
我一直在努力做到这一点......基本上我有以下HTML设置:
<div class="box10">
<span class="label01">Name:</span>
<input class="tboxes" type="textbox" />
</div>
Run Code Online (Sandbox Code Playgroud)
"span.label01"是一个内联元素,显示在文本框"input.tboxes"的左侧.当文本框获得焦点时,我正在尝试将一些样式附加到"span.label01"和"div.box10".
我尝试了以下CSS代码:
input.tboxes:focus span.label01 {
color:#FF9900;
...
}
Run Code Online (Sandbox Code Playgroud)
但没有任何反应.我知道这是一个CSS选择器问题,但我似乎无法做到正确.我甚至尝试过相邻的兄弟选择器,什么都没有.有人能帮我一下吗?TIA!
如何用CSS选择likebtn容器?

我尝试了几种组合,例如"#meta #likebtn {}"或"#likebtn {}",但它没有用.为什么这样做?
如果我有一个包含在标签内的无线电输入,那么在检查输入时如何定位标签?
<div>
<p>Payment Plan:</p>
<label><input name="os0" type="radio" value="monthly">TEST</label>
</div>
Run Code Online (Sandbox Code Playgroud)
我试过了:
input:checked + label { color: red }
Run Code Online (Sandbox Code Playgroud)
和
input:checked + label
Run Code Online (Sandbox Code Playgroud)
但没有人工作,我做错了什么?我也尝试了>选择器.
我有标签包装输入的原因是因为我需要标签可点击