Question

我有一个HTML页面

 <smalltooltip id="menu-discussion" data-title-tooltip="Discussion"></smalltooltip>
 <smalltooltip id="menu-settings" data-title-tooltip="Settings"></smalltooltip>

和css风格

smalltooltip[data-title-tooltip]:after {
//css style
}

它正在运行，但如何选择ID“菜单讨论”，如下所示：

#menu-discussion[data-title-tooltip]:after{
    width: 70px;
}

但它不起作用。

Answer 1

您只是选择'data-title-tooltip'属性而不仅仅是'data-title'？

#menu-discussion[data-title]:after {...}

或者您是否缺少after伪元素的内容属性？

#menu-discussion[data-title]:after {
  content: '';
}

Answer 2

使用以下格式

smalltooltip[id="menu-discussion"][data-title-tooltip]:after {
     width: 70px;
}

供参考 - http://plnkr.co/edit/IJPhnQ6rq6Yi5I2yYJuu?p=preview

修改

根据编辑过的问题，指定的样式应该没有问题，但是，我建议您使用上面指定元素的样式，因为已知非限定属性选择器很慢

如何在css中使用data-attr选择DOM ID？

2 个答案: