代码之家 › 专栏 › 技术社区 › fencepencil

如何将::before伪类添加到此元素

pseudo-class pseudo-element css

fencepencil · 技术社区 · 7 年前

大家好,你们这些聪明的CSS人。。。我有一个末日!

如何为“预防保健”标题仅设置::before伪类/id的样式?我试图在它前面加上“成人”一词,但如果我使用id#1506,它将无法工作。如果我只使用类(.tab pane.active),它会将“成人”放在每个活动标题的前面。我做错了什么?

这不起作用:

#1506.tab-pane.active > div:nth-child(2) > div > h3::before {
    content: 'ADULT';
}

这确实有效(但我不想让它们都成为样式):

.tab-pane.active > div:nth-child(2) > div > h3::before {
    content: 'ADULT';
}

非常感谢您的帮助:)

1 回复 | 直到 7 年前

Rajnish Rajput 7 年前

您无法选择 id 以数字开头 CSS选择器

更多信息 CSS-Tricks

解决方案

试试这样的东西 tab1506 或 tabPane1506 或 tp1506

但你的问题还有另一个解决方案,你可以使用

属性选择器:

[id="1506"].tab-pane.active > div:nth-child(2) > div > h3::before {
    content: 'ADULT';  
}

更多信息 read here

推荐文章

Sahil Singh · 使用css在导航栏中定位时出现问题

2 年前

Mike C. · css伪下箭头:未在所有标签上显示后

7 年前

Rusletov · 使元素与浮动元素的边界相邻

7 年前

Hatem · SASS-将更改器应用于::当:悬停后

7 年前

Hacker · 在文本输入中放置美元符号

7 年前

o.danielcoker · CSS-定位伪元素

7 年前

titlu · :选中的伪类选择器在CSS上不工作

7 年前

user7262544 · 如何将变量添加到伪类的jquery选择器?

7 年前

Chris · 伪元素:after正在添加before

8 年前

Russel Riehle · 如何基于父项的右边缘打开超出的子菜单区域?

8 年前