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

css-selectors 相关问题

最新问题