pseudo-class 相关问题

CSS伪类允许基于元素的状态，DOM树结构中的位置，用户动作或其他因素在文档内更具体地选择元素。

我有一个这样的文档： ... 一些元素遵循身体的方向 <... 我有一个这样的文件： <html> ... <body style="direction: rtl;"> <div class="col-ml-auto"> some elements following body's direction </div> ... <div class="col-ml-auto" style="direction: ltr;"> some elements forced to be ltr </div> </body> </html> 我可以使用以下语法选择父方向元素： .col-ml-auto{margin-left:auto} [style*="rtl"] .col-ml-auto{margin-left:unset;margin-right:auto} 它选择普通元素，但内联方向没有效果。我可以使用以下语法选择内联定向元素： .col-ml-auto{margin-left:auto} .col-ml-auto[style*="rtl"]{margin-left:unset;margin-right:auto} 它选择内联定向元素，但不选择父定向元素，那么如何处理两者？你不会有一个基于CSS可以设置的选择器，这会创建一个循环。例如，如果我们有一个假设的 :direction() 伪选择器，它对 CSS 设置的方向敏感，那么像 :direction(ltr) { direction: rtl; } 这样的规则会阻止引擎。但是，即使你所有的方向规则都是在内联 style="" 属性中设置的，并且即使你确定你将 never 拥有类似 style="direction:rtl; direction: ltr;" 的东西，我怀疑你会找到一个能够区分最接近父级匹配 A 的元素以及最接近 B 的元素。因此，最好的选择可能是在这里利用继承，例如将要设置的所有样式声明为--css-variables。然后，（仍然假设所有方向都是通过 style="" 属性设置的），你可以做类似的事情 [style*=direction][style*=rtl] { --rule-1: rtl-value } [style*=direction][style*=ltr] { --rule-1: ltr-value; } [style*=direction][style*=rtl] { --rule-1: green } [style*=direction][style*=ltr] { --rule-1: red; } * { border: 1px solid var(--rule-1); } <body style="direction: rtl;"> <div class="col-ml-auto"> some elements following body's direction </div> ... <div class="col-ml-auto" style="direction: ltr;"> some elements forced to be ltr </div> </body>

css css-selectors pseudo-class direction

回答 1 投票 0

带有相对选择器的CSS“:is()”伪类

我想使用“:is()”伪 cl 来设置特定的“直接位于主体内部的部分”和“直接位于主体内部的 div 内部的部分”的样式...

html css css-selectors pseudo-class

回答 2 投票 0

如何将 HTML 边框移到动画图像前面？

目前，我的网站的 HTML 周围有一个边框，因此它包围了每个页面上的所有内容。然而，在我的主页上，我有一个图像，当页面加载和当前时会滑入......

css z-index pseudo-element pseudo-class

回答 1 投票 0

使 ':target' 伪类的所有目标可见

我想让 :target 伪类的目标可见。也就是说，如果目标是块元素，例如，应概述；如果目标是内联元素，例如... 我想让 :target 伪类的目标可见。也就是说，如果目标是块元素，例如<p>，应概述 <p>；如果目标是内联元素，例如<span>，应概述 <span>；如果目标是空的 <a> 元素，则应该有一条水平线。 :target:not(a:target) { outline: red dashed 1px; } a:target::before { content: ''; display: block; border-top: red dashed 1px; } <p><a href="#empty-a">empty a</a></p> <p><a href="#p">p</a></p> <p><a href="#span">span</a></p> <p>...</p> <a id="empty-a"></a> <p id="p">this is <span id="span">the</span> target</p> 此示例有效，但存在一个问题：作为常规非空 <a> 元素的目标将在其顶部有一条线，而不是轮廓，这会破坏一致性。 :target:not(a:target) { outline: red dashed 1px; } a:target::before { content: ''; display: block; border-top: red dashed 1px; } <p><a href="#nonempty-a">non-empty a</a></p> <p>...</p> <p>this is <a href="#" id="nonempty-a">the</a> target</p> 有人可以帮忙解决吗？编辑问题：为什么要使用空链接开始？ - 特马尼·阿菲夫答案：这是一种技术（我从Apple借来的），允许使用多个#链接来定位单个位置。例如 <p><a href="yellow">yellow</a></p> <p><a href="hot">hot</a></p> <p>...</p> <a id="yellow"></a> <a id="hot"></a> <h1>Sun</h1> 我会使用 hr 元素而不是链接，它可以通过一个 CSS 规则正常工作 :target { outline: red dashed 1px; } hr[id] { margin: 0; border: none; } <p><a href="#empty-a">empty a</a></p> <p><a href="#empty-a">empty b</a></p> <p><a href="#p">p</a></p> <p><a href="#span">span</a></p> <p>...</p> <hr id="empty-a"> <hr id="empty-b"> <p id="p">this is <span id="span">the</span> target</p>

html css hyperlink pseudo-class

回答 1 投票 0

使用“not”伪类来设置所有元素的样式，除了特定元素的子元素之外

标题 1 级标题正文。 1 级标题 <body> <header> <h1>Title</h1> </header> <h1>Level-1 heading</h1> <p>Body text.</p> <h1>Level-1 heading</h1> <p>Body text.</p> </body> 我想将 <h1> 元素设为红色，除了 <h1> 内的 <header>。我可以用做到这一点 h1 { color: red; } header h1 { color: revert; } ，但也许有更好的方法，使用单个声明而不覆盖？我尝试了:not(header) h1 { color: red; }，但由于某种原因它不起作用。另一种方法是body > h1 { color: red; }，但对我来说有点脆弱。我想将 <h1> 元素设为红色，除了 <h1> 内的 <header>。 h1:not(header h1) { color:red } h1:not(header h1) { color: red } <header> <h1>Title</h1> </header> <h1>Level-1 heading</h1> <p>Body text.</p> <h1>Level-1 heading</h1> <p>Body text.</p> body:not(header) > h1 { color: red; } <body> <header> <h1>Title</h1> </header> <h1>Level-1 heading</h1> <p>Body text.</p> <h1>Level-1 heading</h1> <p>Body text.</p> </body> body:not(header) > h1 { color: red; } 这将使所有 <h1> 元素变为红色，除了 <header> 内的元素之外。

html css css-selectors pseudo-class

回答 2 投票 0

为什么选择文本时CSS插入符号颜色样式不起作用

我创建了一个文本区域元素，其插入符号颜色CSS样式设置为黑色，但是当我在文本区域中选择文本时，文本光标消失 #我的文本区域{ 插入符号颜色：黑色；调整大小：无；

html css pseudo-class

回答 1 投票 0

伪元素 z-index 问题

我正在尝试使用伪元素替换默认项目符号点来设计网站中的列表样式。但是，对于某些情况，伪元素会呈现在导航侧边栏中的下拉菜单顶部

css pseudo-class

回答 1 投票 0

：如果有空格则empty不起作用？

尝试找到一个以为目标的伪类，如下所示：我尝试过 :blank 和 :empty 但都无法检测到... 尝试找到一个以 <div> 为目标的伪类，如下所示： <div class="nav-previous"> </div> 我尝试过:blank和:empty，但都无法检测到。难道只是做不到吗？ https://jsfiddle.net/q3o1y74k/3/ :empty一个人就够了。根据当前的 Selectors Level 4 规范，:empty 可以匹配仅包含文本节点、仅包含空格的元素以及完全为空的元素。只是根据当前规范，支持它的人并不多。 :empty伪类表示没有子元素的元素除了（可选）文档空白字符。来自 MDN：注意：在选择器级别 4 中，:empty 伪类已更改为类似 :-moz-only-whitespace，但目前还没有浏览器支持此功能。 :-moz-only-whitespace CSS 伪类匹配仅包含仅包含空格的文本节点的元素。（这包括具有空文本节点的元素和没有子节点的元素。）正如其他人提到的，这对于 CSS 来说是不可能的。不过，您可以检查 JavaScript 是否只有空格。这是一个简单的仅 JS 解决方案，匹配的“空”div 为蓝色，而包含文本的 div 为红色。更新为向空 div 添加 empty 类，这将允许您使用 CSS 中的选择器 .empty 轻松定位它们。仅 JS 的“空”比较将如下所示： if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") 如果你使用 jQuery，那就更容易了： if( $.trim( $(element).text() ) == "" ){ var navs = document.querySelectorAll(".nav-previous"); for( i=0; i < navs.length; i++ ){ if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") { navs[i].style.background = 'blue'; navs[i].classList.add( 'empty' ); } else { navs[i].style.background = 'red'; } }.nav-previous { padding: 10px; border: 1px solid #000; } .nav-previous.empty { border: 5px solid green; }<div class="nav-previous"> </div> <div class="nav-previous">Not Empty </div> :empty确实只适用于完全空元素。空白内容意味着它不为空，单个空格或换行符就足够了。只有 HTML 注释才被视为“无内容”。有关更多信息，请参阅此处：https://css-tricks.com/almanac/selectors/e/empty/ :blank选择器正在开发中，它将匹配空白，请参见此处：https://css-tricks.com/almanac/selectors/b/blank/。但好像还没有浏览器支持。更新：请参阅此处了解涉及 jQuery 的可能解决方案。你的方法的问题是你的容器实际上并不是空的。 :empty 伪类表示没有子元素的元素全部。就文档树而言，只有元素节点和内容节点（例如 DOM 文本节点、CDATA 节点和实体引用）其数据长度非零必须被视为影响空虚；由于你有空白空间，这个伪类不会起作用。 :blank 伪类应该是正确的，因为这是它的定义：这个空白伪类匹配只包含内容的元素由空格组成但不为空。问题是这个伪类还没有被任何浏览器实现，您可以在下面的链接中查看。因此，您需要等到它实现才能使用此选择器。这几乎解释了您所面临的行为 https://css4-selectors.com/selector/css4/blank-pseudo-class/ 这里最好的方法就是确保你的 div 实际上是空的，这样你的方法就会起作用。你能做的最好的事情就是定义一个空类，如下所示： .empty{ display:none; } 然后在此处添加此 JS 代码，它将把空类附加到您的空白项目中： (function($){ $.isBlank = function(html, obj){ return $.trim(html) === "" || obj.length == 0; }; $('div').each(function() { if($.isBlank( $(this).html(), $(this).contents().filter(function() { return (this.nodeType !== Node.COMMENT_NODE); }) )) { $(this).addClass('empty'); } }); })(jQuery); 检查它在这里工作， https://jsfiddle.net/29eup5uw/ 如果没有 JavaScript/jQuery 实现，你就做不到。 :empty 选择器适用于空标签（因此其中甚至没有 any 空间）或自闭标签，如 <input />。参考：https://www.w3schools.com/cssref/css_selectors.asp 如果你想使用 JavaScript 实现，我想你会在这里找到答案：How do I check if an HTML element isempty using jQuery? 虽然不完全相同，但如果您可以安全地假设输出并考虑没有子元素作为“空”的定义，则可以在现代浏览器中利用 :has()。 div:not(:has(> *)) { background: red; } <div>  </div> <div>  <span>Some content</span> </div>

css css-selectors pseudo-class

回答 6 投票 0

占位符显示的伪类似乎不适用于 safari

当我使用 :not(::placeholder-shown) 时，:NOT 似乎在 safari 浏览器中不起作用。如果你没有使用 safari：下面我添加了一种使用 safari 浏览器与 playwright 的方法，以便你可以测试一下...

css pseudo-class

回答 1 投票 0

为什么选择器 :before:hover 不起作用？

http://jsfiddle.net/nicktheandroid/k93ZK/2/ 这应该非常简单，我只是不明白为什么它不起作用。当鼠标悬停在 :before 上时，它的不透明度应该更改为 1，但它确实...

css css-selectors pseudo-element pseudo-class csslint

回答 2 投票 0

如何在输入控件内设置图像旋转动画？

基于这个答案，我设法将图像作为我的图标出现在其右边缘的输入控件内。如果我使用旋转的 GIF，我就准备好了。我只需要在我的控制下设置班级...