Question

是否可以根据元素的样式声明css路径？例如，我在页面上有两个ul元素。其中一个有样式list-style-type: lower-alpha;：

<ul start="1" style="list-style-type: lower-alpha;">

第二个ul没有list-style-type样式：

<ul start="1">

我需要将css应用于具有list-style-type的ul元素。如何编写这样的css选择器路径？

主要问题是我在同一页面上有数字ul和低alpha ul元素，我想在alpha和数字ul中使用粗体数字。即，现在我使用

.ts4page  ul,ol li:before {
    content: counter(item, lower-alpha) ". ";
    counter-increment: item;
    font-weight: bold;
    margin-bottom: 3px;
}

但是它会在页面上产生较低的alpha all ul，但不仅仅是ul，它具有style="list-style-type: lower-alpha;"样式。

谢谢！

Answer 1

您可以使用属性选择器[style="list-style-type: lower-alpha;"]

ul[style="list-style-type: lower-alpha;"] {
  color: green;
}

<ul start="1" style="list-style-type: lower-alpha;">
  <li>Li</li>
  <li>Li</li>
</ul>
<ul start="1">
  <li>Li</li>
  <li>Li</li>
</ul>

如果您有更多内联样式，可以使用[attr*=value]查找list-style-type: lower-alpha;作为子字符串

ul[style*="list-style-type: lower-alpha;"] {
  color: green;
}

<ul start="1" style="opacity: .7; list-style-type: lower-alpha; font-size: 12px;">
  <li>Li</li>
  <li>Li</li>
</ul>
<ul start="1">
  <li>Li</li>
  <li>Li</li>
</ul>

基于样式的CSS选择器

1 个答案: