基础选择器和扩展选择器

分类：

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

　　　　语法：#id属性值{}

　　元素选择器：选择具有相同标签的元素

　　　　语法：标签名称

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

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

　　　　语法：.class属性值

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

<style>
        #div1{
            color: red;
        }

        div{
            color: blue;
        }
        .cls1{
            color: #FFFFFF;
        }
    </style>

扩展选择器

选择所有元秦∶

语法︰{}

并集选择器︰
*选择器1,选择器2{}
子选择器筛选选择器1元秦下的选择器2元秦

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

父选择器∶筛选选择器2的父元秦选择器1

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

属性选择器∶选择元素名称，属性名-属性值的元秦

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

link :初始化的状态

visited :被访问过的状态

active :正在访问状态

hover :鼠标悬浮状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div p{
            color: red;
        }
        div > p{
            border: 1px solid;
        }
        input[type='text']{
            border: 5px solid;
        }
        a:link{
            color: brown;
        }

        a:hover{
            color: black;
        }


        a:active{
            color: deeppink;
        }


        a:visited{
            color: peachpuff;
        }
    </style>
</head>
<body>
    <div>
        <p>汆子嬉水</p>
    </div>

    <p>黑马程序员</p>
    <div>aaa</div>
        <input type="text">
        <input type="password">

    <a href="#">薛佳旺</a>
</body>
</html>

posted on 2022-08-01 19:15 淤泥不染阅读(36) 评论(0) 收藏举报