pseudo-class 相关问题

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

我理解 :link 允许选择未访问的元素，并且我知道 LoVe-HAte 技巧可以记住放置各种链接伪类的顺序。但在实践中我总是...

html css css-selectors pseudo-class

回答 3 投票 0

假设我有：段落。裸笔记部注释 DIV 中的段落。假设我有： <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>NON Note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div> 然后我想得到输出： Paragraph. NOTE: Naked Note Div. NOTE: Paragraph in Note DIV. Second Paragraph in Note DIV. NON Note Naked Div. Paragraph in NON None DIV. 我曾尝试使用伪类 ::before 来实现此目的，但事实上，有些 div 内部有段落，有些则没有，这使得它非常困难，至少对于新手我来说是这样。使用：CSS .note::before {content: "NOTE: ";}我得到： .note::before { content: "NOTE: "; } <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>NON Note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div> 使用 CSS .note :first-child::before {content: "NOTE: ";} 我得到： Paragraph. Naked Note Div. NOTE: Paragraph in Note DIV. Second Paragraph in Note DIV. 有什么方法可以只用 CSS 来解决这个问题吗？那不是使用预处理器或 jquery 之类的。为什么你不定位注释 div 内的段落？在我看来这就是你所要求的。 .note p::before { content: "NOTE: "; } <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>Non-note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div> 您可以尝试使用 :has() 选择器 .note:not(:has(*)):before, /* when it has nothing select the note element*/ .note:has(*) :first-child:before { /* when it has something select the first child*/ content:"Note: "; color: red; } <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>NON Note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div> 在更好地支持:has()之前，您可以使用浮动： .note::before { content:"Note:"; color: red; float: left; margin-right: 10px; } <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>NON Note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div>

css css-selectors pseudo-class

回答 2 投票 0

::before 遇到问题，如何根据 <div> 的内容进行不同的应用？

假设我有：段落。裸笔记部注释 DIV 中的段落。假设我有： <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>NON Note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div> 然后我想得到输出： Paragraph. NOTE: Naked Note Div. NOTE: Paragraph in Note DIV. Second Paragraph in Note DIV. NON Note Naked Div. Paragraph in NON None DIV. 我曾尝试使用伪类 ::before 来实现此目的，但事实上，有些 div 内部有段落，有些则没有，这使得它非常困难，至少对于新手我来说是这样。使用：CSS .note::before {content: "NOTE: ";}我得到： .note::before { content: "NOTE: "; } <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>NON Note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div> 使用 CSS .note :first-child::before {content: "NOTE: ";} 我得到： Paragraph. Naked Note Div. NOTE: Paragraph in Note DIV. Second Paragraph in Note DIV. 有什么方法可以只用 CSS 来解决这个问题吗？那不是使用预处理器或 jquery 之类的。您可以尝试使用 :has() 选择器 .note:not(:has(*)):before, /* when it has nothing select the note element*/ .note:has(*) :first-child:before { /* when it has something select the first child*/ content:"Note: "; color: red; } <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>NON Note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div> 在更好的支持之前你可以使用浮动： .note::before { content:"Note: "; color: red; float: left; margin-right: 10px; } <p>Paragraph.</p> <div class="note">Naked Note Div.</div> <div class="note"> <p>Paragraph in Note DIV.</p> <p>Second Paragraph in Note DIV.</p> </div> <div>NON Note Naked Div.</div> <div> <p>Paragraph in NON None DIV.</p> </div>

css css-selectors pseudo-class

回答 1 投票 0

Firefox 中 :has 的解决方法（不使用 JavaScript）

我正在为我的一个朋友开发一个小网站，并使用 :has 伪类。但是，我知道 FireFox 不支持（除非有人打开了该标志），所以有

css firefox pseudo-class

回答 1 投票 0

我可以使用 :not 伪类根据光标是否覆盖 HTML 元素来交换 HTML 元素的动画吗？

在深入使用 Tailwind 等前端框架之前，我正在尝试学习 CSS 基础知识。我为自己做了一个制作网页的小项目，我的第一个任务是制作侧边栏...

html css reactjs css-animations pseudo-class

回答 1 投票 0

使用 javascript 更改内联 css 变量不会反映在伪选择器内容属性上

使用 content 属性使用 ::after 伪选择器编写文本，其值来自内联 css 变量。现在单击文本我可以更改 css 变量值（可以在

javascript html pseudo-class css-variables

回答 2 投票 0

“:target”伪类，当多个“a”元素用作目标时

有时我们可能需要使用多个不同的 #-tail URL 提供网页上特定部分的路径，并且对于此任务，据我所知，我们必须使用多个空白元素...

html css pseudo-class

回答 2 投票 0

样式元素和::悬停前

我有以下 HTML：：：前 ... 我有以下 HTML： <li class="knHeader__menu-list-item"> ::before <a href="#permits-required" class="knHeader__menu-link knHeader__menu-link--text"> Permits Required </a></li> 我正在尝试使用 CSS 使文本“Permits required”和 ::before 伪类变成红色 - ::before 包含一个图标。这是我尝试过的： .knHeader__menu-list-item:hover::before { color: #aa0003 !important; } .knHeader__menu-list-item:hover { color: #aa0003 !important; } 但是，这只会使图标变成红色，而不是“需要许可”。当中的任何一个悬停在上方时，我需要两者都变成红色。如有任何帮助，我们将不胜感激！您只需要使用color: inherit; 示例代码 .class-li { color: green; } .class-li a { color: inherit; } .class-li::before { content : ':li-before: ' } .class-li:hover { color: red; } <ul> <li class="class-li"> <a href="#" class="class-a1 class-a2"> Permits Required </a> </li> </ul>

css hover pseudo-class

回答 1 投票 0

如何取消CSS伪类中的属性设置？

我有这样的CSS *:焦点可见{ 轮廓：2px 纯蓝色； /* 该值根据配置动态设置 */ } 我现在有一个带有类切换的按钮 .切换{ /* ...很多

css pseudo-class

回答 1 投票 0

使用 :has() 时没有看到变化

我最近发现了 :has() 伪类。当我尝试测试它时，我没有看到任何变化。我真的不知道为什么。 * { 保证金：0；填充：0；框大小：边框框； } 身体 { 他...

css css-selectors pseudo-class

回答 1 投票 0

使用选择器后没有看到变化

关于问题嗨，我是 CSS 新手，最近我发现有选择器。毫无帮助的是，当我想测试这个选择器时，我没有看到任何变化。我真的不知道为什么。我在 int 中找不到答案...