Question

我正在使用here中的 @DisgruntledGoat 方法，以便在我的所有有序列表类型周围放置括号，并使用一些相对和绝对定位来使其看起来像＃34;正常＆＃34 ;.除了我的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规则和想法），似乎类型=＆＃34; var＆＃34;作为HTML的选择器实际上不区分大小写（这对我来说没有意义，因为＆＃34; a＆＃34;给出低-α和＆＃34; A＆＃34;给出高-α...根据{ {3}}无论如何。

到目前为止，无论我尝试什么，我的所有ol [type =＆＃34; a＆＃34;]对象都会被选中并通过此行content: " (" counter(list, upper-alpha) ") "重新生成为高位字母。我需要一些帮助来弄清楚如何确保我的低alpha值仍然较低。

P.S。这是针对具有法律条款的合法网站，他们告诉我他们需要小写与大写区别。

修改

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

Answer 1

来自site you link to：

如果标记语言中的属性值区分大小写，则属性选择器中指定的值区分大小写。因此，HTML中id和class属性的值区分大小写，而lang和类型属性的值不是。

您正在使用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

Answer 2

出于选择器匹配的目的，属性值的区分大小写通常由文档语言决定。选择器匹配是根据文档语言给出的规则执行的。

在HTML 4中，这就是属性定义的样子：

type = 样式信息 [CI]

但prose中提供了有关区分大小写的更多详细信息。特别是它表示值对ul元素不区分大小写，对ol元素区分大小写。

出于某种原因，在将值与选择器匹配时，没有浏览器尊重这种区别，并且浏览器可能会使用{4}}的HTML 4规范给出的 [CI] 标记和ul个元素，导致出现不区分大小写的匹配行为。

在HTML5中，all attribute values must now match selectors case-sensitively regardless of the attribute。从它的外观来看，尚未实现更新其行为以匹配最新标准，因此匹配ol元素上的type属性的属性选择器将继续匹配不区分大小写。无论哪种方式，这种行为都是错误的，应该在所有浏览器中修复。希望它随着counter styles的实施而得到修复。

您仍然可以通过使用类名来解决此问题 - 出于某种原因，browsers implemented case-sensitive selector matching for the class attribute但不是ol属性，前提是后者应区分大小写。

Answer 3

如果它不起作用，那么我怀疑使用纯css有一个可靠的解决方案。我会用jQuery来注入标签。

如果没有什么能阻止你在你的html中添加类，那么你可以这样做：

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

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

并相应地添加“上”和“下”类。

如果你不能改变html，那么使用jQuery添加类：

$('ol').each(function(){
    if ($(this).attr('type') == "a") $(this).addClass('lower');
    if ($(this).attr('type') == "A") $(this).addClass('upper');
});

CSS Selector [type =＆＃34; var＆＃34;]不选择低-α与高-α

修改

3 个答案: