我正在使用jquery插入从服务器进入div的html.基于div内容我想调整容器的syle.我写了一个简单的html测试.如何在有X子的情况下告诉css应用此网站？谷歌搜索后,我尝试:has和:包含既没有工作.我不想把我的风格保留在JS中,因为css更有意义.
HTML
<div id="a"><div id="b">B</div></div>
<div id="a"><div id="c">C</div></div>
CSS
#a { height: 400px; border: 1px solid red; }
#b { height: 200px; }
#a :has #b { height: 300px; border: 1px solid blue; }
我知道我可以在聚焦的输入元素上设置一个样式,如下所示:
input:focus
{
background-color:yellow;
}
但是,当输入具有焦点时,是否可以在父元素上设置样式？例如
<div class="foo">
<input type="text />
Hello
</div>
输入有焦点时,我可以影响"foo"样式吗？
编辑:影响父元素的可能重复:focus'd元素(纯CSS + HTML首选)
但是,有人可以解释这是如何工作的吗？
我的客户想要每个链接列表,即表单的每个列表
<ul>
<li>
<a href="www.google.com">Here's a link</a>
</li>
<li>
<a href="www.google.com">Here's a link</a>
</li>
<li>
<a href="www.google.com">Here's a link</a>
</li>
</ul>
使列表的项目符号与链接文本的颜色相同,但是每个非链接列表,即表单的每个列表
<ul>
<li>Here's a regular list item</li>
<li>Here's a regular list item</li>
<li>Here's a regular list item</li>
</ul>
应该像往常一样继承子弹和相应的文本.
小提琴:http://jsfiddle.net/0kkc2rz4/
我对不能够添加类到限制HTML,所以像
<ul class='link-list'>
<li>
<a href="www.google.com">Here's a link</a>
</li>
<li>
<a href="www.google.com">Here's a link</a>
</li>
<li>
<a href="www.google.com">Here's a link</a>
</li>
</ul>
ul.link-list li { color: #004E98; }
是不可能的,虽然我意识到如果我从头开始编码网站,这显然是最好的方法.我可以添加JS,但不愿意.
我正在学习 CSS 并试图找出一种方法，当您将鼠标悬停在页面上的标题元素上时，使正文的背景颜色发生变化。我试图使用每个选择器，但它不起作用！谁能帮我找出我的问题？这是我的代码：
<html>
<style>
#header {
text-align: center;
position: relative;
}
#header:hover ~ .body{
background-color: blue;
}
.body{
background-color: purple;
}
</style>
<body class="body">
<div id="header">
<font size="16">My Header</font>
</div>
</body>
</html>
所以我有一个盒子：
<div class="box">Box</div>
有时这个盒子可能会被包裹在 a 标签中：
<a href="#"><div class="box">Box in an A tag</div></a>
LESS 中有没有一种方法可以专门针对作为 父级的 A 标签.box？
例如
a {
color: red;
}
a [that is a parent of .box] {
color: blue;
}
我有以下字符串,我想使用css选择器忽略字符串中的强标记:
<p><strong>Local:</strong><br>
-Brasília/DF </p>
我尝试了以下语法,但它不起作用.
p:not(strong)
我哪里错了？
例如,假设我有一个类似下面的HTML.我没有选择ul的父元素吗？
ul
margin: 50px
ul.test
li hello
li how are u
我有一个包含组的列表,并使用CSSOM使用文本字段动态过滤内容.这是一种仅使用CSS实现"搜索"的方法.
不幸的是,当过滤器过滤掉所有内容时,组容器仍然可见.我还需要以display: none某种方式使用CSS 设置它们,否则我需要添加一堆JS来控制它们.
这远程可能吗？我知道这是一个很长的镜头,但是有一个选择器可以选择其子项(适合一些选择器)所有必须选择它们的样式的元素吗？
如果我大大放松约束,甚至可能是一个选择器来选择其子项(适合某些选择器)所有必须具有特定类的元素,它是否可能？
可能重复:
是否有CSS父选择器？
嗨!
我正在尝试选择特定节点(具有特定className)的父节点来为其应用一些CSS样式.
据我所知,只有子元素,后代,跟随节点等的CSS3选择器操作数...因此只有DOM文档中的一些"前向"选择是可能的.当选择器应用于DOM文档中的某个部分时,始终选择选择器描述的最后一个元素.我错了吗？希望如此!
如何选择<div>以下示例中的第一个元素？假设可能存在很多其他<div>s包含<p>s而我只想选择<div>包含p.foo但不包含的s p.bar.请注意,我想选择<div>而不是<p>!
<div>
<h1>Test</h1>
<p class="foo">Some text</p>
</div>
<div>
<h1>Test 2</h1>
<p class="bar">Some other text</p>
</div>
提前致谢!
可以将伪类应用于子元素。
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
将该伪类应用于父母或父母怎么样？例如到 DIV 元素？如何编写我的 CSS 代码？我的输入已经在页面加载时“检查”过，所以我只需要添加样式。
<div>
<label for="ossm">
<input type="checkbox" id="ossm" name="ossm" checked>
</label>
</div>