CSS 中的 :lang 伪类

cssweb developmentfront end technology更新于 2025/1/7 6:04:17

CSS :lang() 伪类选择器用于选择指定 lang 属性的元素。这有助于我们定位与内容相关的特定语言，并相应地设置样式。

语法

以下是语法 −

:lang(){
    /*declarations*/
}

让我们看一个 CSS :lang() 伪类选择器的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it)::after {
   padding: 20px;
   content: '~ Italian';
   font-style: italic;
}
p:lang(es)::after {
   padding: 8px;
   content: '~ Spanish';
   font-style: italic;
}
p:lang(en)::after {
   padding: 20px;
   content: '~ English';
   font-style: italic;
}
</style>
</head>
<body>
<p lang='it'>Bella ciao</p>
<p lang='en'>Nice hello</p>
<p lang='es'>Bueno adios</p>
</body>
</html>

输出

让我们再看一个 CSS :lang() 伪类选择器的例子 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div{
   margin: 10px;
   padding: 10px;
   text-align: center;
   border: 1px solid black;
}
div:lang(it)::after {
   padding: 20px;
   content: '~ Italy';
   font-style: italic;
}
div:lang(es)::after {
   padding: 8px;
   content: '~ Spain';
   font-style: italic;
}
div:lang(nl)::after {
   padding: 20px;
   content: '~ Belgium';
   font-style: italic;
}
div:lang(es){
   background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
div:lang(it){
   background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
div:lang(nl){
   background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div lang='it'>Rome</div>
<div lang='nl'>Brussels</div>
<div lang='es'>Madrid</div>
</body>
</html>