如何选择<li>作为锚元素直接父元素的元素？
在示例中,我的CSS将是这样的:
li < a.active {
property: value;
}
显然有一些方法可以使用JavaScript来实现这一点,但我希望CSS Level 2本身存在某种解决方法.
我尝试设置样式的菜单正在由CMS喷出,因此我无法将活动元素移动到<li>元素...(除非我主题菜单创建模块,我宁愿不这样做).
有任何想法吗？
可能重复:
是否有CSS父选择器？
有没有办法使CSS选择器匹配以下？
All OBJECT elements
which have a PARAM element inside of them
选择器
OBJECT PARAM
不起作用,因为它匹配PARAM,而不是OBJECT.我想将{display:none}应用于对象; 将它应用于PARAM是没用的.
(我知道我可以用jQuery - $("object param").closest("object")和VanillaJS - 来解决这个问题document.querySelector("object param").closest("object")- 但我正在尝试在页面上创建CSS规则.)
我想申请styles到parent它是否有child元素.
到目前为止,我已经将child元素应用于元素(如果存在).但我想style的parent,如果parent有child,仅使用CSS.
以下是 html
<ul class="main">
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa
<ul class="sub">
<li>bbbb</li>
<li>bbbb
<ul>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
</ul>
</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
</ul>
</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
该css代码
* {
margin:0;
padding:0;
text-decoration:none;
}
.main li {
display:inline-block;
background:yellow;
color:green;
}
.main > li > ul > li {
background:orange
}
.main > li > ul > …我的导航结构如下所示:
<div class="menu">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page with Subpages</a>
<ul class="children">
<li><a href="#">Page with another subpage</a>
<ul class="children">
<li><a href="#">subsubpage</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
我希望所有<li>有子导航孩子的人都有一个小箭头,所以用户知道这个页面有子页面.
是否可以在纯css中检测是否<li>有孩子ul.children？在上面的示例中,"带子页面的页面"应该应用向下箭头,并且"页面带有另一个子页面"也是如此.
现在我正在使用jquery来解决这个问题:
$(function() {
$('.menu a').each(function() {
if ( $(this).parent('li').children('ul').size() > 0 ) {
$(this).append('<span class="dwn">?</span>');
}
});
});
有一种简单的纯CSS方式吗？
谢谢.
我有一个包含多个<tbody>元素的表格.在给定时间,仅<tbody>显示一个,或者显示所有这些.
我目前使用这个CSS3代码来条带化表:
table tr:nth-child(even) {
background: #efefef;
}
当显示单个<tbody>元素时,一切都(显然)很好,但是当显示多个<tbody>元素时,CSS规则分别应用于每个元素,并且每个元素<tbody>都有自己的"条带系统".根据行数的不同,条纹可能看起来也可能看起来不一致.
<tbody>
<tr> [ODD]
<tr> [EVEN]
<tr> [ODD]
</tbody>
<tbody>
<tr> [ODD]
<tr> [EVEN]
</tbody>
…
我是否必须使用JavaScript(... jQuery)来解决这个问题？还是有纯CSS解决方案？
我有一个简单的UL列表,当您将鼠标悬停在More下面的HTML列表项中时,它会取消隐藏它的子菜单并显示它.
我需要做的是在More显示和悬停子菜单后更改实际CSS的CSS.
因此,如果您将鼠标悬停在More子菜单上,则可以将鼠标悬停在该子菜单上.此时我需要更改此子菜单的Parent的CSS,这将是具有More文本的菜单.
如果你知道如何在没有Javascript的情况下做到这一点,我很想知道......如果没有JS可能甚至不可能？
<div id="nav-wrapper">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">More</a>
<ul>
<li><a href="">Sub Link 1</a></li>
<li><a href="">Sub Link 2</a></li>
<li><a href="">Sub Link 3</a></li>
<li><a href="">Sub Link 4</a></li>
<li><a href="">Sub Link 5</a></li>
</ul>
</li>
</ul>
</div>
CSS
<style type="text/css" media="screen">
#nav-wrapper ul {
position:relative;
width: 700px;
float: right;
margin: 0;
list-style-type: none;
}
#nav-wrapper ul li {
vertical-align: middle;
display: inline;
margin: 0;
color: black;
list-style-type: none;
}
#nav-wrapper …我有这个代码:
<div class="thumb_image_holder_orange">
<img src="http://dummyimage.com/114x64/000/fff.png" />
</div>
图像位于div的中间,当我将鼠标悬停在图像上时,如何更改div的背景？
我只知道当我将鼠标悬停在div上时如何更改图像属性.
宁愿不使用jQuery,但不要太在意.
谢谢!
在处理只有一个所需的悬停效果时,我看到了解决方案,但我希望有四个子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 ..只有后续的兄弟姐妹.
我的HTML:
<tr><td>Text</td><td><input type="text" value=""></td></tr>
我的CSS:
input:focus tr{ background-color:#fff;}
我想在输入字段中写入文本时突出显示白色的行.我知道"tr"在"输入"之前,但是这可能以任何方式进行吗？
谢谢一堆
可能重复:
活动子的父级的复杂CSS选择器
是否有CSS父选择器？
有没有办法根据子元素是否具有特定类来设计父类？
<div class="container">
<div class="content1">
text
</div>
</div>
.
<div class="container">
<div class="content2">
text
</div>
</div>
我想.container根据子类是否为content1或者设计第一个content2.它必须是纯css解决方案,没有javascript.