pseudo-class 相关问题

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

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

CSS 中 div 的替代行颜色

我正在尝试使用 nth-child(odd) 向 div 添加替代行颜色。 我需要为类名为 Alternative_cls 的 div 添加替代颜色，但不为具有

仅使用 html 和 css 单击两次后更改光标？

我知道我可以使用以下 CSS 代码一键更改光标： #slide-arrow-prev:活动{ 光标：不允许； } 无论如何，是否可以仅使用 html 单击两次后更改光标...

：不是伪类取消：悬停动画

我在按钮内有一个元素，当我将其悬停时以及当我单击父元素（按钮）时，我想为其设置动画。 为此，我使用 :not 和 :active 伪类来动画

否：伪选择器取消：悬停动画

我在按钮内有一个元素，当我将其悬停时以及当我单击父元素（按钮）时，我想为其设置动画。 为此，我使用 :not 和 :active 伪类来动画

如何更改伪类颜色以匹配另一个类的颜色？

我为网页创建了一个“块”，例如名为“test-div”的网页。 测试 div 还添加了一个额外的类来更改其背景颜色，即。 测试 div 测试 div-bg-亮金 测试-...

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

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

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

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

如何在CSS中使用nth-child来选择某个元素之后的所有元素？

我见过 jQuery 有一个 :gt(n) 解决方案，但是在 CSS 中可以实现相同的行为吗？ 我想要的是移动网站在某些列表中的元素不超过 3 个。所以我需要一些东西

SVG 精灵可以作为列表样式图像吗？

我可以使用 SVG 图像作为列表样式图像： ul { 列表样式图像： url('my.svg'); } 但是，如果我有一个 SVG 精灵，并且我想将其用于列表图像，该怎么办？ 那可能吗？ 我本来以为

如何在 ASP.NET asp:checkbox 控件呈现的 HTML 控件中定位 :after psuedo 元素？ [重复]

我看到了适用于简单输入标签对的代码： 超文本标记语言 我已经看到了适用于简单输入标签对的代码： HTML <input type="checkbox" id="toggle" class="checkbox" /> <label for="toggle" class="switch"></label> CSS .switch { position: relative; display: inline-block; width: 40px; height: 20px; background-color: rgba(0, 0, 0, 0.25); border-radius: 20px; transition: all 0.3s; } .switch::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius:50%; background-color: white; top: 1px; left: 1px; transition: all 0.3s; } .checkbox:checked + .switch::after { left : 20px; } .checkbox:checked + .switch { background-color: #7983ff; } .checkbox { display : none; } 上面的工作示例： https://codepen.io/lawrencelove/pen/xxBWpBj 但不幸的是，当使用 ASP.NET asp:checkbox 控件时，它以不同的方式呈现 HTML。 HTML <span class="checkbox"><input id="toggle" type="checkbox" name="ctl00$ucSiteVersion$toggle" checked="checked"> </span> <label for="toggle" class="switch"></label> 在这种情况下，因为 input 控件嵌套在 span 标签内，这似乎导致它不再与组合器选择器匹配。 上面带有 span 标签的损坏示例： https://codepen.io/lawrencelove/pen/MWxVrxm 我尝试了相邻兄弟姐妹和后代的各种组合，但我无法让它与结束 span 标签一起很好地发挥作用。我还尝试引用 #toggle:checked 而不是 .checkbox:checked，但这也不起作用。 如何从 .switch 标签内的 checkbox 控件定位 span？ 替换这个： .checkbox:checked + .switch::after { left : 20px; } .checkbox:checked + .switch { background-color: #7983ff; } 这样： span:has(> input:checked) + .switch::after { left : 20px; } span:has(> input:checked) + .switch { background-color: #7983ff; }

仅使用CSS隐藏悬停时的兄弟div

我对一种让CSS（无javascript）显示div或您悬停的元素之外的元素感兴趣，如下所示： #除法{ 显示：无； } a：悬停#divid { 显示：块； }...

CSS 伪类组合 :first-child 和 :first-letter

我一直在研究 CSS 伪类，并尝试了一些可用的类来看看什么可以做，什么不能做。 我的问题是： 我想使用 :first-child se...

：根变量在：元素之前不可用

我将很多 CSS 变量分配给 :root 但这些变量在我的 :before 元素中无法访问。我在网上找不到任何关于此的信息。 当检查 :before elemen 的父级时...

我的按钮对我的代码不起作用有什么原因吗？

对于我的代码按钮，它不允许按钮在移动到按钮上时将光标变成指针，并且一段时间后我的悬停伪类选择器不再工作......

将复选框的伪类应用于特定同级

我正在考虑在不使用Javascript（或我当前React实现中的setState）的情况下实现侧边栏的CSS Native多级菜单。 我已经做了几乎所有的事情，但我越来越...

如何在mui组件中正确使用:valid伪类来动态改变边框

如果输入有效，我正在尝试使用 Mui v5 中的 createThem 更改 Mui TextFields 的边框颜色。边框在 ::before 和 ::after 伪类内设置。 我正在使用变体=“

:link 伪类有什么意义？

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

如何将伪元素应用于具有特定类的元素的子元素？

假设我有： 段落。 裸笔记部 注释 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>

::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>