选择器是与文档树中的元素匹配的模式。在CSS规则中，它们用于为与模式匹配的元素定义样式。
我正在尝试在 id 或类“B”的元素中选择类“A”的第一个元素。我尝试了 > + 和第一个子选择器的组合，因为它不是类元素中的第一个元素...
我有一个这样的元素： #idname{ 边框：2px 纯黑； } 。班级名称{ 边框：2px 纯灰色； } 这是一个考验 我是...
我正在尝试使用两个项目进行简单的CSS3过渡：一个svg框（代表svg绘制的徽标）和其后面的标签（代表标题名称标签）。 默认情况下只有盒子... 我正在尝试使用两个项目进行简单的 css3 过渡：一个 svg 框（代表 svg 绘制的徽标）和其后面的 <p> 标签（代表标题名称标签）。 默认情况下，仅应显示该框，而应隐藏文本。当鼠标悬停在 SVG 框上时，该框应通过简单的 CSS 淡入淡出过渡消失（或者甚至更好的阴影模糊以获得加分；-），然后名称标题应在 1 秒内出现焦点（从阴影模糊） . 目前我陷入困境，因为我的代码无法激活鼠标悬停。我在这个阶段做错了什么？ svg:hover p 不是我最后一步的正确选择器吗？以及如何设置过渡淡入淡出效果？ *{margin: 0; padding: 0;} svg{ position: absolute; fill: rgba(0,200,0,1); z-index: 2; top: 0px; left:0px; display:block; } p{ position: absolute; z-index: 1; top:70px; display: block; color: rgba(0,0,200,0); /* hide the title as default */ } svg:hover{ fill: none; } svg:hover p{ color: rgba(0,0,200,1); /* on mouse over svg, show title. // Doesn't work!! */ } <svg width="100" height="100" viewBox="0 0 100 100"> <rect x="10" y="10" width="100" height="100"/> <p>Title of this Website</p> </svg>http://stackoverflow.com/questions/ask# 您无法将元素放置在 SVG 内。 您应该将 SVG 和段落都放置在容器内，并将悬停效果设置为作用于容器。 对于过渡，请在每个元素上使用过渡属性，或者将其放置在父元素的所有子元素上。 像这样的东西： <style type="text/css"> * {margin: 0; padding: 0;} .svg-container * { -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -o-transition: all 1000ms ease; -ms-transition: all 1000ms ease; transition: all 1000ms ease; } svg { position: absolute; fill: rgba(0, 200, 0, 1); z-index: 2; top: 0; left: 0; display: block; opacity: 1; } p { position: absolute; z-index: 1; top:70px; display: block; color: rgba(0,0,200,0); } .svg-container:hover svg { opacity: 0; } .svg-container:hover p { color: rgba(0,0,200,1); } </style> <div class="svg-container"> <svg width="100" height="100" viewBox="0 0 100 100"> <rect x="10" y="10" width="100" height="100"/> </svg> <p>Title of this Website</p> </div>
不工作我的意思是我显然误解了它的使用方式。我只想选择位于描述内部的预标记。 p.description > pre{颜色：红色} 不工作我的意思是我显然误解了它的使用方式。我只想选择描述中的预标记。 p.description > pre{color:red} <p class="description"> <pre> adsfasdf asdf asdf asdf asdf asf sd f</pre> </p> 本例中 pre 的父级是 p.description 那么为什么不选择它呢？我在这里查看了许多其他帖子，但我不知道我可能做错了什么。 您是否明确需要父容器是 p？ 如果没有，请尝试将其更改为div： div.description pre { color: red; } <div class="description"> <pre> adsfasdf asdf asdf asdf asdf asf sd f</pre> </div>
仅将鼠标悬停在元素的::first-line 时如何应用样式？
我想仅当用户将鼠标悬停在段落的第一行上时才将段落的第一行设为粗体。我尝试过类似的事情： p::第一行：悬停{ 字体粗细：粗体； } 请注意...
有没有办法在元素悬停时将样式应用于 CSS ::first-line 伪类
我一直在为 HTML 标记修改一些 CSS。我面临的问题是已经使用 CSS ::first-line 伪类应用了一种样式。我想要的是改变这个的风格
我对想到的一个问题有点好奇，尽管以这种方式编写男女混合并不是标准/良好的做法。 如果 CSS 选择器具有相同的属性和多个用于考试的值怎么办...
我正在尝试制作图像滑块。所以我做了两个按钮来切换到下一张图像。问题是图像切换按钮没有到位。 css :first-child 选择器工作但不工作...
-- 我有一个作业提供来自 HTML 页面和外部 CSS 样式表的代码，我不应该更改 HTML 代码或创建任何新的样式表选择器，只添加属性：value...
我想使用last-of-type选择两个元素，但我不知道正确的语法是什么。如果这是 html： 我想使用last-of-type选择两个元素，但我不知道正确的语法是什么。如果这是 html: <div class="Box"> <book class="small"/> <book class="small"/> <notes/> <notes/> <toy class="small"/> <toy class="small"/> </div> 我想选择盒子里的最后一本书和最后一个玩具，语法是什么？我以为会是： div.Box book.small, toy.small:last-of-type { } 但这显然是不正确的。 尝试 div.Box book.small:last-of-type, div.Box toy.small:last-of-type { /* styles */ } 这是一个小提琴。 您必须将属性 last-of-type 应用于两个选择器： div.Box book.small:last-of-type, toy.small:last-of-type 自 2021 年 1 月以来，现在支持跨浏览器的 :is() 和 :where() 伪选择器允许您通过结合这两个规则来进一步改进： div.Box :is(book,toy).small:last-of-type { /* styles */ }
我可以将声明嵌套在另一个选择器中吗？ TD：悬停 { 背景颜色：深蓝色； 白颜色; 边框颜色：紫色； 文本装饰：双下划线； 图像 { 边框： 固体...
Python-Selenium：Chrome 无头设置不适用于“WebDriverWait”
以下代码可以在真实浏览器中通过，但在无头浏览器中则不行。 而真实： 尝试： #明确等待 打印（“尝试4”） WebDriverWait(驱动程序, 10).until(EC.
当子元素只有:focus-visible时，如何获取父元素:focus-within？
当子元素只有焦点可见时，如何让父元素获得焦点？ 我希望父母在通过键盘聚焦孩子时获得轮廓。 但这段代码总是有焦点（大纲）...
有没有办法在CSS选择器中定位父元素？ 我正在使用下面的代码，但我没有获取父元素。 WebElement we=dr.findElement(By.cssSelector("div[id='gf-BIG']:parent")); ...
我想将区域更改为最大溢出：仅在支持 ::-webkit-scrollbar-thumb 时才滚动。 在纯 CSS 中这可能吗？看来 @supportsonly 检查规则，没有选择器。
当我尝试使用“>”将某些 CSS 属性应用于父元素的直接子元素时，它与某些属性（如边框）配合得很好，但不适用于字体属性（如 col）...
选择偶数和奇数级别子级的正确选择器是什么？ 我想简化当前的 CSS，同时允许无限级别，而无需手动为它们编写 CSS。 .b...
我需要在 li 中找到在其子项中包含文本 6:00pm 和文本 Alpha 的按钮。 下午6:00 阿尔法 我需要在 button 中找到 li，其子级中包含文本 6:00pm 和文本 Alpha。 <li> <div>6:00pm</div> <div>Alpha</div> <button>Do it!</button> </li> <li> <div>6:00pm</div> <div>Beta</div> <button>Do it!</button> </li> ... 我有 li:has(div:text("6:00pm")) button 这为我提供了“6:00pm”的两个button，但是如何限制选择器也匹配Alpha，这样我就只能得到一个按钮？ 我基本上需要在谓语中添加一个连词。 您可以组合 filter 调用来创建条件的逻辑“与”： const playwright = require("playwright"); // ^1.30.0 const html = `<!DOCTYPE html> <li> <div>6:00pm</div> <div>Alpha</div> <button>Do it!</button> </li> <li> <div>6:00pm</div> <div>Beta</div> <button>Do it!</button> </li>`; let browser; (async () => { browser = await playwright.chromium.launch(); const page = await browser.newPage(); await page.setContent(html); const btn = page .getByRole("listitem") .filter({hasText: "Alpha"}) .filter({hasText: "6:00pm"}) .getByRole("button"); console.log(await btn.textContent()); // => Do it! })() .catch(err => console.error(err)) .finally(() => browser?.close()); 虽然这些不使用首选角色定位器并预设文本顺序，但以下也是可能的： page.locator("li:text('6:00pm Alpha') button"); page.locator("li:has-text('6:00pm Alpha') button");
我有这样的代码结构。我想对 3 个字母应用渐变，但它是单独应用的。那看起来不太好。我不想改变结构，因为我在动画中使用了它。 .