css系统学习-选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 通配符选择器，选中全部 */
        *{
            color: red;
        }
        /* 标签选择器,逗号表示并列 */
        h1,h2{
            color: black;
        }
        a{
            text-decoration: none;
        }
        /* 类选择器，ID选择器 */
        .success{
            border: solid 1px green;
            color: green;
        }
        .error{
            border: solid 1px red;
            color:red;
        }

        #app{
            margin-bottom: 10px;
        }
        /* 结构选择器，用空格隔开 */
        main article aside h2{
            background-color: yellow;
        }
        /* 子类选择器，只管自己的孩子，不管孩子的孩子。 */
        main article>h2{
            color: red;
        }
        /* 兄弟选择器，只表示h1兄弟关系的元素 */
        main article h1+h2{
            color: green;
        }
        /* 铁兄弟选择器，只表示紧挨者h1兄弟关系的元素 */
        main article h1~h2{
            color: green;
        }
        /* 属性选择器 */
        /* 表示有title属性的h1元素 */
        h1[title]{
            color: rebeccapurple;
        }
        /* 表示有title属性，并且属性值是open的 */
        h1[title="open"]{
            color: aquamarine;
        }
        /* 表示以open开始的属性值 */
        h1[title^="open"]{
            color: aquamarine;
        }
        /* 表示属性值中包含open的 */
        h1[title*="open"]{
            color: aquamarine;
        }
        /* 表示属性值中包含open这个单词的，就是前后都是空格 */
        h1[title~="open"]{
            color: aquamarine;
        }
        /* 表示属性值中以open开始的，或者后边是-的 */
        h1[title|="open"]{
            color: aquamarine;
        }

        /* 伪类选择器 */
        a:link{
            color: red;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: black;
        }
    </style>
</head>
<body>
    <a href="www.baidu.com">百度</a>
    <main>
        <article>
            <h1 title="open">open</h1>
            <aside>
                <h2>
                    hello world;
                </h2>
            </aside>
            <h1 title="open111">ooooooo</h1>
            <h2>ooooo</h2>
        </article>
    </main>
</body>
</html>
posted @ 2022-11-09 08:57  open520  阅读(27)  评论(0)    收藏  举报