当前位置: 首页 > 面试题库 >

CSS中的html [lang =“ en”]和html:lang(en)有什么区别?

燕元明
2023-03-14
问题内容

CSS语言伪类允许我们为不同的语言指定不同的样式,如下所示:

html:lang(en) .foo { ... }

但是,这在IE7中不起作用,因此我一直在使用属性选择器:

html[lang="en"] .foo { ... }

他们似乎做同一件事,但是有细微的差别吗?如果没有,当属性选择器执行完全相同的操作时,为什么CSS甚至还具有语言伪类?


问题答案:

在HTML中,:lang()伪类和属性选择器都将匹配具有相应lang属性的元素。

不同的是,一个浏览器可能不得不确定给定元件的抵靠测试时的语言的其它方式:lang(),其可通过在文档语言和/或实施限定伪类,而一个属性选择器将
检查一个元件 即给定的属性 ,不附带任何基于文档的语义。

例如,在HTML中,伪类还将匹配元素的任何后代,后者没有不同lang,取决于浏览器如何确定这些后代的语言。通常,如果未明确设置后代,则后代将从其祖先那里继承language属性。

这里是什么规格说:

:lang(C)与’| =’运算符之间的区别在于’|
=’运算符仅对元素上的给定属性执行比较,而:lang(C)伪类使用UAs对文档语义的了解来执行比较。


在此HTML示例中,仅BODY匹配[lang|=fr](因为它具有LANG属性),而BODY和P匹配:lang(fr)(因为它们都是法语)。P不匹配,[lang|=fr]因为它没有LANG属性。

<body lang=fr>

  <p>Je suis français.</p>

</body>

请注意“具有LANG属性”和“法语”的特定用语。如您所想,这两个短语在英语中的含义非常不同。

在您的示例中,以下选择器也将与您的.foo元素匹配:

.foo:lang(en)

但是,如果以下选择器没有lang设置自己的属性,则不会:

.foo[lang="en"]
.foo[lang|="en"]

至于浏览器支持,:lang()从IE8开始支持伪类,因此IE7实际上是您将无法通过在属性选择器上使用伪类来支持的唯一浏览器。

基于这种理解,您可以回答“我应该使用哪个”这个问题: 默认情况下
您应该始终使用:lang()伪类,除非某些怪癖(或需要支持IE7)需要使用属性选择器来解决。

选择器4不仅为:lang()伪类带来了增强的功能(从而扩大了它与属性选择器之间的功能差距),而且还[引入了:dir()伪类以根据元素的方向性进行匹配。因为方向性是与语言相关的属性,所以dirlang属性在HTML中的工作方式类似,并且:dir()和其对应的属性选择器之间的区别类似于和与其对应的属性选择器之间的区别:lang()-直到以下引号的第一句在其中实际上,在描述以下内容的部分中
逐字逐句地复制 了该段落:lang()

:dir(C)和“ [dir = C]”之间的区别在于,“ [dir =
C]”仅对元素上的给定属性执行比较,而:dir(C)伪类使用UA的文档语义知识来执行比较。例如,在HTML中,元素的方向性是继承的,因此没有dir属性的子级将与其具有有效dir属性的最接近祖先具有相同的方向性。再举一个例子,在HTML中,匹配“
[dir = auto]”的元素将匹配:dir(ltr)或:dir(rtl),具体取决于元素的解析方向(由其内容决定)。[HTML5]



 类似资料:
  • 问题内容: 我将所有值都放在一个表中,并按照要求进行格式化。我必须根据页面顶部下拉菜单中的用户选择来更改网站上的语言。 如果我使用语言代码,例如,则可以正常工作。如果我将其用作语言代码,则无法使用。可能是什么问题?哪个是正确的方法? 问题答案: “ en”是ISO 639指定的语言代码,而US是3166指定的国家代码。 在Java中,Locale对象将语言识别为 languageCode_coun

  • D2L.ai: Interactive Deep Learning Book with Multi-Framework Code, Math, and Discussions Book website | STAT 157 Course at UC Berkeley | Latest version: v0.17.0 The best way to understand deep learning

  • 问题内容: 可以在这里找到代码: 我发现有内标记,也有内标签。它们都是必需的吗?(在这种情况下,CSS似乎覆盖了HTML属性)关于它们之间的区别是否有任何解释? 问题答案: 我检查了文档,但是它们并不清楚如果同时设置了它们。 那藏在这里的某个地方: UA可以选择使用HTML源文档中的表示属性。如果是这样,则将这些属性转换为对应的CSS规则,其特异性等于0,并且将其视为在作者样式表的开头插入。因此,

  • 本文向大家介绍Html和xhtml有什么区别?相关面试题,主要包含被问及Html和xhtml有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 html是一种基本的web网页设计语言,xhtml是一个基于XML的置标语言。 最主要的不同: XHTML元素必须正确的被嵌套,元素必须关闭,标签必须小写,必须有根元素。

  • 本文向大家介绍HTML 和 XHTML 有什么区别?相关面试题,主要包含被问及HTML 和 XHTML 有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 为了规范HTML,W3C结合XML制定了XHTML 1.0标准,这个标准没有增加任何新的tag,只是按照XML的要求来规范HTML。 1)XHTML中的标签都必须被正确地嵌套,HTML中的某些标签可以彼此不正确的嵌套。 2)XHTML中的所

  • 问题内容: 很快,我的问题是,您对上述格式有想法吗? 我想按照上述格式(如JSON)在数组后存储长站点设置。 它看起来像JSON,但可能不是。 我对这种格式的读取和创建一无所知。 实际上,哪种PHP和MySQL数据类型可用于以最佳性能存储长参数? 问题答案: 您在此处显示的数据类型是PHP中的序列化变量。 要序列化或反序列化,只需使用以下两种方法: http://php.net/manual/zh