我有一堆带有类名的元素red,但我似乎无法class="red"使用以下CSS规则选择第一个元素:
.red:first-child {
border: 5px solid red;
}<p class="red"></p>
<div class="red"></div>这个选择器有什么问题,我该如何纠正？
感谢这些评论,我发现该元素必须是其父母的第一个孩子才能被选中,这与我的情况不同.我有以下结构,这条规则失败,如评论中所述:
.home .red:first-child {
border: 1px solid red;
}<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>我怎样才能让第一个孩子上课red？
有没有办法将css3限制nth-of-type为一个类？我有一些动态数量的section元素,不同的类指定了它们的布局需求.我想抓住每一个第三.module,但它似乎nth-of-type查找类元素类型,然后计算类型.相反,我想将它限制为只有.modules.
谢谢!
JSFiddle演示:http://jsfiddle.net/danielredwood/e2BAq/1/
HTML:
<section class="featured video">
<h1>VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
<h1>NOT A VIDEO (6)</h1>
</section>
CSS:
.featured {
width:31%;
margin:0 0 20px 0;
padding:0 3.5% 2em 0;
float:left;
background:#ccc; …我如何用jQuery 选择下面的第一个<p>元素<div>？
<div>
<h1>heading</h1>
<p>How do I select this element with jQuery?</p>
<p>Another paragraph</p>
</div>
我试图在id或类'B'的元素中选择类'A'的第一个元素.我尝试过> +和first-child选择器的组合,因为它不是类元素'B'中的第一个元素.它的工作,但是...我试图覆盖某些默认的CSS和我有在服务器端没有控制权,它似乎是类"A"元素在不同的位置,有时产生.这是一个例子:
<class-C>
<class-B> might have a different name
<some-other-classes> structure and element count might differ
<class-A></class-A> our target
<class-A></class-A> this shouldn't be affected
<class-A></class-A> this shouldn't be affected
</class-B>
</class-C>
有时,"B"类的名称不同,"A"之前的元素也不同.那么有没有办法在元素'C'中选择第一个'A'？因为'C'级总是在那里.我不能使用+>和第一胎选择,因为"A"元素不同的路径,第一,但元素"C"是永远存在的,这将是一个很好的起点.
我应该疯了吗？
.project.work:first-child:before {
content: 'Projects';
}
.project.research:first-child:before {
content: 'Research';
}<div class="project work">
<p>abcdef</p>
</div>
<div class="project work">
<p>abcdef</p>
</div>
<div class="project work">
<p>abcdef</p>
</div>
<div class="project research">
<p>abcdef</p>
</div>projects:first-child工作正常,research:first-child不坚持.有任何想法吗？
演示它不起作用,但最好的方法是什么？
我正在为图像库制作一个简单的HTML.图库的每一行都可以有2,3或4个图像.(在一个2图像行中,每个图像元素都被命名type-2,同样的type-3和type-4.)
现在我想选择每行的最后一个元素来设置自定义边距.我的HTML是这样的:
<div id="content">
<div class="type-2"></div>
<div class="type-2"></div> <!-- I want this, 2n+0 of type-2 -->
<div class="type-3"></div>
<div class="type-3"></div>
<div class="type-3"></div> <!-- this, 3n+0 of type-3 -->
<div class="type-4"></div>
<div class="type-4"></div>
<div class="type-4"></div>
<div class="type-4"></div> <!-- this, 4n+0 of type-4 -->
<div class="type-2"></div>
<div class="type-2"></div> <!-- this -->
<div class="type-3"></div>
<div class="type-3"></div>
<div class="type-3"></div> <!-- this -->
<div class="type-4"></div>
<div class="type-4"></div>
<div class="type-4"></div>
<div class="type-4"></div> <!-- this -->
</div>
我认为以下CSS可以工作,但它没有:
.type-2:nth-of-type(2n+0) {margin-right:0;}
.type-3:nth-of-type(3n+0) …我得到以下标记：
<div>
<p class="active"></p>
<p></p>
<p class="active"></p>
<p></p>
</div>
有一次我得到了这个标记：
<div>
<p></p>
<p></p>
<p class="active"></p>
<p></p>
</div>
现在我想设置活动类的样式，但前提是 div 中只有一个活动类。如果有多个活动类，它们应该具有不同的样式。就像是：
div .active{
color: red;
}
div .active:only-child{
color:green;
}
有没有办法不用js实现这个？只有CSS？
谁能告诉我为什么我桌子的第二排没有灰色背景？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.phone td {background:blue; color:white;}
.phone:first-of-type td {background:grey;}
</style>
</head>
<body>
<table>
<tbody>
<tr class="email"><td>Row</td></tr>
<tr class="phone"><td>Row</td></tr>
<tr class="phone"><td>Row</td></tr>
</tbody>
</table>
</body>
</html>
说我有这个标记:
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
现在这些div在标记中不一定是彼此相邻的,但可以在整个页面中传播.
我是否可以仅使用CSS定位第一次出现的类"当前",我最好避免使用javascript(现在)？
IE浏览器.
.current:first-child {
background: red;
}
使用 Chrome 开发工具
jQuery('.proejct-text-field')
给我四个 HTML 元素实例：
<div class=".proejct-text-field ...">...<>
<div class=".proejct-text-field ...">...<>
<div class=".proejct-text-field ...">...<>
<div class=".proejct-text-field ...">...<>
尝试以下不会返回任何元素。
jQuery('.proejct-text-field:nth-of-type(1)')
至于我的理解，应该返回第一个元素。我只是使用 jQuery 来为我的目的找到正确的选择器并将它们放入我的 css 文件中。那么如何选择这些 Div 的第一个 Elment。顺便说一句：它们没有被包装到某个父元素中。所以任何子方法都不起作用。此外，div 的数量是可变的。
我正在尝试抓取此页面
我的汤选择器是：
test = soup.select('#bodyContent > #mw-content-text > table.wikitable:nth-of-type(4)')
这应该返回＃cmw-content-text的第四个子表。
但它返回一个空列表。
但是如果我查询：
test = soup.select('#bodyContent > #mw-content-text > table.wikitable')[3]
我得到相同的选择器。
我在实施过程中缺少什么？