Tag selector

　　1. Select the target to give the label style, so called tag selector , also known element selector .

2, for all the same label, to the same style.

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > the CSS Comment </ title > 
    
    < style type = "text / CSS" >  
    / * tag selector : tag as a selector * / 
        P { 
            Color : Red ; 
        } 
        div { 
            Color : Purple ; 
        } 

    </ style > 
</head> 
< Body > 
    < P > Li Dazui </ P > 
    < P > Tong dispensers </ P > 
    < P > Bai Zhantang </ P > 
    < div > Naruto </ div > 
    < div > Sasuke </ div > 
    
</ body > 
</ HTML >

Class selector

1, html statement, CSS call

2, the format: {class name attribute: value; attribute: value}.

3, the class name try not to use an underscore (replaced by hyphens), pure digital, Chinese, see specific naming conventions.

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > the CSS Comment </ title > 
    
    < style type = "text / CSS" >  
    / * tag selector : tag as a selector * / 
        P { 
            Color : Red ; 
        } 
        div { 
            Color : Purple ; 
        } 
    / * class selector: html declaration, CSS call * /
        .mingren { 
            Color : Orange ; 
            font-weight : Bold ; 
            font-Family : "Microsoft yahei" 

        } 
        .zuozhu { 

            Color : Blue ; 
        } 

    </ style > 
</ head > 
< body > 
    < P > Li Dazui </ P > 
    < P > Tong dispensers </ P > 
    < P > Bai Zhantang </ P> 
    <! - declaring class -> 
    < div class = "Mingren" > Naruto </ div > 
    < div class = "zuozhu" > Sasuke </ div > 
    
</ body > 
</ HTML >

Multi-class name selector

1, mix and match, more freedom

2, a plurality of class names separated by spaces, regardless of the order

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
        .font20{
            font-size: 20px；
        }
        .font14{
            font-size:14;
        }
        .pink{
            color: pink;
        }

    </style>
</head>
<body>
    <div class="font20 pink">亚瑟</div>
    <div class="font20">项羽</div>
    <div class="font14 pink">刘备</div>
    <div class="font14">安琪拉</div>
</body>
</html>

id selector

1, id is the name of the html element id attribute values, the majority of html elements specific definition id attribute, id value elements are unique and can only correspond to a certain specific elements in the document

2, can be repeatedly used class selectors, similar names. W3C regulations, can only use the id selector once, the equivalent of ID number. The difference is in the number of uses

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink"></Arthurdiv > 
    < div > Xiang </ div > 
    < div > Bei </ div > 
    < div > Angela </ div > 
</ body > 
</ HTML >

Wildcard selector

* On behalf of all selectors

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
        *{
            color: pink;
        }
    </style>
</head>
<body>
    <div>亚瑟</div>
    <the p- > Liu Bei </ the p- > 
    < h1 > I am a paragraph </ h1 > 
</ body > 
</ HTML >

Pseudo class selector

Used to add special effects to some selectors, such as the effect of adding to the link, such as may be selected first, the n selectors.

Link selector

1, a: link / * unvisited links * /

2, a: visited / * visited links * /

3, a: hover / * the mouse into the link * /

3, a: activea: / * Hold down the mouse on the link * /

Try not to reverse the order, the order lvha (love hate mnemonics) of.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
        a:link {
            color: blue;
        }
        a:visited {
            color: gray;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: red;        }
        
    </style>
</head>
<body>
    <div><a href="#">秒杀</a></div>

</body>
</html>

CSS 2 study notes: selector