如何同时使用:before和:nth子级选择器
同时使用:before和:nth子级选择器可以实现更精确的样式选择。:before伪元素用于在选定元素的内容前插入一个子元素，而:nth子级选择器用于选择指定位置的子元素。
具体使用方法如下：
- 首先，使用:before伪元素为目标元素添加一个子元素。可以通过设置content属性来定义子元素的内容，也可以通过设置其他样式属性来定义子元素的样式。
示例代码：
.target:before {
content: "Before content";
/* 其他样式属性 */
}- 然后，使用:nth子级选择器选择目标元素的指定位置的子元素。:nth子级选择器的参数可以是数字、关键词或公式，用于指定子元素的位置。
示例代码：
.target:nth-child(2) {
/* 样式属性 */
}综合使用:before和:nth子级选择器的示例代码如下：
.target:before {
content: "Before content";
/* 其他样式属性 */
}
.target:nth-child(2) {
/* 样式属性 */
}这样，目标元素的前面会插入一个子元素，并且目标元素的第二个子元素会应用指定的样式。
使用:before和:nth子级选择器的优势是可以更精确地选择和定位元素，实现更灵活的样式控制。它们可以应用于各种场景，例如在列表中为特定位置的元素添加特殊样式，或者在表格中为某一列的单元格添加特定样式。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云前端开发服务：https://cloud.tencent.com/product/fe
- 腾讯云后端开发服务：https://cloud.tencent.com/product/baas
- 腾讯云数据库服务：https://cloud.tencent.com/product/cdb
- 腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
- 腾讯云云原生服务：https://cloud.tencent.com/product/tke
- 腾讯云网络通信服务：https://cloud.tencent.com/product/vpc
- 腾讯云网络安全服务：https://cloud.tencent.com/product/ddos
- 腾讯云音视频服务：https://cloud.tencent.com/product/tiia
- 腾讯云多媒体处理服务：https://cloud.tencent.com/product/mps
- 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
- 腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发服务：https://cloud.tencent.com/product/mob
- 腾讯云存储服务：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙服务：https://cloud.tencent.com/product/vr
相关·内容
我正在使用BEM，请解释如何选择内部的nth子元素.
我试过以下格式，但对我不起作用
<div class="bookearly-container" >
<div class="row bookearly-container__row">
<div class="col-xs-12 col-md-4 bookearly-container__col">
<div class="bookearly-container__discountcontain
浏览 1提问于2018-10-04得票数 4
回答已采纳
4回答
在一节中选择第一篇文章
、、、
我有这个html：
<section id=mainContent">
<h2>Lorremis</h2>
<article class="one"></article>
<article class="two"></article>
<article class="three"></article>
<article class="four"></art
浏览 5提问于2014-04-11得票数 1
回答已采纳
我需要在包含background-color: #a1c642的最后一个li:after元素中应用@roll动画。我该怎么做呢？
@-moz-keyframes roll {
0% { width:0; }
100% { width:100%; }
}
@-webkit-keyframes roll {
0% { width:0; }
100% { width:100%; }
}
.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
content: c
浏览 0提问于2019-02-07得票数 0
1回答
我正在构建一个基于selenium的测试应用程序，使用CSS选择器或XPath字符串，并尝试测试出现在悬停状态下的菜单项。在Chrome和FireFox中使用“检查元素”，通过右键单击，可以验证正确的html是否高亮显示，但当我复制CSS或XPath时，它有时会选择多个元素。例如：
"#myId > li:nth-child(2) > a"
这是Chrome给我的东西，但它代表了DOM中的13个元素(每个元素位于不同的子菜单中)。我需要的选择器是选择器结果的第九个元素：
$("#myId > li:nth-child(2) > a")[9
浏览 3提问于2014-07-30得票数 3
回答已采纳
2回答
内容未显示前的IE8
、、、
这是指向违规页面的链接：
我使用的表单构建器有一个限制。无法插入文本，除非它是文本框、输入框等的标签。IE9、Firefox、Safari和Chrome都能正确显示。IE7没有支持，而IE8有限制。
因此，我尝试使用:before伪选择器插入副本。对于IE8及以下版本，我使用的是谷歌的javascript。这适用于IE7，而不适用于IE8
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></s
浏览 2提问于2012-10-09得票数 1
回答已采纳
我想知道怎样才能得到一个孩子的价值。我有这个..。
<table id="table4">
<tr>
<td>Id:</td>
<td>Name:</td>
</tr>
<tr>
<td>1515</td>
<td>Thiago</td>
</tr>
</table>
在Jquery中，我想做这样的事情...
var
浏览 0提问于2010-12-23得票数 1
回答已采纳
我和htmlAgilityPack一起醒来，正在从一个网站上抢一张桌子。
如何将其修改为只返回每一行、每二列的值。
public static void SearchAnimal(string param)
{
string prm = param;
string url = "http://xxx/xxx.action?name=";
//HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url+prm);
浏览 0提问于2014-09-26得票数 1
回答已采纳
1回答
我尝试过许多不同的方法来添加文本到这个关键帧动画，但问题是，当我包含包含文本的div时，它会破坏其中一个动画。理想情况下，我希望文本是中间和顶部或中间和左上角，但当我到达那里，它抛出了动画中的最后一个跨度。如何编辑类等待文本，使其不干扰动画？
HTML
<div class="main-loading" ng-show="mainloading">
<div class="waitingtext">My text</div>
<span class="mai
浏览 5提问于2014-06-11得票数 0
回答已采纳
2回答
我有以下标记：
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>three</li>
</ul>
<ul>
<li>four</li>
</ul>
</div>
我想写“一”和“三”。
然而，标记也可
浏览 2提问于2013-07-15得票数 10
回答已采纳
我正在使用图表，我需要将一些数据发送到重复出现的第二个元素。例如，每个"ct-series“元素中都有两个"ct-bar”元素。我需要选择包含在每个"ct-series“元素中的第二个"ct-bar”元素。我尝试过使用for循环和其他一些方法来做这件事，但都无济于事。我如何才能做到这一点？ JS const series = xChart.querySelectorAll('.ct-series .ct-bar')
for (var i = 0; i < series.length; i++) {
浏览 29提问于2020-12-31得票数 0
回答已采纳
2回答
如果我有以下HTML：
<div class="list">
<div class="item">First</div>
<div class="item">Second</div>
<div class="item">Third</div>
</div>
<div class="list">
<div><div class="item">
浏览 0提问于2015-04-10得票数 1
3回答
<div class="parent">
<div class="child-class">
<div>
<div class="child-class">
<div>
<div class="child-class">
<div>
</div>
我需要使用jQuery向第二个child-class添加一个类
浏览 16提问于2017-12-11得票数 0
我有一个结构：
<div id="outer">
<div> <!-- first div -->
<div> <!-- second div -->
</div>
</div>
</div>
我希望将样式应用到第一和使用E > E:nth-child(n)模式的第二div。但它不适用于第二代 div，只适用于first one。
/* this works */
#outer > div:nth-child(1) {
浏览 5提问于2012-11-21得票数 0
回答已采纳
我很难使用<td>方法给每个nth-chid()提供不同的内容(在我的例子中是图标)。
如果我要添加这个CSS规则，我会在每个<td>上看到一种类型的图标：
.help-block .css-context-explorer-orientation-widget td:before {
font-family: icons;
content: "\e04f";
position: absolute;
}
在这个阶段，我想覆盖上面的规则，但是我没有看到任何变化，所有的图标都是一样的。
.help-block .css-context
浏览 3提问于2015-09-21得票数 3
回答已采纳
为什么:nth-child(2)也会改变<body>的颜色？如果设置为1或3，则不会发生这种情况。
代码():
body {
font-size: 50px;
text-align: center;
}
div {
width: 30px;
height: 30px;
background-color: red;
}
:nth-child(1) {
background-color: blue;
}
:nth-child(2) {
background-color: green;
}
:nth-child(3) {
background-col
浏览 4提问于2016-04-12得票数 2
回答已采纳
3回答
我读过和
我想我必须把这个效果应用到<h1>标签的第一个子标签上，但是我无法让它起作用。因此，我尝试使用nth-child，但仍然没有运气。
<section>
<article>
<h1>Test Details</h1>
<ul>
<li>Layer This</li>
<li>Layer That</li>
<li>Layers</li>
浏览 0提问于2014-09-09得票数 17
回答已采纳
无论元素的类型如何，我都希望选择最后一个嵌套元素。
示例：
<section>
<div></div>
<p></p>
<div></div> <-- I want this element
</section>
<section>
<div></div>
<p></p>
<a></a> <-- I want this element
</se
浏览 1提问于2016-09-07得票数 11
回答已采纳
2回答
我有一个div。在该div中，我有一个包含2行的表。在第二行，我有一个单一的td。在td中，我首先有一个img，而不是一个跨度，而不是另一个跨度，最后是另一个img。我想通过css选择第一个跨度，并给它一个红色。下面是我的代码。不幸的是，它不起作用。希望有人能帮上忙。提前感谢您的回复。干杯。马克。顺便说一句，html结构可能看起来很愚蠢。我同意。我只是简化了一下，使讲课轻松一些。所以不需要对代码进行注释。
<div id="myDiv">
<table cellspacing="0">
<tr>
浏览 0提问于2012-02-13得票数 8
回答已采纳
2回答
我正在开发一个有点复杂的侧边栏菜单，它是基于最新的推特启动3 Accordion。该菜单有项目，其中包含子菜单与项目，我想要不同颜色的项目背景为偶数和奇数元素。
您可以在这里看到我的示例：
我设法用这个css部分来着色手风琴/面板上的偶数和奇数元素：
.panel-default:nth-of-type(odd) .panel-heading{
background: #ffffff !important;
}
.panel-default:nth-of-type(even) .panel-heading{
background: #5bc0de !important;
}
在first
浏览 4提问于2013-09-13得票数 1
回答已采纳
我正在尝试瞄准下图中蓝色突出显示的线，并在其前面添加一个<td>。
我试过..。
$('#wpf-wrapper .wpf:nth-child(2) tr:nth-child(2)').prepend('<td class="emblem"></td>');
但它不起作用。我是不是遗漏了什么？
浏览 0提问于2011-07-22得票数 1
回答已采纳
嗨，请看下面的HTML。我试图使用jQuery来获取每个DIV上的第三个实例，class="box"包含在DIV中，class="entry"中有一个没有右手边距的：
我的HTML代码：
<div class="entry">
<div class="box">
SOME HTML....
</div><!-- end .box -->
<div class="box">
SOME HTML...
浏览 5提问于2010-01-08得票数 7
回答已采纳
@media screen and (max-width: 500px) {
.flexed-form-wr :nth-child(1) { order: 1; }
.flexed-form-wr :nth-child(2) { order: 3; }
.flexed-form-wr :nth-child(3) { order: 2; }
.flexed-form-wr :nth-child(4) { order: 4; }
}
.是一个有4个孩子的，应该在移动上改变他们的顺序。这是正常工作，但其中一个孩子也有孩子，同样的代码也适用于他们。为什么会发生这种情况，我怎样才能防止它
浏览 0提问于2020-11-23得票数 0
回答已采纳
我想定位有photo类的图像。然而，nth-child并没有在这个元素上工作。我寻找了很多解决方案，但都不能解决！
.container {
height: 100vh;
position: relative;
}
.irene {
position: absolute;
top: 10%;
left: 10%;
width: 60vw;
}
.irene-img {
position: relative;
}
.irene-img::after {
content: ' ';
z-index: -1;
position: ab
浏览 0提问于2019-08-14得票数 0
2回答
我试图将特定的移动样式应用于"marketplace_item_container“类的每一次出现，如下所示：
.exploreMiddleSection div:nth-of-type(2) {
margin-right: 0;
}
<div class="exploreMiddleSection">
<a href="">
<div class="marketplace_item_container">
<div></div>
<
浏览 1提问于2019-08-05得票数 0
回答已采纳
我正在尝试使用css选择器来选择和项目，但只适用于xpath。什么等同于这个css的xpath。
driver.findElement(By.xpath("(//img[@alt='Authorise this row'])[2].click();
如果我使用css，我会得到很多结果，比如说img[alt='Authorise this row']。有没有像xpath这样的方法可以获取结果的特定索引
浏览 0提问于2013-09-10得票数 0
我遇到了一个奇怪的错误，这似乎是特定于nth-child选择语法的jQuery。我可以成功地使用$('list').each()只通过下面HTML中的列表，但是当使用nth-child选择子句时，它似乎计算了两个list块之间的<br />标记。
对于HTML：
<list id="c" view="vw_project_content" where="`project` = %%2%%">
<item>
<b>$$title$$</b><b
浏览 0提问于2017-05-04得票数 0
回答已采纳
我该怎么做： 但是和querySelector？ 我的猜测是： 但这是行不通的。
浏览 76提问于2021-02-28得票数 0
回答已采纳
我有：
<h2 id='names'>Names</h2>
<p>John</p>
<p>Peter</p>
现在，如果我已经有了h2标记，那么在这里获得Peter最简单的方法是什么呢？现在我试过：
soup.select("#names > p:nth-child(1)")
但在这里，我得到了第一个孩子NotImplementedError：
NotImplementedError: Only the following pseudo-classes are implemented:
浏览 4提问于2014-07-13得票数 19
回答已采纳
3回答
如果有的话，我正试图找到解决以下问题的方法。
让我们假设主引号是双面引号“(开始)和”(结束)。我们也可以说，第二个引号是一个单顶引号‘(开始)和’(结束)。
想一想引文中的引语是如何显示的。
当然，引用的标准是交替的，就像这样。
“双单”双单“双”
现在，在HTML中，您可以这样写：
<q>Double <q>single <q>double <q>single </q>double </q>single </q>double.</q>
但是不，如果不应用CSS规则，这是行不通的。我不会在
浏览 1提问于2012-11-18得票数 3
回答已采纳
2回答
如何使用选择器的伪类nth-child，而该选择器不是所述子的直接父级？
<div id="main">
</div>
CSS
.test {
width: 100px;
height: 100px;
background: red;
}
#main .test:nth-child(even) {
background: green;
}
JS
// doesnt work
for (var i = 0; i < 3; i++) {
$('#main').append('<div><
浏览 4提问于2016-08-12得票数 2
回答已采纳
如何对包含在nth-of-type的<li>元素中的<span>元素使用<ul> css选择器
我原本期望span:nth-of-type(odd)和span:nth-of-type(even)能够工作，但他们没有。
span:nth-of-type(even) {
background-color: grey;
}
span:nth-of-type(odd) {
background-color: blue;
}
<ul>
<li>
<span>Test 1</span>
浏览 1提问于2012-10-23得票数 0
回答已采纳
1回答
我刚开始用更少的方法工作，我正努力在一些简单的盒子上工作，以获得更好的理解。有4盒有不同的颜色和大小，但在div:nth-子(2)，它总是创建两个盒子。我怎么才能把它修理成一个盒子呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Preprocessors</title>
<link rel="stylesheet" href="les
浏览 5提问于2022-01-31得票数 0
回答已采纳
4回答
如果我有这个超文本标记语言，我如何用CSS选择#one和#two之间的所有元素？我不能使用jQuery。
<p id="one"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="two"></p>
浏览 0提问于2017-03-03得票数 15
我有一个li菜单，里面有一个li的子菜单。
现在关于主立方的变化，当我改变立方的风格时，它也会影响到所有的子菜单。
有什么解决方案吗？
谢谢
浏览 4提问于2017-02-10得票数 0
2回答
我有一些简单的标记
<div class='1'>
<div class='11'></div>
<div class='12'>
<div class='121'></div>
</div>
</div>
我使用下面的CSS来尝试以.11和.12为目标
div div:nth-of-type(1) { // some rules for the first div }
div div:nth-o
浏览 1提问于2011-08-23得票数 2
回答已采纳
<li>::before<a href="#county" class="eods-error">::before"County is required."::after</a></li>
基于上面的html，我写了以下内容：
Cssselector：#eods-error > div > div.eods-error-box > ul > li:nth-child(1)
xpath：//*[@id="eods-error"]/div/div[1]/ul/l
浏览 1提问于2017-11-08得票数 0
回答已采纳
我想在一些容器上设置一个伪元素边框，但不包括第三个。我认为我可以将伪选择器与:not结合使用，比如：div:before:not(nth-child(3))，但它似乎不起作用。
那么:not选择器和伪选择器是不兼容的吗？在这种情况下，我如何才能将伪元素放入其中并排除某些特定元素呢？
(顺便说一句，伪元素边框的想法是控制边框，使它们保持在顶部，无论顶部是否有覆盖(虽然还没有看到它是否有效)
这是一把小提琴：(没有可见的边框，因为有not:(nth-child(3))选择器)
以下是小提琴中的代码：
HTML：
<div class="ctr">
<div&
浏览 15提问于2017-07-18得票数 0
回答已采纳
我在应用:last-of-type和:before时遇到了问题。
我有以下几点：
.stepwizard-row:before {
position: absolute;
top: 0px;
content: " ";
width: 1px;
height: 100%;
background-color: #97D3FD;
}
.stepwizard-row:before:last-of-type {
position: absolute;
top: 0px;
content: " ";
}
然而，:before:last-o
浏览 1提问于2016-06-21得票数 0
回答已采纳
如何使用nightwatch js获取dropdown的子元素。以下是我的代码
<ul id="ddEmp" class="ng-scope">
<li class="ng-scope active">Emp 1</li>
<li class="ng-scope">Emp 2</li>
<li class="ng-scope">Emp 3</li>
</ul>
我想要“emp3”。
浏览 3提问于2015-07-27得票数 1
2回答
我喜欢只在第一个th中没有看到tr，但是第二个tr中的th消失了。您知道如何修复包含“Min”的第一个th代码吗？当媒体宽度小于640 be时，可以显示文本？提前谢谢你！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
浏览 6提问于2015-07-14得票数 0
回答已采纳
给定一个包含许多div子元素的div和一个运行时派生的数字ChildrenPerRow，我如何选择每个“虚拟”行中的所有子元素，而这不是该虚拟行上的最后一个元素？
例如，如果是1st,2nd,3rd,5th,6th,7th,9th,10th,11th,13th,14th,15th，则选择器应该返回1、2、3、4、6、7、8、9、11、12、13、14等。如果是ChildrenPerRow = 4，则选择器应该返回该ChildrenPerRow = 4等。
我试过用这样的方法：
var FilterStr = '';
for(var i=1; i<ChildrenPerRo
浏览 1提问于2014-11-21得票数 1
回答已采纳
我在使用CSS的:nth-child(odd)选择器时遇到了一点麻烦。当我基于div类选择图像时，它似乎将CSS规则应用于每个图像。
例如：
.class img:nth-child(odd) { margin-right:10px; }
这导致了他们都被选中了。已尝试使用
img.class:nth-child(odd) { margin-right:10px; }
并得到相同的结果。
它只适用于表元素还是其他什么？我是不是选错了？
非常感谢，所以
浏览 0提问于2012-08-02得票数 1
回答已采纳
我是在django中使用jquery的新手。我试图使用ajax和jquery通知用户所介绍的电子邮件是否可用。
这是原始模板中任何javascript之前感兴趣的部分：
<form action="/registro/usr/solicitud/" method="post" name="solicitud">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' v
浏览 3提问于2011-04-18得票数 0
回答已采纳
我需要使用用户指南中提供的模板设置代码点火器日历的样式，但我需要从给定月份的第1天到第15天为背景色红色，从第16天到该月的最后一天为蓝色。
请谁来帮帮我。我非常感谢大家的帮助。
浏览 2提问于2015-05-13得票数 0
3回答
我有部分html。如何编写JQuery代码，将“test2”替换为“Home”？
<div class="customBreadcrumbs">
<span>
<a href="...">test1</a>
</span>
<span>
<a href="...">test2</a>//need change here
</span>
<span>
<a href="...">
浏览 4提问于2013-12-12得票数 0
回答已采纳
我有：
<table id="table_id" >
<tr>
<td><a href="/"><img src="http://images1.png""></a></td>
<td><a href="http://x.com" >xx</a></td>
<td><a href="http://y.com" >yy</a></td&
浏览 1提问于2014-03-20得票数 1
回答已采纳
所以，我有一个动态的列表项目，我想把一个样式应用到第二个到最后一个.如果有偶数的元素就好了。
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
在上述情况下，我想将样式应用于三个li元素，但如果如下所示，则不使用任何样式。
<ul>
<li>One</li>
<li>Two</li>
<li>Th
浏览 5提问于2015-12-04得票数 1
回答已采纳
我有我想要问的问题的。
我经常使用这种格式。我希望能够用fieldset div:first-child { }选择第一个div，但似乎只有第二个子选择器才能选择它。我希望"field 1“是红色的而不是蓝色的。说“对字段集中的第一个div设置样式”比说第二个从语义上讲更有意义(至少对我来说是这样的)。
为什么会发生这种情况，有没有办法达到我想要的效果(能够调用div:first-child)？
浏览 2提问于2012-03-20得票数 4
回答已采纳
3回答
使用下面的css，我定义了表头的第一列
table.search-transport tr th:nth-child(1) { width: 30px; text-align:right; }
我想应用这个css不仅在头上，也在桌子的身体上。
我知道我们可以分成两行：
table.search-transport tr th:nth-child(1),
table.search-transport tr td:nth-child(1)
{ width: 30px; text-align:right; }
但是我想知道我们是否可以在一条信号线上进行？类似于：
浏览 3提问于2013-03-22得票数 0
回答已采纳
我正在进行一次.each迭代，我想为each..but cant it work调用第二个或第三个孩子。
alert($(this + ' :nth-child(2)').attr('id'));
我能想到的唯一选择就是像这样的可怕的愚蠢的事情：
$(this).children(':first').next().attr('id', 'ddParam' + newCount);
$(this).children(':first').next().next().attr('id'
浏览 0提问于2011-05-13得票数 35
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
