Attribute selectors (CSS selectors)

Is selected to match the properties of the element through the Properties tab, summarized using number for identification.

For easy viewing, the page html css code into them.

Now select the page title tag with all the attributes of this property by title.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       
        <style >
         [title]{
            color:red;
         }

        </style>
    </head>
    <body>
     <button title="登录" >登录</button>
     <button>登录</button>
    </body>
</html>

Now select the title attribute by attribute value inside. font-size changing font size, font-weight change font width.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       
        <style >
         [title="登录"]{
            color:red;
         }
        [title="注册"]{
            color:green;
            font-size: 18px;
            font-weight: 600;
        }
        </style>
    </head>
    < Body > 
     < the Button title = "login"  > Log </ the Button > 
     < the Button title = "Registration"  > Registration </ the Button > 
     
    </ body > 
</ HTML >

It is confirmed by selecting the property value of the property. Format: [Attribute = "all"] {}

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
    < head > 
        < Meta charset = "UTF-. 8" > 
       
        < style > 
      [title = "This is Baidu"] { 
     Color : Red ; 
      } 
        </ style > 
    </ head > 
    < body > 
     < the Button title = "click to login"  > Log </ the Button > 
     < the Button title = "registration" > Register </button>
     <a  title="这是百度"  href="https://wwww.baidu.com">baidu</a>
    </body>
</html>

Confirmed by selecting the beginning of the attribute value of the attribute property values. Format: [Properties ^ = "top"] {}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       
        <style >
      [title^="这是"]{
     color:red;
      }
        </style>
    </head>
    <body>
     <button title="点击登录" >登录</button>
     <button title="注册" </Register>button>
     <a  title="这是百度"  href="https://wwww.baidu.com">baidu</a>
    </body>
</html>

Be selected by the end of the selected attribute value of the property. Format: [attribute $ = "end"] {}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       
        <style >
      [title^="点击"]{
     color:red;
      }
        </style>
    </head>
    <body>
     <button title="点击登录" >登录</button>
     <button title="注册" </Register>button>
     <a  title="这是百度"  href="https://wwww.baidu.com">baidu</a>
    </body>
</html>

2019-08-24 10:48:26

Attribute selectors (CSS selectors)

Guess you like