css-selectors 相关问题

我的HTML结构是这样的某事某事 &l... 我的HTML结构是这样的 <div> <div> <h1>Something</h1> </div> <div> <h1 class='Handle'>Something</h1> </div> </div> 如果div > div没有“Handle”类的子项，我希望div > div具有样式cursor:move;。我将如何在纯 CSS 中做到这一点，这可能吗？ :not(:has()) 注意：对旧浏览器的支持有限。下面的示例演示了 :not() 的组合和:has() 伪类来选择没有指定子类的元素。 div:not(:has(p)) { background: powderblue; } div:not(:has(p)):hover { color: blue; background: azure; } <div> <h1>Does Not Have a Paragraph</h1> </div> <div> <h1>Has a Paragraph</h1> <p>Paragraph</p> </div> 截至 2024 年 3 月，:has() 受到大多数现代浏览器的支持。但是，Firefox 最近才在版本 121（日期为 2023 年 12 月 19 日）中实现了对 :has 的支持。因此，如果客户端使用旧浏览器，请谨慎使用。 :not() 自 2015 年以来已被大多数浏览器支持。或者，jQuery 支持 :has() 选择器。 CSS中没有父选择器，所以你所要求的是不可能的。您可以做的是使用属性选择器将 cursor:move 放在每个不具有“Handle”类的 h1 上。 h1:not([class=Handle]) { cursor:move; } http://jsfiddle.net/4HLGF/ 另一个选项是调整 HTML，并将 h1 移动到与 div 相同的水平。 <div> <h1>Something</h1> <div> dragable content </div> <h1 class='Handle'>Something</h1> <div> non dragable content </div> </div> 现在您可以对 h1 进行相同的检查，并定位其后面的 div。 h1:not([class=Handle]) + div { cursor:move; } http://jsfiddle.net/4HLGF/2/ 尝试 div > div h1:not([class=Handle]) { cursor:move; }

css css-selectors

回答 3 投票 0

尝试了解 CSS 选择器如何与 HTML 按钮交互

我是制作网站的新手，因此找到了一个模板可以用作我自己的个人网站的参考，到目前为止，我正在使用尝试删除边框的按钮，因此它是一个文本按钮...

html css web css-selectors containers

回答 1 投票 0

如何找到购买按钮的相对xpath

我想找到购买按钮的xpath。我使用通过 Chrome 进行复制来创建路径，但它们无法在我需要它们工作的网站的每个页面上工作。我需要一条这样的路径...

javascript html dom xpath css-selectors

回答 1 投票 0

您可以选择将类应用于复杂选择器而不重复复杂选择器或声明吗？

上下文以下 CSS 规则用于多个站点共享的主题。有些网站有菜单项，而其他网站则没有。这些是在标题类之前应用于元素的样式

css css-selectors

回答 1 投票 0

使用 CSS 选择器在 2 个类之间选择元素

假设我有以下 HTML 结构： 1 2 3 4 假设我有以下 HTML 结构： <div class="open">1</div> <div>2</div> <div class="close">3</div> <div>4</div> <div class="open">5</div> <div>6</div> <div>7</div> <div>8</div> <div class="close">9</div> <div>10</div> 我想选择“打开”和“关闭”类之间的所有元素（例如，div 编号 1,2,3,5,6,7,8。到目前为止，我所做的是使用以下 CSS： .open ~ *:not(.close ~ *) { color: red; } 但它只捕获第一组，而不捕获以下组。如何选择所有“组”？我尝试解决问题的游乐场： https://stackblitz.com/edit/stackblitz-starters-8fvzok?file=styles.css 亲爱的朋友。我知道你想选择 div 编号 (2,4,6,7,8,10) 这就是为什么你可以尝试这个代码： div:not([class]){ color: red; }

css sass css-selectors

回答 1 投票 0

CSS 选择器选择给定类的第一个元素

我正在尝试在 id 或类“B”的元素中选择类“A”的第一个元素。我尝试了 > + 和第一个子选择器的组合，因为它不是类元素中的第一个元素...

css css-selectors

回答 2 投票 0

如何赋予 CSS 类优先于 id 的优先级？

我有一个这样的元素： #idname{ 边框：2px 纯黑； } 。班级名称{ 边框：2px 纯灰色； } 这是一个考验我是...

html css css-selectors css-specificity

回答 5 投票 0

CSS3 SVG 简单过渡：鼠标悬停时出现和消失

我正在尝试使用两个项目进行简单的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>

css svg css-selectors hover transition

回答 1 投票 0

子选择器未选择[重复]

不工作我的意思是我显然误解了它的使用方式。我只想选择位于描述内部的预标记。 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>

css css-selectors

回答 1 投票 0

仅将鼠标悬停在元素的::first-line 时如何应用样式？

我想仅当用户将鼠标悬停在段落的第一行上时才将段落的第一行设为粗体。我尝试过类似的事情： p::第一行：悬停{ 字体粗细：粗体； } 请注意...

css css-selectors pseudo-element pseudo-class

回答 1 投票 0

有没有办法在元素悬停时将样式应用于 CSS ::first-line 伪类

我一直在为 HTML 标记修改一些 CSS。我面临的问题是已经使用 CSS ::first-line 伪类应用了一种样式。我想要的是改变这个的风格

css css-selectors hover pseudo-element pseudo-class

回答 3 投票 0

CSS 选择器具有相同的属性和多个值，会导致性能问题吗？

我对想到的一个问题有点好奇，尽管以这种方式编写男女混合并不是标准/良好的做法。如果 CSS 选择器具有相同的属性和多个用于考试的值怎么办...