css特定属性选择器lang使用详解

css :lang选择器定义用法介绍

lang 向带有指定 lang 属性开始的元素添加样式。

注意: 值是整个单词,单独像lang="en",或者使用连字符(-)如lang ="en-us"

语法:

  1. :lang {
  2.    style:属性;
  3. }

lang使用举例:

每个

元素lang属性值等于"abstract"背景颜色设置为red.

  1. p:lang(abstract)
  2. { 
  3. background:red;
  4. }

请再看下面的例子:

  1. *[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

  1. <p lang="en">段落en</p>
  2. <p lang="en-us">段落en-us</p>
  3. <p lang="en-au">段落en-au</p>
  4. <p lang="fr">段落fr</p>
  5. <p lang="cy-en">段落xy-en</p>

lang完整例子

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <style type="text/css"> 
  5.         :lang(en) { 
  6.          color:blue;  
  7.         } 
  8.         </style> 
  9.     </head> 
  10.     <body> 
  11.         <a lang="en-us" href="http://www.phpstudy.net"> phpstudy </a> 
  12.         <a lang="en-uk">HTML</a>
  13.         <a lang="en" href="http://www.511yj.com"> 511遇见</a> 
  14.     </body> 
  15. </html>

运行效果

phpstudy
HTML
511遇见


发布日期:

所属分类: Css/Html5 标签: