2、CSS选择器

最新推荐文章于 2024-11-14 17:40:35 发布

大鑫333

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量79

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_41570988/article/details/119877027

版权

2.1 基本选择器

1、标签选择器：选择一类标签标签{ }

h1{
            color: coral;
        }
<h1 id="liuxin" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{ }

 .style1{
            color: green;
        }

3、id选择器：全局唯一 # id名{ }

#liuxin{
            color: aqua;
        }

优先级：id>class>标签

2.2层次选择器

1、后代选择器：“在某个元素后面祖爷爷爷爷爸爸你”

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

在这里插入图片描述
2、子选择器一代儿子

body>p{
            background: aquamarine;
        }

在这里插入图片描述
3、相邻兄弟选择器同辈

.active+p{
            background: red ;
        }

在这里插入图片描述
4、通用选择器当前选中元素的向下所有元素

.active~p{
            background: brown;
        }

在这里插入图片描述

结构伪类选择器

定位元素相关的

        /*ul的第一个子元素*/
ul li:first-child{
    background: brown;
}

        /*ul的最后一个子元素*/
ul li:last-child{
    background: aqua;
}

2.4 属性选择器（常用）

id+class结合

 <style>
    .demo a {
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: aqua;
        text-align: center;
        color: grey;
        text-decoration: none;
        argin-right: 5 px; /*右偏移*/
        font: bold 20px/50px Arial;
    }
        /*存在id属性的元素   a[]{}*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/

        /*id=first的元素*/
    /*a[id=first]{*/
    /*    background: aquamarine;*/
    /*}*/

        /*class中有links的元素*/
        /*a[class*="links "]{*/
        /*    background: black;*/
        /*}*/

        /*选中herf中以http开头的元素*/

        a[herf^=http]{
        background: yellow;
    }

        /*a[herf$=jpg]{*/
        /*    background: yellow;*/
        /*}*/

    </style>

</head>
<body>


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