CSS3选择器

最新推荐文章于 2024-09-13 23:28:46 发布

我的世界没光

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量137

点赞数

分类专栏：前端文章标签： css3 html5 css

本文链接：https://blog.csdn.net/tzconn/article/details/120042670

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2 选择器

作用:选择页面上的某一个或某一类元素

2.1 基本选择器

2.1.1 标签选择器

标签选择器会选择到页面上所有这个标签的元素

    <h1>学CSS</h1>
    <h1>学JS</h1>
    <p>学前端</p>
    
    h1{
        color:#007fcc;
    }

2.1.2 class选择器

可以多个标签归类，是同一个class，可以复用

    <h1 class="c1">学CSS</h1>
    <h1>学JS</h1>
    <h1>学HTML</h1>
    <p class="c1">学前端</p>
    
    类选择器格式 .class的名称{}
    .c1{
        color:#007fcc;
    }

2.1.3 id选择器

id必须保证全局唯一性

    <h1 id="c1">学CSS</h1>
    <h1>学JS</h1>
    <h1>学HTML</h1>
    <p class="c1">学前端</p>
    
    id选择器格式 #id的名称{}
    #c1{
        color:#007fcc;
    }

2.1.4 优先级

不遵循就近原则

    id选择器>class选择器>标签选择器

2.2 层次选择器

2.2.1 后代选择器

当前选择元素所有后代元素

    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
    
    body p{
        background:red;
    }
    
    效果:所有body后p标签变成红色

2.2.2 子选择器

当前选择元素一层子元素

    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
    
    body>p{
        background:blue;
    }
    
    效果:body后第一层即p1,p2,p3变为蓝色

2.2.3 相邻兄弟选择器(唯一弟弟选择器)

当前选中元素的向下的一个弟弟元素

    <body>
        <p>p0</p>
        <p class="c1">p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
        <p class="c1">p7</p>
        <p>p8</p>
    </body>
    
    .c1+p{
        background:#007fcc
    }
    
    效果:类选择器c2下面的p标签 即p2,p8变成天蓝色

2.2.4 通用选择器(所有弟弟选择器)

当前选中元素的向下的所有弟弟元素

    <body>
        <p>p0</p>
        <p class="d1">p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
    
    .d1~p{
        background:black;
    }

2.3 结构伪类选择器

    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <ul>
            <li>l1</li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
        <p>p7</p>
    </body>

2.3.1 first-child

选择父元素的第一个子元素的元素,简单理解就是选择元素中的第一个子元素

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

2.3.2 last-child

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

2.3.3 nth-child(n)

    /*选中p1：定位到父元素，选择当前的第一个元素 
    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/
    p:nth-child(1){
        background: yellow;
    }

2.3.4 nth-of-type(n)

    /*选中父元素下的第2个p元素*/
    p:nth-of-type(2){
        background: green;
    }

2.4 属性选择器

    <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="images/123.html" class="links item">3</a>
            <a href="images/1.png" class="links item">4</a>
            <a href="images/1.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>

2.4.1 =表示绝对等于

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

2.4.2 *=表示包含

    /*class中包含links的元素*/
    a[class*="links"]{
        background: orange;
    }

2.4.3 ^=表示以…开头

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

2.4.4 $=表示以…结尾

    /*选中href中以http结尾的元素*/
    a[href$=http]{
        background: green;
    }

我的世界没光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录