css-selectors 相关问题

选择图像的alt属性

我有： 我有： <div id="aa"> <img src="." height="17" alt="example1" title=""> <img src="." height="17" alt="example2" title=""> <img src="." height="17" alt="example3" title=""> </div> 我只想选择图像的属性“alt”值“example1，example2，example3”。我怎样才能得到它们。 我认为您的意思是您想要选择 alt 属性中包含 example* 的所有图像（在 CSS 中），以便您可以设置它们的样式。 （并且您并不是说您实际上想要选择 alt 属性中设置的文本） 您可以使用属性选择器： img[alt~="example"] { border: 1px solid red; } 要选择某些属性，请使用选择器 img[alt="example1"], img[alt="example2"], img[alt="example3"]

如何等高展示弹性卡？

有多张带有显示网格的卡片，但框之间有大量空白。如何根据卡片内的内容自动调整每个卡片的高度。 这是我的评论

第一个带有类的子实例的 CSS 选择器？ [重复]

是否有针对具有类的子级的第一个实例的 CSS 选择器？例如，采用以下代码： 是否有针对具有类的子级的第一个实例的 CSS 选择器？例如，采用以下代码： <div id="container"> <div class="nothing"> </div> <div class="child"> <!-- SELECT THIS ONE --> </div> <div class="child"> <!-- NOT THIS ONE --> </div> <div class="child"> <!-- NOT THIS ONE --> </div> </div> 是否有一个 CSS 选择器来设置第一个出现的带有“child”类的 div 的样式？ 您可以使用 subsequent-sibling 组合器、.child: 设置 .child 的样式并恢复后续 ~ 兄弟姐妹的样式 .child { color: #ff0000; } .child ~ .child { color: inherit; } <div id="container"> <div class="nothing">nothing </div> <div class="child">SELECT THIS ONE </div> <div class="child">NOT THIS ONE </div> <div class="child">NOT THIS ONE </div> </div> 您可以使用“:nth-child”CSS选择器。 演示：http://jsfiddle.net/2pyvz/ CSS： .child:nth-child(2) { color:red; }

CSS 复选框黑客与非兄弟内容

以下 CSS 复选框 hack 的工作原理是假设内容是复选框的同级。单击标签时，内容会切换。 演示版 以下 CSS 复选框 hack 的工作原理是假设内容是复选框的同级。单击标签时，内容会切换。 演示 <input id="checkbox" type="checkbox" /> <label for="checkbox"> Toggle content </label> <div class="content">Content here</div> #checkbox { display: none; } #checkbox:not(:checked) ~ .content { display: none; } 仅当 内容不是复选框的同级时，才能使用 CSS 实现相同的效果吗？例如： <div> <input id="checkbox" type="checkbox" /> <label for="checkbox"> Toggle content </label> </div> <div class="content">Content here</div> 您可以使用 :target 伪类并使用锚点而不是复选框来做到这一点。丑陋极了，但只有 CSS： a { color: #000000; text-decoration: none; } #off { display: none; } .content { display: none; } #your-target:target ~ .content { display: block; } #your-target:target #on { display: none; } #your-target:target #off { display: block; } <div id="your-target"> <a id="on" href="#your-target"> Toggle content </a> <a id="off" href="#"> Toggle content </a> </div> <div class="content">Content here</div> “这不容易做到”的答案是不正确的。 移动设备常用汉堡菜单的 HTML 如下所示： <label id=hamburger for=toggle><span id=hamText>&#9776;</span></label> 只需将不可见的复选框单独放置在父div中： <div id=entirePage> <input id=toggle class=checkbox type=checkbox> </div> 现在，您可以在此之后任意深度地嵌套 div： <div id=entirePage> <input id=toggle class=checkbox type=checkbox>'); /* checkbox */ <div id=header> <label id=hamburger for=toggle><span id=hamText>&#9776;</span></label> </div> /* end header */ <div id=mainBodyText>...</div> </div> /* end entirePage */ 并且您可以使用复选框状态来选择所需的 CSS，明确指定任何嵌套的 div： /* Show the frame when checked */ #toggle:checked ~ #header #hamburger {border: 2px solid black;} /* Hide the body text when checked */ #toggle:checked ~ #mainBodyText {display:none}

Python Selenium - find_element(By.ID, {id-name}) 一直说我正在通过 css_selector 而不是 ID 进行搜索？

所以我试图获取的 HTML 标签包含以下信息： 所以我试图获取的 HTML 标签包含以下信息： <input class="mds-text-input__input mds-text-input__input--line" id="userId-input" placeholder="" name="username" autocomplete="username" type="text"> 我尝试过 By.CLASS_NAME、By.ID、By.Name，他们都一直说我正在通过 By.CSS_SELECTOR 搜索，并且此搜索找不到该 css 标签 selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"[id="userId-input"]"} 是的，那是因为它们在幕后都被转换为 CSS 选择器。 按班级名称 .class_name 按 ID #id 按名字 name ...等等

排除链接内的标题

我需要 div 中的标题具有相同的大小/字体/颜色，但我想排除链接内的任何标题。我需要改变 div 内的任何内容 - 任何级别的嵌套。 CSS： #页面容器 h2 ...

如何找到动态xpath（每次重新加载页面时都会改变）

大家好，我需要帮助来解决这个问题，我正在尝试自动化登录 Nike BR 网站（与其他网站不同），但每次我重新加载页面时，xpath 都会不断变化...

如何根据一个元素的类设置CSS属性

我正在使用 React 和 CSS。如果选择器 1 (div.selector1) 具有“show”类，我想在选择器 2 (tr#selector2) 上设置 "background-color":"yellow"： 分区

仅选择另一种匹配的每个实例之后的第一个匹配

我有一个表格，该表格被分成以特殊格式的元素为首的组。每组的第一行需要一些特殊的格式，因此它与

如何使用CSS应用带有描边的文本阴影？

我想将此文本设置为与附加图像完全相同的样式，尝试使用文本阴影但没有得到完全相同的结果。我想在阴影文本上添加边框。请提供更好的解决方案！ ...

根据前一个元素的宽度设置 HTML 元素的填充

我正在将莎士比亚剧本格式化为 HTML。因为莎士比亚是用韵律写作的，所以习惯上缩进不在韵律第一拍开始的行，如下所示： p.indent { 左填充：

如何将CSS渐变颜色应用到类似于所附屏幕截图中的组件背景

我们如何使用伪CSS选择器在背景的一侧应用CSS渐变，如下图所示。 在此输入图像描述 我尝试使用线性渐变 css 但它不是......

如果存在文本，则保持焦点样式

我有一个输入框。我在正常状态和焦点下定制它。 我的问题是，如果输入框中存在文本，如何保持焦点 CSS 样式？ .par 输入[类型=样本]{ 宽度：75px...

为什么优先级在这个例子中不能正常工作？ [重复]

在下面的CSS中，主体选择器优先于通用选择器。 * { 颜色：rgba(255,3,3,0.966)； } 身体 { 颜色: rgb(103, 231, 18); 字体系列：无衬线字体； } 但是...

body和universal之间的css冲突

在下面的CSS中，主体选择器优先于通用选择器。 * { 颜色：rgba(255,3,3,0.966)； } 身体 { 颜色: rgb(103, 231, 18); 字体系列：无衬线字体； } 但是...

CSS not：最后一个子项或最后一个子项未按预期选择[重复]

这个另一个问题是关于“每个匹配的第 n 个孩子和一个任意选择器”，但我没有这样做。我只需要使用特定的选择器来定位最后一个孩子。 所以跟随...

如何选择不是任何 <em> 元素子级的 <p> html 元素？

/* CSS */ em {字体样式：斜体；背景黄色} ::autonomous-not-child-of-p-element-？ :: em {字体样式：正常；背景灰色} 给定两种不同使用 的情况，在 n...

SASS 从最后一个元素中选择最后一个元素

我很难向最后一个 class="list-group" 中的最后一个 class="separator" 添加边框。 我想在 SASS 中执行此操作。有人可以帮助我吗，因为我的解决方案不起作用。 超文本标记语言 &l...

如何将值传递给 :nth-child() cypress 中的 css 选择器

我有一个父元素，它有很多子元素。在遍历它们时，如果我需要选择一个子元素，我将使用以下代码： cy.get(root-div > div:nth-child(1)) 那个... 我有一个父元素<div>，它有很多子元素。在遍历它们时，如果我需要选择一个子元素，我将使用以下代码： cy.get(root-div > div:nth-child(1)) 然后我必须获取第二个元素，我将使用以下代码： cy.get(root-div > div:nth-child(2)) 我们可以让这个div:nth-child(2)部分像这样动态化吗： cy.get(root-div > div:nth-child(${0})) 即当我们调用这个定位器时插入索引值？这样定位器就变成动态的并且可以用于所有子元素。 您可以创建一个 JavaScript 函数来返回该字符串，并让它接受索引变量。 const getNthChild(index) => { return `root-div > div:nth-child(${index})` }); // In test cy.get(getNthChild(1)); 此外，如果您的 cy.get() 命令生成多个元素，则 cy.eq() 命令可以选择索引处的元素。 cy.get('root-div > div').eq(1).should('be.visible') cy.get('root-div > div').eq(2).should('have.text', 'foo'); 或者，您可以创建自定义 Cypress 命令，尽管我认为这有点过分了。 Cypress.Commands.add('getNthChild', (index) => { return cy.get(`root-div > div:nth-child(${index})`); }); // In test cy.getNthChild(1);

是否可以在 CSS3 选择器中使用 CSS 变量？

我正在尝试使用 CSS 变量进行一些实验，但我无法让它工作或找到任何有关它的文档。有谁知道是否可以在 CSS3 选择器中使用 CSS var？ 我做了以下...