CSS伪类允许基于元素的状态，DOM树结构中的位置，用户动作或其他因素在文档内更具体地选择元素。
我有一个表格，该表格被分成以特殊格式的元素为首的组。每组的第一行需要一些特殊的格式，因此它与
如何选择不是任何 <em> 元素子级的 <p> html 元素？
/* CSS */ em {字体样式：斜体；背景黄色} ::autonomous-not-child-of-p-element-？ :: em {字体样式：正常；背景灰色} 给定两种不同使用 的情况，在 n...
CSS： #容器>一个{ 颜色：黄色！重要； } a:焦点可见 { 颜色：红色！重要； } HTML： 锚1 ... CSS： #container > a { color: yellow!important; } a:focus-visible { color: red!important; } HTML： <div id="container"> <a href="#">Anchor 1</a> <a href="#">Anchor 2</a> </div> 我们都知道，当我们关注锚点时，文本颜色仍然是黄色，因为第一个选择器更具体。这很奇怪，我认为这是一个错误，因为 :focus-visible （以及其他伪选择器，如 :hover）是一种不同的状态，就像单击事件一样。对我来说，这就像当我单击一个元素时调用 onchange 处理程序。无论如何，这是完全不同的话题来讨论。 我的问题是，如何使“a:focus-visible”选择器具有高优先级？ #container > a:focus-visible 可能是正确的答案。但是，考虑一下我的页面中有很多案例，我的用户仍然可以像第一个一样添加选择器。我需要在所有锚点上推行我自己的规则。 您可以通过将选择器修改为比 #container > a 更具体来增加 :focus-visible 规则的特异性。由于 #container > a 具有更高的特异性，因此向 a:focus-visible 添加 ID 或另一个选择器可以确保其优先： CSS： #container > a:focus-visible { color: red !important; } 这确保了当锚点处于 :focus-visible 状态时，红色将覆盖 #container > a 中的黄色。
使用全局 styles.scss 来控制每个 Angular 组件的 :host
我注意到我的应用程序中的每个视图都有一个像这样开头的样式文件。 ：主持人 { 显示：柔性； 背景颜色：蓝色； } div.foo { 背景颜色：红色； } 这似乎是一个明智的决定...
我正在尝试使用 CSS 来替换我的 div 中的背景颜色。我可以做到这一点，但是哪些 div 显示会发生变化。我希望能够仅替换当前可见的内容。不然就p...
我的 css :hover 属性在单击元素并保留在那里时不会在移动设备上删除。并且 :active 属性在延迟后也可以工作
我有一个带有以下CSS代码的按钮： .queueAdd { 背景颜色：#008d3fed； 过渡：0.2s； } .queueAdd:悬停{ 规模：1.1； 光标：指针； } .queueAdd:活动{ 是...
在我的应用程序中，我有一个组件，其中只有两张卡片，我想在悬停和单击它们时为它们设置动画。 我注意到，当其中一个当前处于活动状态（单击）时，另一个......
我有一个简单的 Bootstrap 选项卡场景。这是 HTML 我有一个简单的 Bootstrap 选项卡场景。这是 HTML <ul class="nav nav-tabs"> <li class="nav-item"> <div class="nav-link active" href="#">Tab 1</div> </li> <li class="nav-item"> <div class="nav-link">Tab 4</div> </li> <li class="nav-item"> <div class="nav-link">Tab 4</div> </li> <li class="nav-item"> <div class="nav-link">Tab 4</div> </li> </ul> 我想将鼠标悬停在任何不活动的同级选项卡（选项卡 2-4）上，然后更改活动选项卡的背景颜色。 以下作品... .nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active { background: red; } ...但我需要让它改变 ::after 和 ::before 上的背景颜色 那看起来像... .nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active::after{ background: red; } 不起作用。 有什么想法吗？ 对我来说效果很好 .nav-link::before { content: '>>> '; } .nav-link::after { content: ' <<<'; } .nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active::before { background: blue; } .nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active::after { background: red; } <ul class="nav nav-tabs"> <li class="nav-item"> <div class="nav-link active" href="#">Tab 1</div> </li> <li class="nav-item"> <div class="nav-link">Tab 2</div> </li> <li class="nav-item"> <div class="nav-link">Tab 3</div> </li> <li class="nav-item"> <div class="nav-link">Tab 4</div> </li> </ul>
CSS 2.1 :after 和 CSS 3 ::after 伪选择器之间有任何功能差异吗（除了旧版浏览器不支持 ::after 之外）？ 对我们来说有什么实际原因吗...
我试图在自动生成的 HTML 文档中隐藏以下元素： 在某些页面中，标签将... 我试图在自动生成的 HTML 文档中隐藏以下元素： <p id="sitspagedesc" class="sitspagedesc"> </p> 在某些页面中，<p>标签将包含内部值，但在其他页面中它只能包含空格，如示例所示。我需要找到一种隐藏它的方法，以便仅使用 CSS 来隐藏它，因为更改 HTML 不是一个选项。 我尝试使用隐藏它 .sitspagedesc:empty { display:none; } 但这不起作用，大概是由于元素包含的空间。 有人有什么好主意吗？ 谢谢:) 我认为你不能用纯 CSS 做到这一点。 但是，只需一点 JavaScript，您就可以做到。 var allParas = document.getElementsByTagName('p'); //filter by class name if desired... for(var i=0;i<allParas.length;i++){ if(allParas[i].getElementsByTagName('*').length == 0){ allParas[i].style.display = 'none'; } } 如果您可以访问 jQuery，那么使用内置选择器进行过滤会更容易一些。 $('p.sitspagedesc').each(function(){ if($(this).children().length == 0){ $(this).hide(); } }); 如果希望模仿 :empty 选择器的功能（除了忽略空格之外），则接受的答案（由 scunliffe 提供）不太有效。它仅检查子元素，并且不考虑直接位于所选元素内部的文本。例如， <p>Hello World!</p> 将被视为空，因为它没有子元素，即使它确实包含非空白文本。 我的解决方案使用 jQuery.trim() 函数从 .text() 值中删除前导和尾随空格，该值包含所选元素及其后代的组合文本内容。因此，如果所选元素不包含非空白文本且不包含子元素，则该元素将被隐藏。与 :empty 选择器一样，HTML 注释不计为内容，因为它们不反映在 .text() 或 .children() 值中。 $('p.sitspagedesc').each(function(){ if($.trim($(this).text()) == '' && $(this).children().length == 0){ $(this).hide(); } }); 请参阅小提琴https://jsfiddle.net/TNTitan89/crejkbxq/。 :empty选择器确实非常严格。包含空格的元素不被视为空。所以有两种解决方案 修改输出。修剪您输出的值或最小化 HTML，以便删除这些空格。或者甚至更好：根本不渲染这些元素。我认为这是最好的选择，因为它既可以最大限度地减少流量，又可以为您提供一个无需 Javascript 即可工作的解决方案。 使用 Javascript 来查找这些元素。我不知道可以让您轻松找到这些元素的技巧，因此您可能必须遍历所有元素，搜索您认为空的元素并向这些元素添加一个类。这可能会非常慢，尤其是在低端设备上。此外，它只会在脚本运行后隐藏元素，因此在页面加载时，元素将在短时间内可见，直到被隐藏。很明显，这不是理想的解决方案。 也许你可以将两者结合起来。 :empty 选择器是 CSS3 选择器，IE8 及之前版本尚不支持，因此对于这些浏览器来说，Javascript 回退可能是一个好主意，除非您可以修复服务器端脚本以便根本不渲染空元素，或者在渲染过程中被赋予特殊的类，因此不需要 Javascript。 答案：还没有，但已经起草了。 https://drafts.csswg.org/selectors-4/#the-blank-pseudo ...而且——至少对于 Mozilla 来说——已经有一个前缀实现了...:-moz-only-whitespace: http://jsfiddle.net/peayLrv3/ （到目前为止）还没有办法检测纯 CSS 中的空元素。如果 Javascript 不是一个选项，您可以在服务器端执行什么操作来在 HTML 到达浏览器之前对其进行操作吗？ 这是我刚刚使用 jQuery 1.5.x 为客户端实现的解决方案 - 您可能需要调整 //skip empty tags but which are valid 正则表达式字符串。 $('*:only-child:empty').each( function(index) { var currentElement = $(this); // skip singleton tags if(/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i.test(currentElement.get(0).tagName) == true) { return } // skip empty tags but which are valid if(/^(?:textarea)$/i.test(currentElement.get(0).tagName) == true) { return } while (currentElement.parent().children().length == 1) { currentElement = currentElement.parent(); } // so 0 or more children for the parent then we hide it // we will never have more then 0 children though the :empty takes care of that console.log('hidding: ' + currentElement); currentElement.hide() } ); 虽然不是标准，但 Firefox 有“:-moz-only-whitespace”。 此外，对于一些“未来的证明”，css-tricks提到了一个:blank选择器，它将成为CSS选择器4级草案的一部分。虽然当前没有浏览器支持它，但这是有可能的。 通过 JavaScript： element.hidden = !element.textContent.trim() CSS： .sitspagedesc:empty { display:none; } jquery： $('.sitspagedesc').html(function(){ // empty element return $.trim($(this).html()); }); 您可以使用： p.sitspagedesc { content: " "; display: none; } 除非你随机有多个空格...
我可以在 CSS 规则中的伪类后面添加类选择器吗，例如： a:hover.my-class { 背景：红色； } 因此，如果我将鼠标悬停在我的锚标记link上，
CSS 规范给出了以下原因： 注意：伪元素通常被排除在 :has() 之外，因为许多伪元素 他们的存在是有条件的，基于他们祖先的风格， 所以允许这些...
我有一个这样的文档： ... 一些元素遵循身体的方向 <... 我有一个这样的文件： <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>
我想使用“:is()”伪 cl 来设置特定的“直接位于主体内部的部分”和“直接位于主体内部的 div 内部的部分”的样式...
目前，我的网站的 HTML 周围有一个边框，因此它包围了每个页面上的所有内容。然而，在我的主页上，我有一个图像，当页面加载和当前时会滑入......
我想让 :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>
使用“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> 内的元素之外。
我创建了一个文本区域元素，其插入符号颜色CSS样式设置为黑色，但是当我在文本区域中选择文本时，文本光标消失 #我的文本区域{ 插入符号颜色：黑色； 调整大小：无；
我正在尝试使用伪元素替换默认项目符号点来设计网站中的列表样式。但是，对于某些情况，伪元素会呈现在导航侧边栏中的下拉菜单顶部
尝试找到一个以为目标的伪类，如下所示： 我尝试过 :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> <!-- This will not be colorized --> </div> <div> <!-- But this will --> <span>Some content</span> </div>