标签: pseudo-class
如何获取不包括孙子元素的所有子元素
见这里：http : //jsfiddle.net/QVhAZ/4/
我如何使用*但仅适用于直接儿童？在这个例子中，我希望它只适用于 "Child" divs，而不是 "Grandchild (should not be red)" divs。
我不想为每个“孩子”应用一个类div，我想说的是：
div#Root *:depth(1)
{
color: red;
}
推荐指数
解决办法
查看次数
CSS 特定 id 伪类的属性？
任何人都知道如何将 css 属性应用于 a 标签，但仅当它在某个 div 中时？我希望 .router_li div 具有悬停效果，但具有任何其他链接。我不确定这叫什么。
我认为它被称为伪类，我做得不对。我试过这个：
a:router_li:hover{
background-color:yellow;
width: 200px;
height: 60px;
background-color: #2c5fac;
border: 1px;
border-color: #FFFFFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-style:solid;
border-width:1px;
color: white;
}
推荐指数
解决办法
查看次数
为什么CSS部分:only-child选择器不起作用？
我只是搞乱了新的HTML5标签和伪选择器,并注意到部分:only-child选择器似乎不起作用.我在最新版本的Chrome(23.0)上测试了这个.
我的代码是:
<section id="s1">
<div id="div1">abc</div>
<div id="div2">
<span>first span</span>
<span class="sp">second span</span>
</div>
</section>
<section>
<div>first child test</div>
</section>?
而CSS是:
section {
background-color: brown;
width: 400px;
height: 200px;
}
#s1 {
position: relative;
background-color: rgba(0,255,0,0.5);
border: 1px solid #000; width: 50%;
}
#div1 {
background-color: #0f0;
position: relative;
}
#div2 {
background-color: #0ff;
width: 200px;
color: red;
}
#div2 .sp {
color: white;
text-decoration:line-through;
}
section:only-child {
color: yellow;
}?
理论上,文本"第一个子测试"应该是黄色的,因为第二部分只有一个div,但它没有获得字体的黄色.
如果我将选择器更改为div:only-child,它将正常工作.
你可以在这里看到jsfiddle:http://jsfiddle.net/KwzZs/3/
为什么这不起作用？
谢谢
推荐指数
解决办法
查看次数
为什么CSS:不是伪类不能按预期工作？
请考虑以下HTML:
<div class="a">
<div class="b">Hello</div>
</div>
<div class="c">
<div class="b">World</div>
</div>
正如预期的那样,将以下CSS颜色仅添加为红色的"World":
.c .b {
color: red;
}
但是,添加以下CSS会将"Hello"和"World"颜色改为红色:
:not(.a) .b {
color: red;
}
为什么？
推荐指数
解决办法
查看次数
CSS可以将字符串转换为整数吗？
我attr(data-width)过去data-width常常从 some获取 -属性list-item。我尝试使用这些值来设置该元素的宽度。
问题是 css 不能将字符串处理为width/ height-value。例如：
<foo data-width='100%'></foo>
/* can not work */
foo {
width: attr(data-width)
}
所以我需要将值从data-attribute 转换为整数（+unit）。
这有可能吗？
推荐指数
解决办法
查看次数
css 将样式应用于除最后一行之外的所有元素
我有一个产品类别页面，每行 3 个产品。我希望每一行都有一个边框底部，除了最后一行。这应该没有边框底部。最后一行可能包含 1、2 或 3 个<li>元素。
我正在使用的当前代码将 border-bottom 属性应用于每个第三个<li>元素，这不是我想要的。
CSS：
.products li {
width: 33.33333%;
}
.products li:nth-child(3n){
border-bottom: 1px rgba(51, 51, 51, 0.1) solid;
}
.products li:nth-child(2-PREVIOUS-SIBLING-ELEMENTS){
border-bottom: 1px rgba(51, 51, 51, 0.1) solid;
}
HTML：
<ul class="products">
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
<li>Product</li>
</ul>
推荐指数
解决办法
查看次数
滚动到页面中其他 div 锚点时如何更改导航文本颜色
好吧，我一直在尝试寻找答案并测试了几个小时，但没有成功。我在这里或通过我自己的尝试和错误找不到正确的答案，所以如果这是重复的，请原谅我。这是我需要帮助的内容：当我滚动到页面的其他部分时，我试图更改导航文本颜色。因此，如果我滚动到 #firstpane id/div，导航栏中的“关于”文本将是黑色的。当 #secondpane id/div 在导航栏上滚动时，“技能”文本将为黑色。当滚动到 #thirdpane id/div 时，导航栏中的文本“联系人”将变成黑色。这就是我在这里想要完成的事情。
有谁知道如何使用纯 css 或 javascript（不使用 jQuery）来解决这个问题？我知道如何在 jQuery 中执行此操作，但在本例中无法使用它，所以请不要建议使用 jQuery 进行指导。
谢谢。
body {
background-image: url("images/someTree.jpg");
background-size: cover;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
width: 100%;
height: 85px;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
z-index: 1000;
background-color: #96C339;
}
header h1#logo {
display: inline-block;
float: left;
font-family: "Monsterrat", sans-serif;
font-size: 40px;
color: #FFF;
font-weight: 400;
margin-left: 35px;
}
header nav {
display: inline-block;
float: right;
}
header nav a …推荐指数
解决办法
查看次数
css伪类
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>How to Write a Good Report</title>
<style type="text/css">
div.weather strong:first-child {color:red;}
</style>
</head>
<body>
<div class="weather">
It's <strong>very</strong> hot and <strong>incredibly</strong> humid.
</div>
</body> </html>
为什么只有"非常"是红色,而"令人难以置信"不是因为它们都是"div.weather strong"指定元素的第一个孩子？
推荐指数
解决办法
查看次数
如何使用伪类来选择除第一个和最后一个之外的所有子项？
在CSS中,对于下面显示的示例,如何使样式应用于所有段落,第一段和最后一段除外？
<div class="entry">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
我已尝试以下方法排除第一段,但这不起作用:
div.entry p:nth-child(n+1) {
/* ... */
}
我也试过nth-of-type()和not(),但不能让他们工作,我认为他们会的方式.
编辑:我已经决定将<p>我想要应用该样式的所有s 包装在一个<div>.我接受了bozdoz的答案,因为它最接近解决原始问题(即使它只解决了一半).
推荐指数
解决办法
查看次数
斑马条纹嵌套列表与CSS
使用:nth-child(odd/even)伪类对交替背景的列表和行进行样式很容易,但如果您尝试将其应用于嵌套列表,则它开始看起来很可怕.
我的问题是,有没有办法按深度/层次结构交替,例如,父颜色与子元素无限期交替.例如:
- 红色
- 蓝色
- 蓝色
- 红色
- 红色
- 蓝色
- 红色
- 蓝色
推荐指数
解决办法
查看次数