pseudo-element 相关问题

CSS伪元素允许在元素内增强内容显示或者为元素生成额外的开始或结束内容的能力。

如何根据附图创建边框

伪边框图像我想要连接复选框的边框。我尝试使用伪边框，但在设置高度时遇到困难，因为网站响应不同的屏幕。谁都可以吗

css responsive-design bootstrap-5 border pseudo-element

回答 1 投票 0

如何根据子类的伪类设置父类的样式？

我有一个包含输入标签的跨度，并且我在跨度中声明了一个 :after 伪元素来设置其样式。跨度::之后{ 内容：'有效'；颜色：绿色； } 输入：无效{ 轮廓：2px

css css-selectors pseudo-element

回答 1 投票 0

为什么 :has 伪选择器不适用于元素列表？

我有一个带有“help-image”类的 div 块，其中包含一个，位于带有“help-section”类的部分内。按如下方式使用 :has 选择器效果很好：部分.h...

html css css-selectors pseudo-element

回答 1 投票 0

CSS 伪元素：使用 attr 引用另一个元素的属性

我想使用 ::before 伪元素插入在 HTML 文件的另一个区域中找到的一些文本。我的HTML： ... 我想使用 ::before 伪元素插入在 HTML 文件的另一个区域中找到的一些文本。我的 HTML： <html> <body notetext="Note"> ... <p class="bodytext">Don't press the red button!</p> </body> 我可以使用 content:attr 来选择当前元素的属性，但是是否可以引用祖先元素的属性？就像在 XPath 中一样，例如 (//body/@notetext) 我拥有的不起作用的CSS： p.bodytext::before { content:attr(notetext); } 我正在使用 Antennahouse Formatter，用于 CSS 分页媒体。如果您可以更改 HTML，您可以考虑使用 CSS 变量，如下所示： p.bodytext::before { content: var(--text); } <body style="--text:'Note '"> <p class="bodytext">Don't press the red button!</p> </body> 仅使用 css 无法引用其他元素内容。也不可能引用父元素。我建议您使用 javascript 和数据属性来解决您的问题。 Temani Afif 的回答很棒，只要您不需要支持 Internet Explorer，我就会推荐它。否则你将需要一个 css 自定义属性 IE polyfill。 Antenna House Formatter 具有 -ah-attr-from() 扩展功能。函数原型与attr()相同，但添加了指定祖先元素的参数： -ah-attr-from( <from-name> , <attr-name> <type-or-unit>? [ , <fallback> ]? ) 注意 - 我是 Antenna House 的员工。

css pseudo-element antenna-house

回答 3 投票 0

如何通过伪元素显示元素的属性值，同时使用CSS隐藏元素内容

我有具有这种模式的元素（XML，不是 HTML，但 CSS 应该仍然有效）： YY 有时我想在输出中看到“YY”，有时我...

css xml pseudo-element

回答 3 投票 0

对伪元素进行分组会破坏CSS

下面的代码工作正常。输入[类型=“范围”]::-webkit-slider-runnable-track { 背景颜色：#000； } 输入[类型=“范围”]::-moz-range-track { 背景颜色：#000； } 下面的代码工作正常。 input[type="range"]::-webkit-slider-runnable-track { background-color: #000; } input[type="range"]::-moz-range-track { background-color: #000; } <input type="range"> 由于某种原因，下面的代码块都不起作用。 input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track { background-color: #000; } <input type="range"> input[type="range"]::-moz-range-track, input[type="range"]::-webkit-slider-runnable-track { background-color: #000; } <input type="range"> 有人知道为什么将这些伪选择器组合在一起会破坏CSS吗？常规选择器列表是无情的。如果列表中的任何成员无效，则整个选择器列表无效，因此会被忽略。

html css css-selectors pseudo-element shadow-dom

回答 1 投票 0

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

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

css css-selectors pseudo-element pseudo-class csslint

回答 2 投票 0

将图像置于伪元素之后或之前居中

我被困在这个上了！我正在尝试将 5 颗星的图像添加到 Shopify 上的推荐滑块中。我一直在使用 CSS 并缩放到我想要的图像大小，调整间距，...

css random css-selectors shopify pseudo-element

回答 1 投票 0

无法识别Selenium中的复选框元素::before和::after

我想单击复选框。尝试了不同的方法。但不工作。有什么解决办法吗？ @FindBy(xpath="//标签[@for='Tnc']") 它仍然没有获得复选框的确切元素。相反...

java selenium-webdriver pseudo-element

回答 1 投票 0

：父级有多个类名

使用 React 与渲染以下结构的组件：使用 React 与渲染以下结构的组件： <div class="top-layout horizontal"> <section class="first"></section> <section class="second"></section> <section class="third"></section> </div> 每个元素都是它们自己的组件，并且具有唯一的类名。当父元素添加 horizontal 类名时，我想更新部分元素 first 的显示方式。鉴于当前的 CSS 设置，我必须处理我无法简单地做 .top-layout.horizontal > .first { background-color: blue; } 我尝试从这里实现解决方案有CSS父选择器吗？但它似乎不起作用。有人发现选择器的设置有什么问题吗？ .top-layout { background-color: green; &.horizonal { background-color: yellow; } } .first { background-color: red; } .first:has(> .horizonal) { background-color: blue; } 你搞反了： .horizontal:has(> .first) { background-color: blue; } 您想要做的是选择 .first 的父级，对吗？所以你需要说“选择.horizontal，它是first的父级”或“其中.horizontal里面有.first”。因此，它选择父级。

css css-selectors pseudo-element

回答 1 投票 0

CSS ::Before 是断线

我对CSS不太有经验，我在网上搜索过，但没有找到这个问题的解决方案。由于某种原因，::before 和文本没有保持在同一行。我还有另一个温度...

html css flexbox pseudo-element

回答 1 投票 0

<div> 及其 ::before

我有两个来自 div 及其 ::before 的重叠点，并且希望左/主点出现在右/伪点的顶部。 div, div::之前{ 宽度：12px；高度：12px；边框：2px 实线

html css z-index pseudo-element

回答 1 投票 0

使用背景滤镜时，伪元素出现在 div 之前

我正在尝试创建主卡，我想要在它后面有一条垂直线。当我在主卡上使用背景滤镜时，效果很好。但是当我把它放在它的父元素上时::before伪元素来...