css-selectors 相关问题

：之后与::之后

CSS 2.1 :after 和 CSS 3 ::after 伪选择器之间有任何功能差异吗（除了旧版浏览器不支持 ::after 之外）？ 对我们来说有什么实际原因吗...

如何将样式应用于元素的所有子元素

我有一个 class='myTestClass' 的元素。如何将 css 样式应用于此元素的所有子元素？我只想将样式应用于元素子项。不是它的孙子。 我可以我们...

css第一个单词加粗

如何使用 CSS 选择器将句子的第一个单词加粗，就浏览器可比性而言，这是一个好还是坏的方法？ 代码： 这是一句话

如何指定从哪里开始列表CSS

我的 HTML 结构如下所示： 第 1 项 我的 HTML 结构如下所示： <ol styletype="A" start="5"> <li data-prefix="Pre" data-suffix="Suf">Item 1</li> <li data-prefix="Pre" data-suffix="Suf">Item 2</li> <li data-prefix="Pre" data-suffix="Suf">Item 3</li> </ol> start 属性是我想要开始列表的地方。我能够执行以下操作，我能够从输入到内容可编辑列表中的数字开始列表： /* Default start value */ ol { counter-reset: item; } /* Custom start values */ ol[start="2"] { counter-reset: item 0; } ol[start="3"] { counter-reset: item 1; } ol[start="4"] { counter-reset: item 2; } /* Add more as needed */ ol[start="5"] { counter-reset: item 3; } /* Decimal (1, 2, 3, ...) */ ol[styletype="1"] > li::before { content: attr(data-prefix) "." counter(item, decimal) "." attr(data-suffix); position: absolute; left: 0; white-space: nowrap; pointer-events: none; counter-increment: item; } 我可以从 1 - 5 开始一个列表，没问题，但是，我需要一种方法能够从任何数字、罗马数字、字母等开始一个列表。我希望能够从 b. 开始一个列表， z.、4.、7. 等 我尝试过这个方法： ol[start] { counter-reset: item calc(attr(start, number) - 1); } 但是，无论我输入什么，它都会以 2 开始每个列表。 要使用 start 和 styletype 属性从任何数字、字母或罗马数字开始有序列表，请使用以下方法： JavaScript： document.querySelectorAll('ol[start]').forEach(function(ol) { const startValue = parseInt(ol.getAttribute('start'), 10); if (!isNaN(startValue)) { ol.style.counterReset = 'item ' + (startValue - 1); } }); CSS： ol { counter-reset: item; list-style: none; position: relative; padding-left: 2em; } ol > li::before { content: attr(data-prefix) "." counter(item, var(--counter-type)) "." attr(data-suffix); counter-increment: item; position: absolute; left: 0; } ol[styletype="1"] { --counter-type: decimal; } ol[styletype="a"] { --counter-type: lower-alpha; } ol[styletype="A"] { --counter-type: upper-alpha; } ol[styletype="i"] { --counter-type: lower-roman; } ol[styletype="I"] { --counter-type: upper-roman; } 此组合允许您使用不同的样式（“1”、“a”、“A”、“i”、“I”）从任何值开始列表。

CSS 中两个选择器的区别

作为CSS选择器的span.bold和span .bold（带空格）有什么区别，而span是一个HTML标签而.bold是一个类？ 在 chrome 开发工具中，他们使用了很多没有空格的东西（span.b...

如何在 CSS 中为单个样式选择多个选择器

所以，我是一个初学者，我写了一组样式，例如： .标题背景.作者类.发布时间{ 边框：2px 纯黑； } 在 index.html 中，我有 3 个不同的标题元素，这些元素具有不同的...

在 React 中使动态元素可移动

我正在使用 moveableJS 使元素可移动。当我对 div 标签进行硬编码时，它会按预期移动。但是当我尝试动态添加 div 标签时，比如单击按钮，新添加的 div 标签...

CSS 选择器不是元素类型的子元素？

我想对不在标签内的代码元素进行样式设置。 实现这一目标的最佳方法是什么？ code:not(a code) 似乎根本不起作用，至少在 Chrome 上，即使它看起来像......

“：有”伪选择器无法正常工作

我正在尝试用 HTML、CSS、js 和 PHP 制作评论过程。 我在嵌套类中有一个名为 .view_replies 的元素。 如果我创建其父元素的同级元素并希望以它为目标（即 sibli...

@media 位于 ::before,::after 伪元素内

媒体查询可以在选择器内部使用，但它们似乎在纯 CSS 的伪元素内部被忽略。 例子： div.container { 红色; ＆：：前 { 显示：内联...

如何在 Rust 中抓取包含空格的类元素？

如果 HTML 元素的类属性包含空格，我在抓取时会遇到问题。我正在使用刮板箱。以下是重现该问题的代码： 使用刮刀::{Html、Sele...

如何从一个父元素的子元素定位到另一个父元素？

假设我有四个 div 类，如下所示： dFir 秒数 秒数 dThi 在这个 div 中，我有一个 li 并有以下类： 第一的 秒 秒 蒂 我必须以从头等舱到所有 dSec 班为目标...

如何向表单数据对象添加或追加额外的名称-值对？

如何将数组添加到该对象的最后一个： const formElment = document.querySelector(".form"); formElment.addEventListener("提交", (事件) => { event.preventDefault...

如何用nth-child()选择一个div？

我的 HTML 结构如下： 照片 ... 我的 HTML 结构是这样的： <section id="main-content" class="photo-grid"> <h2>Photos</h2> <div class="col-1-4"> <a href="#"> <p>File 503</p> <img src="#" /> </a> </div> <div class="col-1-4"> <a href="#"> <p>File 508</p> <img src="#" /> </a> </div> <div class="col-1-4"> <a href="#"> <p>File 505</p> <img src="#" /> </a> </div> <div class="col-1-4"> <a href="#"> <p>File 525</p> <img src="#" /> </a> </div> <br clear="all" /> </section> 我想为不同的 .col-1-4 元素设置不同的 CSS 属性。如何使用 :nth-child() 选择它们？ 我尝试过#main-content:nth-child(n)和.photo-grid:nth-child(n)，但这似乎不起作用。 为此，您应该使用 nth-of-type 而不是 nth-child，这实际上是“选择指定元素的第 n 个子元素”与“选择作为该元素的子元素的第 n 个类型的元素”之间的区别。指定元素': #main-content div:nth-of-type(1) 演示小提琴 其中1是相关div的编号（索引从1开始） 您应该将 nth-of-type 应用于目标元素的特定类型，您甚至可以将上述内容集中到： .col-1-4:nth-of-type(n) 更多关于 nth-child 的信息，来自 MDN 可以这样更清楚地描述：匹配元素是 一个元素的所有子元素被分割后的第 b 个子元素 分成每个元素组成的组。 更多关于 nth-of-type 的信息，来自 MDN :nth-of-type CSS 伪类匹配具有 an+b-1 的元素 文档树中在其之前具有相同元素名称的同级元素， 对于给定的 n 正值或零值，并且具有父元素。 有关其语法的更全面描述，请参阅 :nth-child 争论。这是一个更灵活、更有用的伪选择器，如果您 希望确保无论在何处您都选择相同类型的标签 它在父元素内部，或者出现其他不同的标签 在它之前。 此代码#main-content:nth-child(n) and .photo-grid:nth-child(n)将不起作用，因为您正在选择具有 id main-content 或 class photo-grid 的 nth-childs。您必须定位要使用 nth-child 的 div 内的元素，例如： #main-content div:nth-child(n) or .photo-grid div:nth-child(n) 您也可以简单地使用这个，这很容易做到： :nth-child(number) { css declarations; } 其中 n 可以是根据您的要求的任意数字 使用 nth-child() 选择器时，您需要指定目标子元素，如图所示。 #main-content h2:nth-child(1) { color: red; } /* Targeting all elements within the paragraph tag */ #main-content div:nth-child(2) p { color: green; } /* Targeting all elements within the anchor tag */ #main-content div:nth-child(5) a { color: orange; }

我如何像 has() 选择器一样选择特定元素周围的所有元素，但在各个方向

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hovering Boxes</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"></div> <script> let container = document.getElementById('container'); let boxCount = 100; for(let i = 0; i < boxCount; i++) { let box = document.createElement('div'); box.className = 'box'; container.appendChild(box); } </script> </body> </html> CSS: * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; } #container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; width: 100%; perspective: 1000px; } .box { background-color: red; height: 50px; width: 50px; transform-style: preserve-3d; transition: transform 0.5s, filter 0.3s; } .box:hover { transform: translateZ(150px); filter: brightness(1); background-color: #87F1FF; } .box:hover + * { transform: translateZ(100px) rotateY(60deg); filter: brightness(0.8); } .box:hover + * + * { transform: translateZ(50px) rotateY(30deg); filter: brightness(0.6); } .box:hover + * + * + * { transform: translateZ(25px) rotateY(15deg); filter: brightness(0.4); } .box:has(+ *:hover) { transform: translateZ(100px) rotateY(-60deg); filter: brightness(0.8); } .box:has(+ * + *:hover) { transform: translateZ(50px) rotateY(-30deg); filter: brightness(0.6); } .box:has(+ * + * + *:hover) { transform: translateZ(25px) rotateY(-15deg); filter: brightness(0.4); } 此代码当前选择悬停的元素并为其后面和前面的元素设置效果。但是，我也希望相对于悬停元素的顶部和底部元素能够收到类似的效果。 将鼠标悬停在框上时选择这些顶部和底部元素并为其设置样式的最佳方法是什么？ 我尝试过使用JavaScript来实现这一点，但找不到有效的解决方案。任何帮助或指导将不胜感激！ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; /* Added background color for contrast */ } #container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; width: 90%; /* Added width constraint */ perspective: 1000px; } .box { background-color: red; height: 50px; width: 50px; transform-style: preserve-3d; transition: transform 0.5s, filter 0.3s; } .box:hover { transform: translateZ(150px); filter: brightness(1); background-color: #87F1FF; } .box:hover + .box { transform: translateZ(100px) rotateY(60deg); filter: brightness(0.8); } .box:hover + .box + .box { transform: translateZ(50px) rotateY(30deg); filter: brightness(0.6); } .box:hover + .box + .box + .box { transform: translateZ(25px) rotateY(15deg); filter: brightness(0.4); } /* Hover effect for previous siblings */ .box:has(+ .box:hover) { transform: translateZ(100px) rotateY(-60deg); filter: brightness(0.8); } .box:has(+ .box + .box:hover) { transform: translateZ(50px) rotateY(-30deg); filter: brightness(0.6); } .box:has(+ .box + .box + .box:hover) { transform: translateZ(25px) rotateY(-15deg); filter: brightness(0.4); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hovering Boxes</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"></div> <script> // Create 100 boxes and append them to the container const container = document.getElementById('container'); const boxCount = 100; for(let i = 0; i < boxCount; i++) { const box = document.createElement('div'); box.className = 'box'; container.appendChild(box); } </script> </body> </html>

如何找到 HTML 网页上任何元素的 XPATH 或 CSS 定位器

我正在尝试使用 Chrome 查找屏幕中元素的定位器。我正在使用 Inspect 元素，但我不知道如何提取定位器以进行自动化 UI 测试。我怎样才能做到这一点。这里...

如何阻止 VS 代码中的 Prettier 将 CSS 选择器拆分为多行？

我希望代码如下所示： h1,h2,h3,h4,h5 { 字体粗细：400！重要； } 但是 Prettier - Code Formatter 将每个选择器分成单独的行： h1, 小时2, 小时3， 小时4, h5 { 字体威格...

Scrapy Spider 在数百个正确抓取的元素中未找到 2 个 Div 元素

我正在 Jupyternotebook 中使用 Scrapy 来抓取黄页网站，但遇到了一个奇怪的错误。 当用户输入“auto”进行各种输入时，我的代码会抓取黄页的列表视图......

CSS 没有同级选择器

考虑以下 html： 我有兴趣... 考虑以下 html： <div> <div class="iwant" /> <div class="idontwant" /> </div> <div> <div class="iwant" /> </div> 我对一个选择器感兴趣（用于爬行内容，所以我无法修改html），它会选择所有不具有类iwant的同级的idontwant。 没有同级选择器来按类匹配（或不匹配）元素。 我能想到的最接近的选择器是 .iwant:only-child 但是这个选择器意味着除了 div class="iwant" 之外，不能有任何其他元素作为父级 div 的子元素，无论类型或类如何。不过，这可能会满足您的需求，具体取决于 HTML 的结构，因此值得一试。但是，如果类名对您来说是个问题，那么可能没有太多解决方案，因为 CSS 中没有 :only-of-class 伪类可以按类进行过滤并忽略其余部分。 如果有人仍然需要这个，我找到了这个答案。基于它和：不是伪类，最初的要求可以使用类似的东西来完成： div:not(:has(+ .idontwant)) .iwant { ... } 这种方法比一般的同级组合器有一个优势：它也向后匹配，意思是这样的： <div> <div class="idontwant" /> <div class="iwant" /> </div> （因此，如果您首先有 .idontwant 元素 -> 一般同级组合器将忽略该情况） 说明： div:has(+ .idontwant) 将匹配与该类有直接兄弟姐妹的任何 div idontwant div:not(:has(+ .idontwant)) 匹配任何没有直接同属类 div 的 idontwant 剩下要做的就是在与类idontwant没有直接兄弟的div中搜索我们想要的类。 选择器相当奇怪而且很大，但它能完成工作，而且我认为在某些（特定）情况下它是非常需要的。 编辑（来自评论）： 如果有人需要仅在具有特定兄弟元素时对元素进行样式化，您仍然可以使用 :has Pseudo-class 来完成它（检查代码片段）： div:has(.ifthishasclass) .stylethis { background: orange } div:not(:has(.ifthishasclass)) .stylethis { background: yellow } div:has(.stylethis) .ifthishasclass { background: red } <div> <div class="stylethis">style this</div> <div class="ifthishasclass">if this has class (and this different)</div> </div> <hr/> <div> <div class="stylethis">style this different</div> <div class="thisdoesnthaveclass">if this doesn't have specific class</div> </div> <hr/> <div> <div class="stylethis">style this different (if alone and therefore doesn't have specific sibling)</div> </div> 没有负同级 CSS 选择器。使用同级选择器设置新样式，然后在 .idontwant: 重置样式 div.iwant { /*Set CSS here*/ display: inline; } div.iwant ~ div.idontwant { /*Reset CSS*/ display: block /* Default of DIV is block*/ } 没有特定的兄弟项目来定位项目的好方法。但您可以使用 .iwant:last-child 来定位没有后续同级的项目。 示例：http://codepen.io/martinkrulltott/pen/YyGgde 这也可能会有所帮助 - 如果您想要的元素始终是最后一个子元素： div:last-child:not(.idontwant) { }

Before 或 Not other Before 类的 CSS 选择器

我有 1 个元素和 2 个类。这两个类都有一个具有自己风格的 ::before 元素。因此，我想为单个元素的 1 个选定类实现一种样式，而不应用...