Home > Article > Web Front-end > How to use specific attribute selector lang in css? Introduction to use (detailed explanation)
How to use specific attribute selector lang in css? Introduction to use (detailed explanation)
- 青灯夜游Original
- 2018-09-17 16:40:153022browse
CSS 2 introduced attribute selectors, which can select elements based on their attributes and attribute values. This chapter will introduce to you how to use the CSS specific attribute selector lang (detailed explanation). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
css :lang selector definition usage introduction
lang Adds a style to elements starting with the specified lang attribute.
Note: Values are whole words, alone like lang="en", or with a hyphen (-) like lang="en-us".
Syntax:
:lang {
style:属性；
}lang usage example:
The lang attribute value of each element is equal to the "abstract" background color setting For red.
p:lang(abstract){
background:red;
}Please look at the following example again:
*[lang|="en"] {color: red;}The above rule will select all elements whose lang attribute is equal to en or starts with en-. Therefore, the first three elements in the following example markup will be selected, but the last two elements will not be selected:
<p lang="en">段落en</p> <p lang="en-us">段落en-us</p> <p lang="en-au">段落en-au</p> <p lang="fr">段落fr</p> <p lang="cy-en">段落xy-en</p>
langFull example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
:lang(en) {
color:blue;
display: block;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#"> phpstudy </a>
<a>HTML</a>
<a href="#"> 511遇见</a>
</body>
</html> Rendering:
The above is the detailed content of How to use specific attribute selector lang in css? Introduction to use (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!