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;
}

但它使页面上的所有 ul 都变成 lower-alpha，但不仅仅是 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>