如何在 css 中选择带有 data-attr 的 DOM ID？答案

【问题标题】：How to select DOM ID with data-attr in css?如何在 css 中选择带有 data-attr 的 DOM ID？
【发布时间】：2015-10-09 06:59:51
【问题描述】：

我有一个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"：

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

但它不起作用。

【问题讨论】：

标签： css html dom

【解决方案1】：

您只是选择了“data-title-tooltip”属性而不是“data-title”吗？

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

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

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

【讨论】：

【解决方案2】：

使用以下样式

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

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

编辑

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

【讨论】：

@MinhAnh - 我已经更新了答案。请重新检查。