css-selectors 相关问题

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

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

javascript css-selectors event-handling form-submit form-data

回答 4 投票 0

如何用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; }

html css css-selectors

回答 4 投票 0

我如何像 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>

css css-selectors

回答 1 投票 0

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

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

google-chrome selenium-webdriver xpath css-selectors web-inspector

回答 4 投票 0

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

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

html css visual-studio-code css-selectors prettier

回答 1 投票 0

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

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

python web-scraping xpath scrapy css-selectors

回答 1 投票 0

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) { }

html css css-selectors

回答 5 投票 0

Before 或 Not other Before 类的 CSS 选择器

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

css css-selectors

回答 1 投票 0

将鼠标悬停在父元素上时设置子元素的样式

当鼠标悬停在父元素上时如何更改子元素的样式。如果可能的话，我更喜欢 CSS 解决方案。有没有可能通过 :hover CSS 选择器解决方案。实际...

css css-selectors

回答 4 投票 0

Jquery - 嵌套循环中的 $(this)

我不知道如何在 Jquery 中做某事。假设我有一个包含许多选择下拉菜单的表单，然后执行此操作... $('#a_form select').each(function(index) { }); 当进入这个循环时，我想要...