html - 基于样式的 CSS 选择器

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 和小字母 ul 元素，我想在字母和数字 ul 中制作粗体数字。即，现在我使用

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

但它使页面上所有具有 style="list-style-type: lower-alpha;" 样式的 ul 都为 lower-alpha，而不仅仅是 ul。

谢谢!

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>