css-selectors 相关问题

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

我正在使用第n个子选择器为不同的社交图标添加背景图像。然而，所有图标看起来都是一样的。我做错了什么？ .social-标志{ 显示：内联blo...

html css css-selectors

回答 5 投票 0

我希望当我将鼠标悬停在上时出现，您想提供反馈吗？。换句话说，我想要和 <p>我们怎样才能...</desc> <question vote="0"> <p>我希望当我将鼠标悬停在 <pre><code><div id="Feedback"></code></pre> 上时出现 <pre><code><p>Would you like to give feedback?</p></code></pre>。换句话说，当我将鼠标悬停在该 p 元素上时，我希望 <pre><code><textarea></code></pre> 和 <pre><code><p>How can we imporve the page?</p></code></pre> 将其显示设置为“阻止”。</p> <p>这是我尝试过的：</p> <pre><code><!DOCTYPE html> <html> <head> <title>Sign up</title> <link href="./account.css" rel="stylesheet"> </head> <body> <div id="entire-form"> <form action="form.html" method="GET"> <h1><b>Sign up =)</b></h1> <div id="Feedback"> <p>Would you like to give feedback?</p> <p>How can we imporve the page?</p> <textarea name="improve" id="improve" rows="10" cols="70"></textarea> </div> </form> </div> </body> </html> </code></pre> <pre><code>textarea, #Feedback p{ display: none; } #Feedback p:nth-child(1) { /*What this does is it looks in the div with the id Feedback and its p elements and selects the first child i.e. the p that comes first*/ display: block; margin: 15px; } #Feedback p:nth-child(1):hover{ display: block; } </code></pre> </question> <answer tick="false" vote="0"> <p>如果没有<pre><code>JavaScript</code></pre>，你就无法实现这一目标。我对您的代码进行了一些更改，涉及使用正确的 <pre><code>HTML</code></pre> 元素及其顺序来实现所需的功能。我还更新了您的<pre><code>CSS</code></pre>部分。</p> 当用户将鼠标悬停在其上或输入内容时，<p><pre><code>textarea</code></pre>将保持可见。</p> <p>我希望这能解决您的问题。您可以根据自己的意愿进行进一步的更改。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener("DOMContentLoaded", function () { const hoverLine = document.querySelector(".hover-line"); const textareaContainer = document.getElementById( "feedback-input-container" ); const textarea = document.getElementById("improve"); function showTextarea() { textareaContainer.style.display = "flex"; } function hideTextarea() { if (!textarea.value.trim()) { textareaContainer.style.display = "none"; } } hoverLine.addEventListener("mouseover", showTextarea); textareaContainer.addEventListener("mouseover", showTextarea); textareaContainer.addEventListener("mouseout", hideTextarea); textarea.addEventListener("focus", showTextarea); textarea.addEventListener("input", showTextarea); textarea.addEventListener("blur", hideTextarea); });</code></pre> <pre><code>.hover-line { cursor: pointer; } #feedback-input-container { display: none; flex-direction: column; align-items: start; gap: 3px; margin-top: 5px; }</code></pre> <pre><code><h1>Sign up =)</h1> <form action="form.html" method="GET"> <label class="hover-line">Would you like to give feedback?</label> <div id="feedback-input-container"> <label>How can we improve the page?</label> <textarea name="improve" id="improve" rows="10" cols="70"></textarea> <button type="submit" name="submit">Submit</button> </div> </form></code></pre> </div> </div> <p></p> </answer> </body></html>

html css css-selectors textarea pseudo-element

回答 0 投票 0

Cypress 中的链接选择器是什么？

我有这个 HTML 代码日期范围<... 我有这个 HTML 代码 <li class="menu-level-1"> <a href="/Public/app/#/calendar"> <i class="site-menu-icon material-icons">date_range</i> <span> Calendar </span> </a> </li> 我不知道我需要在 Cypress 中选择什么来自动按下日历按钮。我没有独特的 css 或 id 类，因此我无法将其与其余菜单项隔离。我只有上面显示的内容。我认为您想要单击元素 <a href="/Public/app/#/calendar">，因为它具有 href。有很多方法可以定位它，使用哪种方法取决于页面上的独特之处 cy.contains('a', 'Calendar').click() // if the word Calendar only appears on this link cy.get('a[href="/Public/app/#/calendar"]').click() // specifies by the link itself cy,get('i.site-menu-icon').parent().click() // if the icon is the unique thing 您可以使用自定义xpath，例如//*[text()="Calendar"] 如果您在网页上发现了许多其他内容，您可以提供一个索引，例如 //*[text()="Calendar"][1] 确保此处索引始终以 1 开头，而不是 0。 cy.get('li').within(() => { cy.get('a[href="/Public/app/#/calendar"]').find('.site-menu-icon.material-icons').contains('Calendar').click() }) cy.get('li') 根据您的代码，我直接触发列表标签 within 用于选择列表标签中的子 id 或类 cy.get('a[href="/Public/app/#/calendar"]') 这将选择中的一个（锚点）元素，该元素的 href 属性值为“/Public/app/#/calendar”。这可能是指向日历页面或部分的链接。 .find('.site-menu-icon.material-icons') 这将在选定的锚元素中搜索具有 site-menu-icon 和 Material-icons 类的子元素。这通常是锚链接内的图标。 .contains('日历') 这进一步将选择范围缩小到包含文本“日历”的元素。它确保您要与之交互的元素被标记为“日历”。 .点击() 最后，此命令单击前面步骤中已选择的元素。

javascript css-selectors cypress

回答 3 投票 0

如何在CSS中*仅*选择最高级别的后代？

考虑这个例子，a、b、c、d 只是随机标签。标有 class="select" 的 d 标签是我想要选择的。当然，我没有关于它们的课程。规则应该是：S...

html css css-selectors

回答 1 投票 0

CSS 选择器未找到错误。？ VScode 中出现警告

当我在处理我的项目时，突然出现警告消息，它显示未找到 CSS 类，但在我的代码中，每个类都在 CSS 中链接。谁能帮我解决这个问题吗？为什么是...

html css css-selectors

回答 2 投票 0

Cypress 自动化 Javascript 的理想选择器

javascript css-selectors cypress

回答 3 投票 0

如何使用 Angular 更改 Shadow DOM 中嵌套子元素的样式

我想更改包装在父元素内部的子元素的字体样式，该父元素在内部被其他元素包装，最后它被包含在影子根内。附加 DOM ...

html css angular css-selectors shadow-dom

回答 3 投票 0

使用lxml高效解析元标签？

我正在使用 lxml 解析 HTML 页面。这些页面具有如下元标记：我怎样才能...

python web-scraping css-selectors lxml

回答 3 投票 0

：之后与::之后

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

css css-selectors pseudo-element pseudo-class

回答 2 投票 0

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

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

css css-selectors

回答 3 投票 0

css第一个单词加粗

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

html css css-selectors

回答 7 投票 0

如何指定从哪里开始列表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-selectors html-lists

回答 1 投票 0

CSS 中两个选择器的区别

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

css css-selectors

回答 1 投票 0

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

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

html css css-selectors

回答 1 投票 0

在 React 中使动态元素可移动

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