CSS选择器

最新推荐文章于 2024-01-23 21:54:07 发布

qdu_zhaiH

最新推荐文章于 2024-01-23 21:54:07 发布

阅读量274

点赞数

分类专栏：小翟的后端学习之路文章标签： css

本文链接：https://blog.csdn.net/red_red_red/article/details/116482681

版权

小翟的后端学习之路专栏收录该内容

13 篇文章

订阅专栏

1.导入CSS的方式

a.内部样式

        <!--内部样式-->
        <style>
            h1 {
                color: green;
            }
        </style>

b.外部样式

        <link rel="stylesheet" href="css/style.css">

c.行内样式

        <h1 style="color: red;">我是标题</h1>

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

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则（谁离h1标签近谁的优先级高）-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red;">我是标题</h1>
</body>
</html>

2.CSS选择器

不遵循就近原则，固定的
优先级：id选择器 > class选择器 > 标签选择器

2.1基本选择器

a.标签选择器

        /*标签选择*/
        h1{
            color: #a13d30;
        }

b.类选择器

        /*类选择器的格式   .class的名称{}
        好处：可以多个标签归类，是同一个 class,可以复用
        */
        .mystyle{
            color: blue;
        }

c.id选择器

        /* id选择器：id必须保证全局唯一
           #id名称{}
        */
        #mystyle{
            color: red;
        }

2.2层次选择器

a.后代选择器（ancestor descendant）：选取ancestor元素里的所有descendant（后代）元素

/* 后代选择器*/
body p {
    background: antiquewhite;
}

b.子类选择器（parent > child）：选取parent元素下的child（子）元素

/* 子类选择器 儿子，只有一代*/
body>p{
    background: aqua;
}

c.相邻兄弟选择器（prev + next）：选取紧接在prev元素后的next元素

/* 相邻兄弟选择器 只有一个，相邻向下*/
.p1 + p{
    background: blue;
}

d.通用相邻兄弟选择器（prev ~ siblings）：选取prev元素之后的所有siblings元素

/*通用相邻兄弟选择器 当前选中元素的所有向下相邻的兄弟元素*/
.p1 ~ p{
    background: darkgreen;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
            /* 后代选择器*/
            body p {
                background: antiquewhite;
            }
            /* 子类选择器 儿子，只有一代*/
            body>p{
                background: aqua;
            }
            /* 相邻兄弟选择器 只有一个，相邻向下*/
            .p1 + p{
                background: blue;
            }
            /*通用相邻兄弟选择器 当前选中元素的所有向下相邻的兄弟元素*/
            .p1 ~ p{
                background: darkgreen;
            }
        </style>
    </head>
    <body>
        <p>p0</p>
        <p class = "p1">p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <ul>
            <li>
                <p>p6</p>
            </li>
            <li>
                <p>p7</p>
            </li>
            <li>
                <p>p8</p>
            </li>

        </ul>
    </body>
</html>

2.3结构伪类选择器

伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>结构伪类选择器</title>
        <style>
            /* ul的第一个元素*/
            ul li:first-child{
                background: darkgreen;
            }
            /* ul的最后一个元素*/
            ul li:last-child{
                background: bisque;
            }
            /*
            选中p1:定位到父元素，选择当前层次的第二个元素，并且只有是和p相同元素的才生效
            */
            p:nth-child(2){
                background: crimson;
            }
            /*选择父元素下的第二个p元素*/
            p:nth-of-type(2){
                background: darkturquoise;
            }
        </style>
    </head>
    <body>
        <h1>h1</h1>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <ul>
            <li>l1</li>
            <li>l2</li>
            <li>l3</li>
        </ul>
    </body>
</html>

2.4 属性选择器

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

        <style>
            .demo a {
                float: left;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: blue;
                text-align: center;
                color: gainsboro;
                text-decoration: none;
                margin-right: 5px;
                font: bold 20px/50px Arial;
            }

            /*
            属性名 = 属性值（正则）
            = 绝对等于
            *= 包含这个元素
            ^= 以这个开头
            $= 以这个结尾
            */

            /*存在id属性的元素：a[]{}*/
            /*
            a[id]{!*所有带id的a标签*!
                background: yellow;
            }
            */
            /*id=first的元素*/
            /*
            a[id=first]{
                background: blue;
            }
            */
            /*class中有links的元素*/
            /*
            a[class*=links]{
                background: yellow;
            }
            */

            /*选中href中以http开头的元素*/
            /*
            a[href^=http]{
                background: yellow;
            }
            */
            /*选中href中以pdf结尾的*/
            a[href$=pdf] {
                background: yellow;
            }

        </style>
    </head>
    <body>

        <p class="demo">
            <a href="http://baidu.com" class="links item first" id="first">1</a>
            <a href="" class="links item active" target="_blank" title="test">2</a>
            <a href="images/123.html" class="links item">3</a>
            <a href="images/123.png" class="links item">4</a>
            <a href="images/123.jpg" class="links item">5</a>
            <a href="abc" class="links item">6</a>
            <a href="/a.pdf" class="links item">7</a>
            <a href="/abc.pdf" class="links item">8</a>
            <a href="abc.doc" class="links item">9</a>
            <a href="abcd.doc" class="links item last">10</a>
        </p>
    </body>
</html>