How to use specific attribute selector lang in css? Introduction to use (detailed explanation)

青灯夜游
Release: 2018-09-17 16:40:15
Original
3072 people have browsed it

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:属性;
}
Copy after login

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;
}
Copy after login

Please look at the following example again:

*[lang|="en"] {color: red;}
Copy after login

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>
Copy after login

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>
Copy after login

Rendering:

How to use specific attribute selector lang in css? Introduction to use (detailed explanation)

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template