css-selectors 相关问题

选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。

我正在使用 css 选择器来隐藏元素，但我不知道如何在 nth-child 中执行此操作，我想隐藏元素位置 5 之后的所有剩余元素。我如何使用 nth-child 来做到这一点？我正在使用CSS选择器来隐藏元素，但我不知道如何在nth-child中做到这一点，我想隐藏元素位置5之后的所有剩余元素。我如何使用nth-child做到这一点？ <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> // hidden <div class="item">item 7</div> // hidden <div class="item">item 8</div> // hidden ...etc... 试试这个 div:nth-child(n+6) { display: none; } div:nth-child(n+6) { display: none; } <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> // hidden <div class="item">item 7</div> // hidden <div class="item">item 8</div> // hidden 更多详情

html css css-selectors

回答 1 投票 0

哪些 CSS 元素获取样式

我开始学习CSS了。然而，我一直遇到同样的问题。如何确定哪个元素获得属性和值？大多数时候我都是正确的，但有时我会尝试 diff...

css css-selectors

回答 1 投票 0

为什么:not(p)选择段落？

：不是（p）{ 颜色：#ff0000； } 这是一个标题这是一段。这是另一段。这是 div 中的一些文本... :not(p) { color: #ff0000; } <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a> not(selector)用于选择未指定元素的每个元素，因此在上面的代码中，我在两个p上都得到红色，这是一个未选择的项目。我只期望 div、a、h1 为红色，而不是 p，因为 p 是指定元素，它意味着离开并且样式必须应用于所有其他元素？选择器:not(p)将选择不是p元素的所有元素：这包括html和body。我们在这两个元素上设置 color。此外，属性color是默认继承的。默认继承 color 并且我们将 color 上的 body 设置为红色，p 元素将从其父级（即 color）继承 body 的红色值。您可以仅选择 body 的子元素，这意味着 body 的 color 的事实上的浏览器默认黑色将由 p 元素继承，而所有其他不是 p 的子元素元素的 color 设置为红色。注意：使用选择器body :not(p)，只有body的孩子才会将color评估为黑色。其他元素会将 color 设置为红色，p 的间接后代 body 将继承。但是让 p 元素拥有某个 color 最简单的方法是设置它（而不是继承它）。 :not选择器不是这样工作的。在 :not 选择器之前，您应该告诉您要从哪个父级中选择。 body :not(p) 针对 HTML 文档中不是段落元素的所有元素，并对它们的文本应用红色 (#ff0000)。 body :not(p) { color: #ff0000; } <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a> </body>

html css css-selectors

回答 2 投票 0

为什么不是（选择器）伪类选择指定元素？

：不是（p）{ 颜色：#ff0000； } 这是一个标题这是一段。这是另一段。这个我... :not(p) { color: #ff0000; } <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a> 1.not(选择器)用于选择不是指定元素的每个元素，因此在上面的代码中，我在两个p上都得到了红色，这是一个未选择的项目。 2. 我期望只有 div,a,h1 为红色，而不是 p，因为 p 是指定元素，并且它意味着离开并且样式必须应用于所有其他元素？现在， :not 选择器不会那样工作，在 :not 选择器之前，您应该告诉您要从哪个父级选择。 body :not(p) 针对 HTML 文档中不是段落元素的所有元素，并对它们的文本应用红色 (#ff0000)。 body :not(p) { color: #ff0000; } <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some text in a div element.</div> <a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a> </body>

html css css-selectors

回答 1 投票 0

多个标签的 CSS 选择器[for=name]

我想我的表单中有一个项目列表，我想在其中选择一些标签并应用规则。目前我正在这样做，我相信这应该根据其他选择器规则起作用， #表单列表-

html css css-selectors

回答 5 投票 0

是否有另一种方法可以在不使用 :last-child 类的情况下在最后一个子元素上应用 CSS？

我想知道是否有另一种方法使用 CSS 来设置最后一个子元素的样式，而不使用 :last-child 伪类？例如，这是我的 HTML 代码：我想知道是否有另一种方法使用 CSS 来设置最后一个子元素的样式，而不使用 :last-child 伪类？例如，这是我的 HTML 代码： <div> <div class="someText"> <p>Some text about Biology</p> </div> <div class="someText"> <p>Some text about Math</p> </div> <div class="someText"> <p>Some text about Environmental Science</p> </div> <div class="someText"> <p>Some text about physics</p> </div> </div> 假设我想将最后一个 someText 元素上的文本颜色更改为蓝色。这是我的CSS： .someText p{ color: green; } .someText:last-child p{ color: blue } 虽然这有效，但我想知道是否有一种方法可以在不使用伪类的情况下设置最后一个元素的样式？我这么问是因为我想从包装 <div>类的 HTML 中删除 someText 。基本上，如果我的 HTML 看起来像这样，我将如何将 CSS 应用于最后一个子元素： <div class="someText"> <p>Some text about Biology</p> </div> <div class="someText"> <p>Some text about Math</p> </div> <div class="someText"> <p>Some text about Environmental Science</p> </div> <div class="someText"> <p>Some text about physics</p> </div> 您正在寻找的伪类是 :last-of-type .someText:last-of-type { color: blue; } 这将使最后一个 someText 元素变成蓝色。

html css sass css-selectors

回答 1 投票 0

如何使用 Selenium 定位嵌套 div 中的输入元素

我无法找到元素，并且想将文本“hello”放入文本框中。尝试找到输入 class='search-text' 我的网络驱动程序代码...

python selenium-webdriver xpath css-selectors webdriverwait

回答 1 投票 0

如何在nextjs中的react-markdown内容中添加新元素而不使用jsx？

我使用react-markdown构建虚拟dom，它允许仅更新更改的DOM，而不是完全覆盖。它生成标签中的内容。我想在标签内添加标签。 ...

reactjs next.js css-selectors react-markdown typewriter

回答 1 投票 0

有没有办法在图标下添加垂直线而无需创建另一个div？

我试图在图标下方添加一条垂直线，但我似乎无法显示该线，而无需创建额外的 div 来将图标类包装在其中。我正在尝试让我的图标消失...

html css sass css-selectors

回答 1 投票 0

这个 CSS :is() 选择器没有像我想象的那样工作

为什么 CSS 选择器 .a ~ .b :is(body .b .c .d) 与以下简单 HTML 标记中的 .d 匹配，而第一个 .b 和 :is() 之间的空格肯定是后代组合器，因此选择器...

css css-selectors

回答 1 投票 0

CSS 伪::在不处理 Icon 元素之前？

我有以下 HTML，如下所示：这是 HTML：新闻我有以下 HTML，如下所示：这是 HTML： <div class="newsTimePeriod item-One"> <h3>News</h3> <i class="fas fa-car"></i> <div class="aboutItem"> <p>Fire is the rapid oxidation of a material in the exothermic chemical process of combustion, releasing heat, light, and various reaction products. </p> </div> </div> <div class="newsTimePeriod item-Two"> <h3>Old News</h3> <i class="fas fa-car"></i> <div class="aboutItem"> <p>Water is an inorganic with the chemical formula H 20. It is a transparent, tastless, odorless, and nearly colorless chemical substance. </p> </div> </div> 我尝试在图标（fa-car）上显示一条垂直线并将其连接到下一个图标。如果它是最后一个图标，则不会显示垂直线。例如由于某种原因，垂直线不适用于我当前的 CSS。 .newsTimePeriod { display: flex; position: relative; overflow: hidden; padding: 0px 7px 0px 7px; } .newsTimePeriod h3{ width: 100px; float: left; display: flex; } .fa-car, .aboutItem{ margin: 18px 0px 0px 18px; } .fa-car { border-radius: 13px; height: 29px; width: 29px; color: #fff; background-color: #001277; padding: 5px; box-sizing: border-box; margin-top: 12px; } .aboutItem { padding: 14px 14px 14px 14px; max-width: 570px; background: #FFFFFF; border: 1px solid #DBDADA; color: #000; } /* To display vertical line*/ .fa-car::before { content: ''; position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; margin-top: 30px; margin-left: 6px; } /* To hide vertical line on the last icon*/ .newsTimePeriod:last-child .fa-car::before { display: none; } @media (max-width: 768px) { .newsTimePeriod { flex-direction: column; } .newsTimePeriod .aboutItem { width: 70%; align-self: end; margin: auto; } .newsTimePeriod h3 { flex-direction: row-reverse; padding: 0 0 0 22px; } } 我注意到，如果我将图标类包装在 div 中，则垂直线 CSS 可以工作，但我不希望图标类包装在 div 中。我的 CSS 有问题吗？不确定这是否是您所要求的，但我做了一个简单的演示来尝试一下，我认为主要问题是定位。如果::before的父级，i标签不是相对定位的，给它绝对定位会使其位置按照整个页面来放置。另外，您可以使用 :not() 选择除最后一个子项之外的所有子项。 .box { margin: 2rem; padding: 1rem; border: 1px solid red; } .icon { width: 50px; height: 50px; background-color: blue; display: block; /*give the icon a position of relative*/ position: relative; } .box:not(:last-child) > .icon::before { content: ''; /*now this will be sized according to the size of the icon*/ position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; /*then use top or left, and % units to center it*/ top: 100%; left: 50%; } <body> <div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> <div class="box"><i class="icon"></i></div> </div> </body> 也许你需要这个 <div> <div class="newsTimePeriod item-One"> <h3>News</h3> <i class="fas fa-car"></i> <div class="line"></div> <div class="aboutItem"> <p> Fire is the rapid oxidation of a material in the exothermic chemical process of combustion, releasing heat, light, and various reaction products. </p> </div> </div> <div class="newsTimePeriod item-Two"> <h3>Old News</h3> <i class="fas fa-car"></i> <div class="line"></div> <div class="aboutItem"> <p> Water is an inorganic with the chemical formula H 20. It is a transparent, tastless, odorless, and nearly colorless chemical substance. </p> </div> </div> </div> <style> .newsTimePeriod { display: flex; position: relative; /* overflow: hidden; */ padding: 0px 7px 0px 7px; } .newsTimePeriod h3 { width: 100px; float: left; display: flex; } .line { position: absolute; top: 53%; width: 3px; height: calc(100% - 50%); background-color: #33004e; z-index: -1; left: 142px; } .fa-car, .aboutItem { margin: 18px 0px 0px 18px; } .fa-car { border-radius: 13px; height: 29px; width: 29px; color: #fff; background-color: #001277; padding: 5px; box-sizing: border-box; margin-top: 12px; position: relative; /* Add position relative to keep the pseudo-element inside */ } .aboutItem { padding: 14px 14px 14px 14px; max-width: 570px; background: #FFFFFF; border: 1px solid #DBDADA; color: #000; } /* To display vertical line */ .fa-car::before { content: ''; position: absolute; height: calc(100% + 28px); width: 3px; background: #33004e; top: 23px; /* Updated top value to align with the icons */ left: 22px; /* Updated left value to align with the icons */ } /* To hide vertical line on the last icon */ .newsTimePeriod:last-child .line { display: none; } @media (max-width: 768px) { .newsTimePeriod { flex-direction: column; } .newsTimePeriod .aboutItem { width: 70%; align-self: end; margin: auto; } .newsTimePeriod h3 { flex-direction: row-reverse; padding: 0 0 0 22px; } /* Update for responsive view on small screens */ .fa-car::before { top: 0; left: 22px; height: 100%; } .line { position: absolute; top: 53%; width: 3px; height: calc(100% - 30%); background-color: #33004e; z-index: -1; left: 44px; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>

html css css-selectors

回答 2 投票 0

在 Selenium 中使用 Xpath 查找嵌套元素不起作用

给出以下站点和定位器： https://ultimateqa.com/automation X路径 CONTAINER = (By.XPATH, '//ul[@class="bottom-nav"]') MENU = (By.XPATH, '//li[包含(@class, "菜单项...

html css selenium-webdriver xpath css-selectors

回答 2 投票 0

CSS 类 .foo.bar （不带空格）和 .foo .bar （带空格）有什么区别

请您解释一下这两个 CSS 类语法之间的区别： .元素.符号{} 和 .element.large .symbol {} 我不明白两者之间的区别。第一个...

css css-selectors

回答 6 投票 0

如何在元素本身内设置自定义元素滚动条的样式

我有一个简单的自定义元素，我在 light DOM 中使用 ::-webkit-scrollbar 系列伪元素对其滚动条进行了样式设置。自定义元素.define( '我的元素', 课程延长

html css css-selectors shadow-dom custom-element

回答 0 投票 0

如何在 JavaScript 中选择具有特定 CSS 类的输入单选按钮

我正在尝试使用 JavaScript 在 HTML 中的 .show 类下选择一个输入单选按钮。 HTML 结构如下： html: 我正在尝试使用 JavaScript 在 HTML 中的 .show 类下选择输入单选按钮。 HTML 结构如下： html: <div class="collapse question-group show"> <div class="progress">...</div> <div class="question"> <div class="form-check"> <input type="radio"> <label>yes</label> </div> </div> </div> 我需要在 CSS 选择器中包含 .show 类，因为还有其他类似的 div 组，唯一的区别是 .show 类的存在。没有它，该元素将被隐藏。我尝试使用以下 JavaScript 代码： <script> var inputButtons = document.querySelectorAll('.show .form-check input[type="radio"]'); inputButtons.forEach(input => { if (input.checked) { alert('hello!'); } }) </script> 但是警报窗口并没有弹出，看来选择失败了。如果我将 CSS 路径更改为： var inputButtons = document.querySelectorAll('.form-check input[type="radio"]'); 它按预期工作。有没有办法在 CSS 选择器中包含 .show 类来选择所需的输入单选按钮？问题根据进度动态添加！然后尝试： document.querySelectorAll('.show') .forEach((showEl) => { showEl.addEventListener('change', (event) => { if(event.target.tagName === 'INPUT' && event.target.type === 'radio' && event.target.checked){ alert('Hello') } }) }) 因此，事件处理程序与 static .show 元素相关联...然后，每当其子元素之一发生单击事件（无论是否动态创建）时，该事件都会触发，因为它仍然与现有元素。诀窍是过滤你想与之互动的孩子。

javascript html css css-selectors frontend

回答 1 投票 0

如何仅更改表格中包含小数点的列的 css 样式

我有一个除法问题，正在表格中显示。每个数字都存储在“td”中。我想减少宽度并删除包含 ...

html css reactjs html-table css-selectors

回答 0 投票 0

任何锚元素都有白色文本

我有一次考试，要求我将任何锚元素设为白色文本。我已经尝试了我所知道的一切，但似乎无法接受。我没有找到任何帮助来尝试揭示它的含义，a...

css css-selectors

回答 2 投票 0

Scrapy：无法使用 css 选择器 attr::img 找到图像

我正在尝试抓取此页面上的一些元素： https://www.liberation.fr/planete/2015/10/26/stupeur-en-argentine-le-candidat-de-kirchner-en-difficulte_1408847/ 我想抓取...的链接