如何将CSS选择器应用于区分大小写的属性值？

Question

如果CSS和HTML都是不区分大小写的语言（*），并且the W3C说

  

选择器中属性名称和值的区分大小写取决于文档语言。

如何协调选择器中区分大小写的属性值？例如，

div[title=TITLE] {color:green}

不会使此HTML文本变为绿色：

<div title="title">This is a div</div>

Fiddle here。

这是浏览器中的错误吗？当我说“浏览器”时，我指的是所有这些。或者我正在查看未完成的CSS3规格版本？这很奇怪，因为同样的文本行也在CSS2规范中here。

_{（*）除了一些显式异常的功能，例如类和ID名称。请注意，此示例没有类名或ID名。}

Answer 1

你回答了自己的问题：

  

选择器中属性名称和值的区分大小写取决于文档语言。

但更进一步，我认为这是因为浏览器it和IT不是同一个字符串。它们是浏览器的两个不同的东西。

EDIT --- 你在评论中提出了一些好的东西。让我解释一下：HTML / CSS解析器将HTML和CSS视为不区分大小写。那是因为他们是。但属性不是，因为它们是由用户定义的。因此，它将它们视为区分大小写。基本上，HTML和CSS是标准化的。属性不是。

再次编辑--- HTTP方法是标准化的，（我认为）因此使它们不必区分大小写。

Answer 2

HTML5实际上包含一个专用于区分大小写的entire section，用于选择器匹配。以下是关于属性名称和值的说法：

  为了选择器匹配的目的，

HTML文档中HTML元素的属性和元素名称必须被视为ASCII不区分大小写。

     

其他所有内容（HTML元素的属性值，无怪癖模式和有限怪癖模式中的ID和类，以及XML文档中的元素名称，属性名称和属性值）必须视为区分大小写选择器匹配。

当然，HTML 4没有说明与选择器互操作的任何内容，但确实说the title attribute in particular is case-sensitive。由于选择器依赖于文档语言来确定区分大小写，因此这里没有区别。

XHTML遵循与XML相同的一组规则：所有属性值都应区分大小写，因此选择器必须遵循区分大小写。再一次，没有区别。

所以你所看到的完全是设计;没有浏览器或规格问题。

Answer 3

属性选择器中的字符串在HTML中区分大小写，这就是那个。我不知道他们为什么不这样做 - 以name为例。毕竟，name="foo"和name="FoO"会以不同的方式发送到服务器。如果你想要它们，即使id也区分大小写; this工作正常并且有效，看起来它应该符合规范（但我不相信它可以在任何地方工作）。

请参阅the specification（相关位在HTML规范中，而不是CSS中）：

  

Selectors规范保留了由主语言定义的ID，类，元素名称，属性名称和属性值的区分大小写。 [SELECTORS]

     

为了选择器匹配的目的，处于怪癖模式的文档中HTML元素的唯一标识符必须被视为ASCII不区分大小写。

     

出于选择器匹配的目的，处于怪癖模式的文档中HTML元素的class属性中的类必须被视为ASCII不区分大小写。

     

将CSS元素类型选择器与HTML文档中HTML元素的名称进行比较时，必须首先将CSS元素类型选择器转换为ASCII小写。必须根据其原始情况比较与其他元素相比的相同选择器。在这两种情况下，比较都区分大小写。

     

将CSS属性选择器的名称部分与HTML文档中HTML元素的无名称空间属性的名称进行比较时，必须首先将CSS属性选择器的名称部分转换为ASCII小写。必须根据其原始情况比较与其他属性相比的相同选择器。在这两种情况下，比较都区分大小写。

     

其他所有内容（HTML元素的属性值，无怪癖模式和有限怪癖模式中的ID和类，以及XML文档中的元素名称，属性名称和属性值）必须视为区分大小写选择器匹配。

Answer 4

一些较新的浏览器支持此语法

div[title=TITLE i] { color:green; }

或

div[title=TITLE I] { color:green; }

这两个都匹配这个DIV：

<div title="title">This is a div</div>

注意：支持：版本：Chrome＆gt; = 49.0，Firefox（Gecko）＆gt; = 47.0，Safari＆gt; = 9