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

如果CSS和HTML都是不区分大小写的语言（*），则表示

选择器中属性名称和值的大小写敏感度取决于文档语言

如何将其与选择器中区分大小写的属性值相协调？比如说,

div[title=title]{color:green}

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

这是一个div

这是浏览器中的错误吗？当我说“浏览器”时，我指的是所有的浏览器。还是我在看CSS3规范的未完成版本？这会很奇怪，因为CSS2规范中也有相同的文本行

---

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

您回答了自己的问题：

选择器中属性名称和值的大小写敏感度取决于文档语言

但更进一步，我认为这是因为对于浏览器来说，

it

和

it

不是同一个字符串。对于浏览器来说，它们是两种不同的东西

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

---

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

属性选择器中的字符串在HTML中区分大小写匹配，这几乎就是问题所在。我不知道为什么他们不会——以

name

为例

name=“foo”

和

name=“foo”

发送到服务器的方式毕竟不同。即使

id

s都是区分大小写的，如果您希望的话；它运行良好并经过验证，而且似乎应该符合规范（但我不相信它在任何地方都能工作）

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

选择器规范将ID、类、元素名称、属性名称和属性值的大小写敏感度留给宿主语言定义。[选择器]

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

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

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

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

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

---

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

为了进行选择器匹配，HTML文档中HTML元素的属性名和元素名必须视为不区分大小写的ASCII

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

当然，HTML4并没有说明与选择器的互操作，但它确实说明了这一点。由于选择器依赖于文档语言来确定大小写敏感度，因此这里没有区别

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

---

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

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

或

两者都与此分区匹配：

这是一个div

---

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

是，但HTML和CSS不区分大小写！事实上，如果用大写字母写标记名或属性名，同样的例子也可以。只是属性值有这个问题，这是有道理的。因为它是实际的

值

而不是标记，所以它应该区分大小写。我不希望

doGS

和

doGS

相等。而且，在标记中，这些值总是不区分大小写的。您可以编写

，这个答案似乎暗示这完全取决于浏览器-虽然如此，但这并不自动意味着不存在符合某种规范的概念，除非有证据证明存在其他情况（例如，任何规范中都没有定义其应如何工作）。此外：但是属性不是，因为它们是由用户定义的。因此，它将它们视为区分大小写。基本上，HTML和CSS是标准化的。这是不正确的，除非你只是指非标准属性。HTML对哪些属性区分大小写，哪些属性不区分大小写有非常明确的定义（HTML5甚至包括自定义的da）
div[title=TITLE i] { color:green; }

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

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