:lang

您正在阅读此内容的英文版本，因为该语系尚未翻译。 帮助我们翻译此文章吧！

 

:lang() CSS 伪类基于元素语言来匹配页面元素。

/* 选取任意的英文（en)段落 */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

注意: 在HTML中, 语言是通过lang 属性,和 <meta> 元素的组合来决定的, 也可能是通过协议的信息来确定（例如HTTP头）. 对于其他文档类型，也可能存在其他用于确定语言的方法。

语法

正式语法

:lang( <language-code> )

参数

<language-code>
 <string> 代表了你想定位的语言. 可接受的值为在HTML 规范中指定的值.

Example

在这个例子中, :lang() 伪类使用子选择器来匹配引用元素(<q>)的父元素. 需要注意的是，此处演示的方法并不是唯一的，最好的方法需要依据文档类型来确定。还需要注意的是， Unicode 值用于指定一些特殊字符的引用.

HTML

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

CSS

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

Result

规范

规范 状态 Comment
Selectors Level 4
:lang()		 Working Draft 无变化.
Selectors Level 3
:lang()		 Recommendation 没有明显的变化.
CSS Level 2 (Revision 1)
:lang()		 Recommendation 最初的定义。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:lang()Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 8Safari Full support 3.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

参考

相关主题
  1. CSS
  2. CSS 参考
  3. CSS Selectors
  4. Guides
    1. 在选择器中使用 :target 伪类
  5. 属性
    1. Selector list [我来译!]
  6. Basic Selectors
    1. 元素选择器
    2. 类选择器
    3. ID选择器
    4. 通配选择器
    5. 属性选择器
  7. Combinators
    1. 相邻兄弟选择器
    2. 通用兄弟选择器
    3. 子选择器
    4. 后代选择器
    5. Column combinator
  8. Pseudo-classes
    1. :active
    2. :any-link
    3. :checked
    4. :blank
    5. :default
    6. :defined
    7. :dir()
    8. :disabled
    9. :empty
    10. :enabled
    11. :first
    12. :first-child
    13. :first-of-type
    14. :fullscreen
    15. :focus
    16. :focus-visible
    17. :focus-within
    18. :has
    19. :host()
    20. :host-context()
    21. :hover
    22. :indeterminate
    23. :in-range
    24. :invalid
    25. :matches() (:any())
    26. :lang
    27. :last-child
    28. :last-of-type
    29. :left
    30. :link
    31. :not()
    32. :nth-child
    33. :nth-last-child
    34. :nth-last-of-type
    35. :nth-of-type
    36. :only-child
    37. :only-of-type
    38. :optional
    39. :out-of-range
    40. :placeholder-shown
    41. :read-only
    42. :read-write
    43. :required
    44. :right
    45. :root
    46. :scope
    47. :target
    48. :valid
    49. :visited
    50. :where() - The specificity adjustment pseudo-class
  9. Pseudo-elements
    1. ::-moz-progress-bar
    2. ::-moz-range-progress [我来译!]
    3. ::-moz-range-thumb [我来译!]
    4. ::-moz-range-track [我来译!]
    5. ::-ms-browse [我来译!]
    6. ::-ms-check
    7. ::-ms-clear
    8. ::-ms-expand [我来译!]
    9. ::-ms-fill [我来译!]
    10. ::-ms-fill-lower [我来译!]
    11. ::-ms-fill-upper [我来译!]
    12. ::-ms-reveal [我来译!]
    13. ::-ms-thumb [我来译!]
    14. ::-ms-ticks-after [我来译!]
    15. ::-ms-ticks-before [我来译!]
    16. ::-ms-tooltip [我来译!]
    17. ::-ms-track [我来译!]
    18. ::-ms-value [我来译!]
    19. ::-webkit-progress-bar
    20. ::-webkit-progress-value [我来译!]
    21. ::-webkit-slider-runnable-track
    22. ::-webkit-slider-thumb
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue (:cue)
    27. ::first-letter (:first-letter)
    28. ::first-line (:first-line)
    29. ::grammar-error
    30. ::marker
    31. ::part() [我来译!]
    32. ::placeholder
    33. ::selection
    34. ::slotted()
    35. ::spelling-error