如何用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)
但没有人工作,我做错了什么?我也尝试了>选择器.
我有标签包装输入的原因是因为我需要标签可点击
目标是使用以下方式影响父div框:hover via child div box.
这就是我所做的,它不起作用.HTML:
<body>
<div id=Parent-box>
<div id=Child-box></div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
CSS:
#Parent-box{
width: 750px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
border: 1px solid #000;
position: relative;
}
#Child-box{
z-index: 1;
width: 700px;
height: 350px;
margin-left: 25px;
margin-top: 25px;
position: absolute;
background: #339;
border: 1px solid #000;
transition: all 200ms linear;
}
#Child-box:hover{
height: 600px;
transition: all 200ms linear;
}
#Child-box:hover + #Parent-box{
height: 650px;
transition: all 100ms linear;
}
Run Code Online (Sandbox Code Playgroud)
有谁知道这是否可能?
谢谢 :)
我正在尝试编写一些简单的 jQuery 来bl3在blc3单击类时显示类。我已经让它在点击一个类bl3时显示每个类blc3,但我希望它只打开bl3与 clicked 相关的特定内容blc3。
HTML :
<div class="product pro">
<img class="product-img pro" src="'.$product[" imagesrc "].'"/>
<div class="product-actions pro">
<div class="info-block pro bl3" style="display:none;">
<div class="product-title pro">Ships to:</div>
<div class="product-description pro">Days:</div>
<div class="product-sale pro">UK</div>
<div class="product-prize pro">7</div>
<div class="button-buy pro">Buy now</div>
<div class="add pro">Add</div>
</div>
</div>
<div class="nav titlen pro">TESTING</div>
<div class="nav pro boxp">
<ul>
<li class="active blc1"><span class="icon-tag f15"></span> '.$product["price"].'
<br>
</li>
<li class="blc2"><span class="icon-time f15"></span> '.$product["stime"].' …Run Code Online (Sandbox Code Playgroud) 我试图将CSS样式应用于父元素,如果它具有指定的子元素.根据这份文件,它是可能的:http://dev.w3.org/csswg/selectors-4/#relational
因此,当我将其放入代码中时,它似乎不起作用:https://jsfiddle.net/2rabacg7/
怎么没用呢?
HTML
<div class="outter">
<div class="yes-color">
text
</div>
</div>
<br/>
<div class="outter">
<div class="no-color">
text
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
.outter:has(> .yes-color) {
background-color: red;
}
Run Code Online (Sandbox Code Playgroud) 如果父 div 不包含任何子 div,如何在父 div 上设置不显示(或添加 css 样式)?Child div 是由系统动态附加的,所以我们需要在 parent 上设置一个 css class,当里面没有 child 时。任何jquery想法?
我有一个支持CSS/bootstrap 3.2的环境,但是没有javascript.我正在尝试使用纯CSS选择器+ HTML实现列表过滤解决方案.
假设,HTML列表元素中有2个项目.我想只显示与输入元素中输入的文本匹配的那些.
<form>
<ul>
<li class ="c1">c1</li>
<li class="c2">c2</li>
</ul>
<input type="text">
</form>
Run Code Online (Sandbox Code Playgroud)
如果我输入c1文本框,那应该只显示第一个项目.这甚至可能使用纯css,没有JS?
我希望选择 ( :checked) 有不同的背景颜色。
这是我的示例代码:
label {
display: block;
background: gray;
border:1px solid black;
margin-bottom:5px;
padding:10px;
cursor: pointer;
}
label + [type="checkbox"]:checked {
background: yellow;
}Run Code Online (Sandbox Code Playgroud)
<div class="poll">
<label class="a"><input type="checkbox" /> Yes</label>
<label class="a"><input type="checkbox" /> No</label>
</div>Run Code Online (Sandbox Code Playgroud)
我的问题涉及:设计调查表
还要考虑输入在 DOM 中预设但隐藏的情况,因此标签仍然可单击并切换它。
当您将鼠标悬停在另一个div标签上时,是否可以更改div标签的属性?
例如,
#tag1 {
/* properties */
}
#tag1 a:hover {
/* new properties */
}
#tag2 {
/* contains a link */
}
Run Code Online (Sandbox Code Playgroud)
其中tag1经历了更改,但tag2包含悬停发生位置的位置(或链接).