CSS选择器

HTML标记定义

  <p>...</p>

  p { 属性:属性值 ; 属性1:属性值1 }

  p可以叫做选择器,定义那个标记中的内容执行其中的样式

  一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不加;

 

Class定义

  <p class="oijwd">...</p>

  class定义是以“.”开始

  .oijwd { 属性:属性值 ; 属性1:属性值1 }

 

ID定义

  <p id="oid">...</p>

  ID定义是以“#”开始

  #oid { 属性:属性值 ; 属性1:属性值1 }

 

优先级问题

  ID>Class>HTML

  同级时选择离元素最近的一个

 

组合选择器

  同时控制多个元素

  h1,h2,h3,p,.div,#abc { font-size:14px; color:red; }

  选择器组合可以用“,”隔开

 

伪元素选择器

  a:link  正常链接的样式

  a:hover  鼠标放上去的样式

  a:active  选择链接时的样式

  a:visited  已经访问过的链接样式

 

<!doctype html>
<html>
    <head>
        <title>定义CSS样式(CSS选择器)</title>
        <meta charset="utf-8">
        <style type="text/css">
            /*
            p { color:red; font-size:28px; }
            .p { color:green; font-size:28px; }
            .pp{ color:red; }
            #ppp { color:blue; }
            #ppp p { color:red; }
            
            div { color:red;  }
            .p { color:green;  }
            #pp {  color:blue;   }
            
            .p { color:red;  }
            .p { color:green;  }
                
            h1 , h2 , h3 , h4 , p, .div ,#div{ color:red ; font-size:40px } 
            
            */
            a:link { color:red; }
            a:hover { color:green; }
            a:active { color:yellow; }
            a:visited { color:blue; }
            
            
        </style>
    </head>
    <body>
        <!--
        <div id="pp" class="p">
            <h1>麦子学院麦子学院麦子学院</h1>
            <h2>麦子学院麦子学院麦子学院</h2>
            <h3>麦子学院麦子学院麦子学院</h3>
            <h4>麦子学院麦子学院麦子学院</h4>
        </div>
        <p>
        麦子学院麦子学院麦子学院
        </p>
        <div class="div">
        麦子学院麦子学院麦子学院
        </div>
        
        <div id="div">
        麦子学院麦子学院麦子学院
        </div>
        -->
        <a href="http://www.baidu.com" target="_blank">百度</a>
        <a href="http://www.baidu.com/ddddd" target="_blank">百度ddd</a>
        <a href="http://www.baidu.com/ddddsasad" target="_blank">百度dasdd</a>
        <a href="http://www.baidu.com/dasasadddd" target="_blank">百度asaddd</a>
        <a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddsad</a>
        <a href="http://www.baidu.com/dsasaddd" target="_blank">百度ddd</a>
        <a href="http://www.baidu.com/dddasasdd" target="_blank">百度asaddd</a>
        <a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddd</a>
    </body>
</html>

 

posted @ 2018-11-19 17:08  _chy  阅读(202)  评论(0编辑  收藏  举报