:lang()
åºçº¿
广æ³å¯ç¨
*
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
* æ¤ç¹æ§çæäºé¨åçæ¯æç¨åº¦å¯è½ææä¸åã
:lang() CSS 伪类åºäºå
ç´ è¯è¨æ¥å¹é
页é¢å
ç´ ã
å°è¯ä¸ä¸
*:lang(en-US) {
outline: 2px solid deeppink;
}
<p lang="en-US">
Music during road trips and long commutes arenât a problem, but using
headphones isnât the best thing to do while driving in your car.
</p>
<p lang="pl-PL">
Gdy widzimy znak z narysowanÄ
czaszkÄ
i napisem
<strong lang="en-US">DANGER</strong> to lepiej nie wchodziÄ do Årodka.
</p>
è¯æ³
>å½¢å¼è¯æ³
css
:lang(<language-code>) {
/* ... */
}
åæ°
<language-code>-
<string>代表äºä½ æ³å®ä½çè¯è¨ã坿¥åç弿¯ HTML è§è䏿å®çå¼ã
示ä¾
å¨è¿ä¸ªä¾åä¸ï¼:lang() 伪类使ç¨åç»å卿¥å¹é
å¼ç¨å
ç´ (<q>) çç¶å
ç´ ãéè¦æ³¨æçæ¯ï¼æ¤å¤æ¼ç¤ºçæ¹æ³å¹¶ä¸æ¯å¯ä¸çï¼æå¥½çæ¹æ³éè¦ä¾æ®ææ¡£ç±»åæ¥ç¡®å®ãè¿éè¦æ³¨æçæ¯ï¼Unicode å¼ç¨äºæå®ä¸äºç¹æ®å符çå¼ç¨ã
HTML
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
css
:lang(en) > q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
quotes: "« " " »";
}
:lang(de) > q {
quotes: "»" "«" "\2039" "\203A";
}
ç»æ
è§è
| è§è |
|---|
| Selectors Level 4> # lang-pseudo> |
æµè§å¨å ¼å®¹æ§
åè§
- è¯è¨ç¸å
³ä¼ªç±»ï¼
:langã:dir - HTML
lang屿§ - HTML
translate屿§ - RFC 5646: ç¨äºæ è¯è¯è¨çæ ç¾ï¼ä¹ç§°ä¸º BCP 47ï¼