html - CSS 选择器 [类型 ="var"] 不选择低字母与高字母

Question

我正在使用来自 here 的 @DisgruntledGoat 方法为了在我所有的有序列表类型周围放置括号，并使用一些相对和绝对定位使其看起来“正常”。除了我的 CSS 选择了正确的类型属性外，一切都完全按预期工作。

我有这个...

ol[type] {
    counter-reset: list;
}

ol[type] li {
    list-style: none;
    position: relative;
}

ol[type="1"] > li:before {
    counter-increment: list;
    content: " (" counter(list, decimal) ") ";
    position: absolute;
    left: -1.4em;
}

ol[type="a"] > li:before {
    counter-increment: list;
    content: " (" counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

ol[type="A"] > li:before {
    counter-increment: list;
    content: " (" counter(list, upper-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

我的问题是，根据(编辑:在一些网站上发现的 W3C 规则和想法)，似乎 type="var"选择器因为 HTML 实际上不区分大小写(这使得不对我来说有意义，因为“a”给出低位字母，而“A”给出高位字母......好吧，根据 here 无论如何。

到目前为止，无论我尝试什么，我所有的 ol[type="a"] 对象都被选中并通过这行 content: "("counter(list, upper-alpha ) ") "。我需要一些帮助来弄清楚如何确保我的 lower-alpha 保持小写。

附言这是一个具有法律条款的合法网站，他们告诉我他们需要区分大小写。

编辑:

我最终使用了 JQuery 并为 DOM 中的每个 OL 类型添加了一个类，一个用于数字，一个用于低字母，一个用于高字母。然后很容易覆盖每个元素的选择以及 :before 伪选择器，我认为这可能是最初的问题。

Answer 1

来自site you link to :

The value specified in an attribute selector is case sensitive if the attribute value in the markup language is case sensitive. Thus, values for id and class attributes in HTML are case sensitive, while values for lang and type attributes are not.

您使用的是 type 属性，它似乎不区分大小写。因此，使用纯 CSS，无法区分。

您可能无法使用 JavaScript。

编辑:这里有一些 JS 来区分和添加类，分别是 a 和 A:

var alphaLists = document.querySelectorAll('ol[type="a"]');
for (var i = 0; i < alphaLists.length; i++) {
    if (alphaLists[i].type == 'a') {
        alphaLists[i].className += ' a';
    }
    if (alphaLists[i].type == 'A') {
        alphaLists[i].className += ' A';
    }
}

Fiddle