CSS基础选择器和扩展选择器

CSS基础选择器

基础选择器

1.id选择器：选择具体的id属性值的元素：建议在一个html中id值唯一

　　#id属性值{}

2.元素选择器:选择具有相同标签名称的元素

　　语法：标签名称{}

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

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

　　语法：.class属性值{}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: green;
        }
        .cls{
            color: blue;
        }
    </style>
</head>
<body>

    <!--基础选择器
     1.id选择器：选择具体的id属性值的元素：建议在一个html中id值唯一 
    　　#id属性值{}
     2.元素选择器:选择具有相同标签名称的元素 
    　　语法：标签名称{} 
    　　注意：id选择器优先级高于元素选择器
     3.类选择器：选择具有相同的class属性值的选择 
    　　语法：.class属性值{} 
    　　注意：类选择器优先级高于元素选择器-->
    <div id="div1">id选择器</div>
    <div>选择器</div>
    <p class="cls">类选择器</p>
</body>
</html>

CSS扩展选择器

　　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>
        /*子选择器*/
        div p{
            color: red;
        }
        /*父选择器*/
        div>p{
            border: 1px solid;
        }
        /*属性选择器*/
        input[type="text"]{
            border: 5px solid;
        }
        /*伪类选择器*/
        /*初始化状态*/
        a:link{
            color: red;
        }
        /*鼠标悬浮状态*/
        a:hover{
            color: green;
        }
        /*正在访问状态*/
        a:active{
            color: yellow;
        }
        /*被访问过的状态*/
        a:visited{
            color: darkorchid;
        }
    </style>
</head>
<body>

    <div>
        <p>子选择器</p>
    </div>
    <p>选择器</p>
    <div>qqq</div>

    <input type="text">
    <input type="password">

    <br>

    <a href="http://www.baidu.com">伪类选择器</a>

</body>
</html>