选择器

选择器

        

:hover :active :link :visited :nth-child伪类选择器
* 全局选择器
. 类选择器、class选择器 10
# id选择器 100
元素 元素选择器 1
空格 包含选择器 权重累加
~ 兄弟选择器
+ 相邻选择器
, 群组选择器

[] 属性选择器

 

举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
    <style>
        /*#box{
            width:100px;
            height:100px;
            background: :red;
            padding:10px 20px 30px 40px;
            margin: 10px 20px 30px 40px;
        }*/
        /*所有变红*/
        /*ul {
            color: red;
        }*/
        
        /*第二个变红*/
        /*ul li:nth-child(2){
            color:red;
        }*/
        /*兄弟选择器*/
        /*ul.first~li{
            color:red;
        }*/
        /*相邻选择器*/
        ul.first+li{
            color: red;
        }
    </style>
    </head>
    <body>
        <!--盒模型：width height 宽高
               padding 内填充
               border 边框
               margin 外边距-->
               
        <div id="box"></div>
        <ul>
          <li>第二个</li>
          <li class="first">第一个</li>
          <li>第二个</li>
          <li>第三个</li>
        </ul>
    </body>
</html>

 

posted on 2018-07-19 20:16  阿衍小同学  阅读(120)  评论(0)  编辑  收藏  举报