我的页面中有以下HTML.
<ul id="detailsList">
<li>
<input type="checkbox" id="showCheckbox" />
<label for="showCheckbox">Show Details</label>
</li>
<li>content ...</li>
<li>content ...</li>
<li>content ...</li>
<li>content ...</li>
<li>content ...</li>
</ul>
我无法更改此HTML.我使用以下CSS隐藏了所有LI,除了第一个
ul#detailsList li:nth-child(1n+2) {
display:none;
}
到现在为止还挺好.我现在要做的是在勾选复选框时使用纯CSS显示隐藏的LI.到目前为止,我最好的尝试是
ul#detailsList li input#showCheckbox:checked + li {
display:block;
}
显然这不起作用,因为+ li只会在复选框之后立即选择LI(即兄弟姐妹),而不是父母的兄弟姐妹.
这甚至可能吗？
var topClick = function() {
child = this.parentNode.parentNode.parentNode.parentNode;
child.parentNode.removeChild(child);
var theFirstChild = document.querySelector(".m-ctt .slt");
data[child.getAttribute("data-id")].rank = 5;
insertBlogs();
};
如您所见,我的代码中有一部分是这样的:
this.parentNode.parentNode.parentNode.parentNode;
有没有其他方法来优化代码(不使用jQuery)？
我可以弄清楚当复选框被选中时如何使父div更改:(更改以下段落工作正常.
在Chrome中尝试了这种没有运气的方法:
HTML
?<div>
<input type="checkbox??????????????????????????????" checked>
<p>Test</p>
</div>???????????????????????????????????????????????
CSS
div {
background: pink;
width: 50px;
height:50px;
}
div + input[type=checkbox]:checked {
background: green;
}
input[type=checkbox]:checked + p {
background: blue;
}
可能重复:
是否有CSS父选择器？
是否有一个css选择器我只能在子元素存在时使用？
考虑:
<div> <ul> <li></li> </ul> </div>
我想display:none只在它没有至少一个子<li>元素时才应用于div .
我可以用的任何选择器都可以吗？
有可能得到父母的父母吗？
我试过& & { }但是没用.
我正在尝试根据它的祖父母来设计一个子元素.
我尝试为R闪亮的一些silderInput栏制作不同的颜色.它需要css等我在线看,只能找到如何制作一个silderInput.如何为不同的条形图创建几种不同的颜色？
这是我的测试代码.它将显示相同风格的所有栏:
ui <- fluidPage(
tags$style(type = "text/css", "
.irs-bar {width: 100%; height: 25px; background: black; border-top: 1px solid black; border-bottom: 1px solid black;}
.irs-bar-edge {background: black; border: 1px solid black; height: 25px; border-radius: 0px; width: 20px;}
.irs-line {border: 1px solid black; height: 25px; border-radius: 0px;}
.irs-grid-text {font-family: 'arial'; color: white; bottom: 17px; z-index: 1;}
.irs-grid-pol {display: none;}
.irs-max {font-family: 'arial'; color: black;}
.irs-min {font-family: 'arial'; color: black;}
.irs-single {color:black; background:#6666ff;}
.irs-slider {width: 30px; height: 30px; top: 22px;} …我在使用Bootstrap中有这个:
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
顶行被选中.
我只想向用户1选择的行显示.
当用户通过使用Javascript向Click-Event添加函数来点击一行时,我可以引发一个事件.
然后我可以将该行设置为活动状态.但会发生的是需要取消选择上一个选定的行.
可以接受的方法是什么？
如何枚举和访问每一行以更改其类设置？
有没有更好的CSS方式来做到这一点？
附加所有这些方法都有效(感谢所有人)但是如果我的页面上有多个选项组,我怎样才能明确删除我正在使用的那个上的活动突出显示的行？
可能重复:
是否有CSS父选择器？
我知道这是一个黑暗中的镜头,但有没有办法,只使用CSS,CSS2,没有jquery,没有javascript,来选择和设计元素的祖先？我已经通过选择器,但我发布这个以防我错过了一些东西或有一个聪明的解决方法.
例如,假设我有一个类名为"test"的表嵌套在div中.有某种形式:
<div>
<table class="test">
</table>
</div>
div (with child) .test
{
/*styling, for div, not .test ...*/
}
我想在Child元素的悬停时更改父级的css.
<ul id="main-menu">
<li>
<a href="#">
<i class="fa fa-building-o" aria-hidden="true"></i>
Private Limited
<i class="fa fa-caret-down"></i>
</a>
<ul class="submenu">
<li><a href="#0">Company</a></li>
<li><a href="#0">Contact</a></li>
<li><a href="#0">Industry</a></li>
</ul>
</li></ ul>
我想要的是如果我徘徊在子菜单的 li上,主菜单的 li 会突出显示.
在处理只有一个所需的悬停效果时,我看到了解决方案,但我希望有四个子div,每个div将主父div的背景更改为单独的图像.
我假设CSS无法实现这一点.
<div id="buttonBox">
<div id="schedBox">
<a href="#">Schedule</a>
</div>
<div id="transBox">
<a href="#">Transformation</a>
</div>
<div id="destBox">
<a href="#">Destination</a>
</div>
<div id="inspirBox">
<a href="#">Inspiration</a>
</div>
</div>
或者,我可以让每个孩子的div都有不同的背景.徘徊一个孩子div将所有子div背景改为单独的颜色,但我无法弄清楚如何在第二个div上悬停影响前一个div ..只有后续的兄弟姐妹.