2.2 CSS选择器

常用选择器

  1. 元素选择器
  2. id选择器
  3. 类选择器
  4. 通配选择器

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>选择器</title>
        <style>
            /*
                将所有的段落设置为红色(字体)
                元素选择器
                    作用:根据标签名来选中指定的元素
                    语法:标签名{}
                    示例:p{} h1{} div{}
            */
            h1{
                color:blue;
            }
            p{
                color: red;
            }
            /* 
                id选择器(id是唯一的)
                    作用:根据元素的id属性值选中唯一一个元素
                    语法:#id属性值{}
                    示例:#first{} 
            */
            #first{
                 color: blue;
            }
            /*
                类选择器
                    作用:根据元素的class属性值选中一组元素
                    语法:.class属性值{}
                    注意:一个class属性可对应多个值,值之间用空格隔开
                    css中尽量多的使用类选择器
            */
            .favorite{
                color: gold;
            }
            .love{
                color: orange;
            }
            /*
                通配选择器
                    作用:选中页面中的所有元素
                    语法:*
                    注意:在有其它选择器的情况下,下面的代码并不会起到修饰作用
            */
            *{
                color: black;
            }
        </style>
    </head>
    <body>
        <h1>雾霭有时晴</h1>       
        <p id="first">风吹向哪里啦,雨ye懒得下</p>
        <p>若非雾霭放晴了,没人关心它</p>
        <p>醉了,就这样吧</p>
        <!--
            class 是html中标签的属性,它和id类似,
                不同的是class可以重复使用
        -->
        <p class="favorite">想不出不想啦,看不透都别看啦</p>
        <p class="favorite">睡不着不睡啦,算不出的别算啦</p>
        <p class="favorite">写不出别写啦,唱不出的都作罢</p>
        <p class="favorite love">纵生风雨雷电时,我收工接你回家</p>
    </body>
</html>

复合选择器

  1. 交集选择器
  2. 选择器分组(并集选择器)

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>复合选择器</title>
        <style>
            /* 将class为red的标签元素设置为红色 */
            .red{
                color: red;
            }
            /* 
               将class为red的div标签字体设置为30px 

                交集选择器
                    作用:选中同时符合多个条件的元素
                    语法:选择器1选择器2选择器3选择器n{}
                    注意:
                        交集选择器中如果有元素选择器,必须使用元素选择器开头
            */
            div.red{
                font-size: 30px;
            }
            .red.big{
                font-size: 50px;
            }
            /*
                选择器分组(并集选择器)
                    作用:同时选择多个选择器对应的元素
                    语法:选择器1,选择器2,选择器3,选择器n{}
                    示例:#b1,.p1,h1,span{}
            */
            h1, span{
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="red">我是div</div>
        <p class="red">我是p标签</p>
        <p class="red big">我是p2标签</p>
        <h1>我是h1标签</h1>
        <span>我是span标签</span>
    </body>
</html>

关系选择器

  1. 子元素选择器
  2. 后代元素选择器
  3. 选择下一个兄弟元素
  4. 选择后面所有兄弟元素

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>关系选择器</title>
        <style>
            /*
                为div的子元素span设置一个字体颜色 为红色
                (为div直接包含的span设置一个字体颜色)

                子元素选择器
                    作用:选中指定父元素的指定子元素
                    语法:父元素 > 子元素
            */
            div.red > span{
                color: red;
            }
            div > span{
                color: orange;
            }
            div > p > span{
                color: greenyellow;
            }
            /*
                后代元素选择器
                    作用:选中指定元素内的指定 后代 元素
                    语法:祖先 后代
            */
            div span{
                color: blue;
            }
            /*
                选择下一个兄弟
                    作用:选中紧挨着前一个元素的后一个元素
                    语法:前一个 + 后一个
            */
            p + span{
                color: lightseagreen;
            }
            /*
                选择下边的所有兄弟元素
                    语法:前一个 ~ 后面的元素
            */
            p ~ span{
                color: lightseagreen;
            }
        </style>
    </head>
    <body>
        <div class="red">
            我是一个div
            <p>
                我是div中的p元素
                <span>我是p中的div元素</span>
            </p>
            <span>我是div中的span元素1</span>
            <span>我是div中的span元素2</span>
            <span>我是div中的span元素3</span>
        </div>
        <span>我是div外的span</span>
        <div>
            我是第二个div
            <span>我是第二个div中的span</span>
        </div>
    </body>
</html>

属性选择器

  1. 五种属性选择器

示例代码

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>

        <style>
            /*
                第一种
                    标签名+[属性名] 也可以直接是 [属性名]
                第二种
                    标签名+[属性名=属性值] 或 [属性名=属性值]
                第三种
                    标签名+[属性名^=属性值] 或 [属性名^=属性值]
                        选择属性值以指定值开头的元素
                第四种
                    标签名+[属性名$=属性值] 或 [属性名$=属性值]
                    选择属性值以指定值结尾的标签元素
                第五种
                    标签名+[属性名*=属性值] 或 [属性名*=属性值]
                    选择属性值中含有某值的元素
            */
            p[title]{
                color: red;
            }
            p[title=poem]{
                font-size: 40px;
            }
            p[title^=po]{
                font-style: italic;
            }
            p[title$=ng]{
                font-size: 30px;
            }
            p[title*=o]{
                background-color: black;
            }
        </style>
    </head>
    <body>
        <!--
            title属性
                作用:设置关于元素的额外信息
                    这些信息通常会在鼠标移到元素上时显示一段工具提示文本
        -->
        <p title="poem">人生若只如初见,当时只道是寻常。</p>
        <p title="poem2">潭中鱼可百许头,皆若空游无所以。</p>
        <p title="poem3">落霞与孤鹜齐飞,秋水共长天一色。</p>
        <p title="song">天青色等烟雨,而我在等你。</p>
        <p>我是无情的参照物</p>
    </body>
</html>

伪类选择器

用到就查表

常见伪类选择器

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>伪类选择器</title>
        <style>
            /*
                伪类:不存在的类
                    - 用于描述一个元素的特殊状态
                        比如:第一个子元素、被点击的元素、鼠标移入的元素
                    - 伪类一般情况下使用 : 开头
                        :first-child 第一个子元素
                        :last-child 最后一个子元素
                        :nth-child(i) 选中第i个子元素
                            i可取特殊值:
                                n 第n个 n的范围为0到正无穷,全选
                                2n 或 even 表示选中所有偶数位的元素
                                2n+1 或 odd 表示选中奇数位的元素
                        以上伪类都是根据所有元素进行排序的,元素种类可不同
                        :first-of-type
                        :last-of-type
                        :nth-of-type()
                            - 这几个伪类在功能上和上述的相似,不同点是
                                它们是在同类型元素中进行排序。
                    - :not() 否定伪类
                        - 将符合条件的元素从选择器中去除

            */
            ul > li:first-child{
                color: red;
            }
            ul > li:last-child{
                color: blue;
            }
            ul > li:nth-child(odd){
                font-size: 20px;
            }
            ul > li:not(:nth-child(3)){
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ul是无序列表</li>
            <li>关系选择器</li>
            <li>ol是有序列表</li>
            <li>伪类选择器</li>
            <li>最后的骑士</li>
        </ul>
    </body>
</html>

超链接伪类选择器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>超链接的伪类</title>
        <style>
            /*
                :link 用来表示没访问过的链接标签(正常的链接)
                :link 和 :visited 两个伪类只能对链接标签使用
            */
            a:link{
                color: red;
            }
            /*
                :visited 用来选择访问过的链接标签
                由于保护隐私的原因,所以visited这个伪类只能修改链接的颜色
            */
            a:visited{
                color:blue;
            }
            /*
                :hover 用来表示鼠标移入的状态
            */
            a:hover{
                color: yellow;
                font-size: 30px;
            }
            /*
                :active 用来表示鼠标点击的
            */
            a:active{
                color: green;
            }
        </style>
    </head>
    <body>
        <!--
            1. 访问过的链接
            2. 没访问过的链接
        -->
        <a href="https://www.baidu.com">百度</a>
        <br><br>
        <a href="https://www.baidu.com">百度一下</a>
    </body>
</html>

伪元素选择器

      注意 ::before 和 ::after
示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>伪元素</title>
    </head>
    <style>
        p{
            font-size: 30px;
        }
        /*
            伪元素:表示页面中一些特殊的并不真实的存在的元素(特殊的元素)
                格式:伪元素使用::开头

                ::first-letter 选择第一个字母
                ::first-line 选择第一行
                ::selection 表示选中的内容
                ::before 表示元素的开始(标签中内容之前)
                ::after 表示元素的最后(标签中内容最后一个元素的下一个)
                    - before 和 after 必须结合content来使用,否则不会有效果
                        -content 中的内容无法被选中
        */
        .first::first-letter{
            font-size: 50px;
        }
        .first::first-line{
            background-color: red;
        }
        .second::selection{
            background-color: yellow;
        }
        div::before{
            content: 'ABC';
            color:blue;
        }
        div::after{
            content: 'Bye';
            color:green;
        }
    </style>
    <body>
        <div>
            Hello,How dare you?
        </div>
        <p class="first">
            我家门前有两棵树,一棵是枣树,另一棵还是枣树。
        </p>
        <p class="second">
            我家里有两只宠物,一只是黑白狗,另一只是黑白兔。
        </p>
    </body>
</html>

选择器权重

  1. 权重的大小比较
  2. 权重的相加
  3. !important

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>选择器的权重</title>
        <style>
            /*
                样式的冲突
                    - 当通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值
                        此时就发生了样式的冲突
                发生样式冲突时,使用哪个样式由选择器的权重(优先级)决定
                选择器的权重(由高到低):
                    内联样式        1,0,0,0
                    id选择器        0,1,0,0
                    类和伪类选择器   0,0,1,0
                    元素选择器      0,0,0,1
                    通配选择器      0,0,0,0
                    继承的样式      没有优先级

                比较优先级时,需要将所有的选择器的优先级进行相加比较,最后优先级越高,越优先显示
                    分组选择器单独计算。
                    选择器的累加不会超过其最大的数量级,比如再多的类选择器相加
                    也不会超过id选择器
                    如果优先级计算后相同,则优先使用代码位置靠下的样式
                可以再某一个样式的后边添加 !important, 则此时该样式会获得最高优先级,超越内联样式
            */
            div{
                color: yellow;
            }
            .red{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="box1" class="red">我是一个无情的div</div>
    </body>
</html>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页