CSS_选择器_基础选择器与CSS_选择器_扩展选择器

CSS_选择器_基础选择器

　　　　　　　　　　选择器：筛选具有相似特征的元素

　　　　　　　　　　　　　　分类：

　　　　　　　　　　　　　　　1.基础选择器

　　　　　　　　　　　　　　　　1.id选择器：选择器id属性值

               　　　　　　　　　　　　语法：#id属性值
　　　　　　　　　　　　　　　　2.元素选择器：选择具有相同标签名称的元素

               　　　　　　　　　　 语法：标签名称{}

               　　　　　　　　　　 注意：id选择器优先级高于元素选择器

　　　　　　　　　　　　　　　　3.类选择器：选择具有相同的class属性值的元素。

               　　　　　　　　　　 语法：class属性值

                                 注意：类选择器选择器优先级高于元素选择器

CSS_选择器_扩展选择器

　　　　　　　　　　2.扩展选择器

　　　　　　　　　　　1.选择所有元素：

　　　　　　　　　　　　　　*语法：*{}

　　　　　　　　　　　2.并集选择器：

　　　　　　　　　　　　　　* 选择器1，选择器2{}

　　　　　　　　　　　3.子选择器：筛选选择器1元素下的选择器2元素

　　　　　　　　　　　　　　语法：选择器1 选择器2{}

　　　　　　　　　　　4.父选择器：筛选选择器2的父元素选择器1

　　　　　　　　　　　　　　语法：选择器1>选择器2{}　　

　　　　　　　　　　 5.属性选择器：选择元素名称，属性名=属性值的元素

　　　　　　　　　　　　　　语法：元素名称[属性名="属性值"]{}

　　　　　　　　　　 6.伪类选择器：选择一些元素具有的状态

　　　　　　　　　　　　　　语法：元素：状态

　　　　　　　　　　　　　　如：<a>

　　　　　　　　　　　　　　　　　状态：

　　　　　　　　　　　　　　　　　　link：初始化的状态

　　　　　　　　　　　　　　　　　　visited：被访问过的状态

　　　　　　　　　　　　　　　　　　active：正在访问状态

　　　　　　　　　　　　　　　　　　hover ：鼠标悬浮状态　　　　　　　　　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        /*子选择器：筛选选择器1元素下的选择器2元素*/
        div p{
            color: blue;
        }
        /*父选择器：筛选选择器2的父元素选择器1*/
        div > p{
            border: 1px solid;
        }
        /*属性选择器：选择元素名称，属性名=属性值的元素*/
        input[type='text']{
            border: 1px solid;
        }
         /*伪类选择器：选择一些元素具有的状态*/
              /*　link：初始化的状态*/
        a:link{
            color: rebeccapurple;
        }
              /*hover ：鼠标悬浮状态　*/
        a:hover{
            color: deeppink;
        }
            /*active：正在访问状态 */
        a:active{
            color: gold;
        }
           /*visited：被访问过的状态    */
        a:visited{
            color: lawngreen;
        }
    </style>
</head>
<body>
    <div>
        <p>清华大学</p>
    </div>
    <p>计算机系</p>

    <div>ddddd</div>
    <input type="text">
    <input type="text">

    <br>  <br>  <br>

    <a href="#">全职法师</a>

</body>
</html>