「前端开发」css入门之选择器与伪类

[toc]

标签选择器

就是使用html标签名作为选择器,进行css样式的添加

/* 将选择html页面中所有的h3标签,无论h3标签位置的深浅 */
h3 {
      color: blueviolet;
      background-color: rgb(26, 216, 22);
}

标签选择器,覆盖范围大,所以通常用来做标签的初始化。

<!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>Document</title>
        <style>
            ul {
                /* 将无序列表的前面的小圆点去掉 */
                list-style: none;
            }
            a {
                /* 将连接下方的下划线去掉 */
                text-decoration: none;
            }  
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>面包</li>
                <li>牛奶</li>
                <li>奶酪</li>
            </ul>
            <a href="http://127.0.0.1:8080/user/list">获取用户列表</a>

        </div>
    </body>
</html>

class选择器

class类名

class类名,命名规则:不能数字开头,区分大小写。

<h2 class="spec-h2-2">我是二级标题</h2>

class选择器

使用.类名对html标签进行选择,只要标签中出现class类名和选择器名相同,样式就会添加到对应的html标签中。

.spec-h2-2 {
           color: aquamarine;
           font-size: large;
           font-style: italic;
}

注意:同一个标签可以属于多个类,类名使用空格隔开

<!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>Document</title>
        <style>
            .para {
                color:aqua;
            }
            .spec {
                font-size: xx-large;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="para spec">我是一个段落</p>     
        </div>
    </body>
</html>

原子类

就是将各种属性值分别分类出来,例如:

<!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>Document</title>
        <style>
            .fs16 {
                font-size: 16px;
            }
            .fs18 {
                font-size: 18px;
            }
            .fs20 {
                font-size: 20px;
            }
            .fs22 {
                font-size: 22px;
            }
            .fs24 {
                font-size: 24px;
            }
            .fs26 {
                font-size: 26px;
            }
            .color-red {
                color: red;
            }
            .color-green {
                color: green;
            }
            .color-blue {
                color: blue;
            }
            .color-yellow {
                color: yellow;
            }
            .color-aqua {
                color: aqua;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li class="fs18 color-yellow">面包</li>
                <li class="fs18 color-aqua">牛奶</li>
                <li class="fs18 color-blue">奶酪</li>
            </ul>
            <p class="fs18">我是一个段落</p>
            <p class="fs20">我是一个段落</p>
            <p class="fs22">我是一个段落</p>
            <p class="fs24 color-green">我是一个段落</p>
            <p class="fs26">我是一个段落</p>   
        </div>
    </body>
</html>

id属性

标签可以有id属性,用来唯一标识标签,命名规则:只能以字母、数字、下划线、短横线租成,不能以数字开头,区分大小写;同一个网页不能有相同id值的标签。

id选择器

使用#前缀选择指定的标签。

 <p id="par">我是一个段落</p>
#par {
     color:aqua;
}

复合选择器

选择器的名称 示例 示例的意义
后代选择器 .box .spec 选择类名为box的标签内部的类名为spec的标签
交集选择器 li.spec 选择既是li的标签,也属于是spec的标签
并集选择器 ul, ol 选择所有的ul标签和ol标签

实例:

<!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>Document</title>
        <style>
            /* 后代选择器 */
            .title .t-h1 {
                color: brown;
            }
            /* 后代选择器 */
            .title h2 {
                color: rgb(236, 11, 176);
            }
            /* 后代选择器 */
            .title .table .tr {
                background-color: aquamarine;
            }
            /* 后代选择器 */
            .title .table .student-info-head {
                color: rgb(160, 24, 228);
                font-style: italic;
            }

            /* 交集选择器 */
            .p2.green {
                font-size: xx-large;
                color: green
            }

            /* 并集选择器 */
            .ui-li, .p1 {
                font-size: x-small;
                color: rgb(173, 29, 239);
            }  

            /* 交集、后代、并集混合选择器 */
            div.box ol li p, ol {
                font-weight: 200;
                font-size: smaller;
                color: deeppink; 
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li class="ui-li">面包</li>
                <li class="ui-li">牛奶</li>
                <li class="ui-li">奶酪</li>
            </ul>
            <div class="title">
                <h1 class="t-h1">我是一级标题</h1>
                <h2 class="t-h2">我是二级标题</h2>
                <h2 class="t-h2">我是二级标题</h2>

                <table class="table" border="1" width="500" align="center">
                    <caption class="student-info-head">学生信息表</caption>
                    <tr class="tr" align="center">
                        <td>学号</td>
                        <td>姓名</td>
                        <td>专业</td>
                        <td>年级</td>
                    </tr>
                    <tr class="tr">
                        <td>001</td>
                        <td>小明</td>
                        <td>计算机科学与技术</td>
                        <td>2023级</td>
                    </tr class="tr">
                    <tr class="tr">
                        <td>004</td>
                        <td>小化</td>
                        <td>软件工程</td>
                        <td>2022级</td>
                    </tr class="tr">
                </table>

            </div>
            <p class="p1">我是一个段落</p>
            <p class="p1">我是一个段落</p>
            <p class="p2 green">我是一个段落</p>
            <p class="p2 green">我是一个段落</p>
            <div class="box">
                <ol class="city-list">
                    <li>
                        <p>北京</p>
                    </li>
                    <li>
                        <p>上海</p>
                    </li>
                    <li>
                        <p>广州</p>
                    </li>
                    <li>
                        <p>深圳</p>
                    </li>
                </ol>
            </div> 
        </div>
    </body>
</html>

伪类

伪类 意义
a:link 没有被访问的超级链接
a:visited 已经被访问过的超级链接
a:hover 正在被鼠标悬停的超级链接
A:activa 正被激活的超级链接(点击是,点击后还没松开)

实例:

<!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>Document</title>
        <style>
            a:link {
                color: aqua;
            }
            a:visited {
                color: beige;
            }
            a:hover {
                color: brown;
            }
            a:active {
                color: darkorange;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                <a href="http://wwww.baidu.com">前往百度</a>
            </p>
            <p>
                <a href="http://wwww.jd.com">前往京东商城</a>
            </p>
        </div>
    </body>
</html>

css3新增伪类

:empty

标签中没有内容时,显示该该样式

:focus

用户进行聚焦市,会显示该样式

:checked+span

被选中的后面的标签显示该样式

:root

里面的样式会影响所有内容

实例

<!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>Document</title>
        <style>
            p {
                width: 150px;
                height: 150px;
                border: 1px solid rgb(50, 204, 231);
            }

            /* 标签中没有内容时,显示该该样式 */
            p:empty {
                background-color: rgb(255, 0, 119); 
            }

            /* 用户进行聚焦市,会显示该样式 */
            div input:focus {
                background-color: blueviolet;
            }

            /* 被选中的后面的标签显示该样式 */
            .box input:checked+span {
                color: rgb(243, 18, 164);
            }

            /* 影响所有内容 */
            :root {
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        <p></p>
        <p></p>
        <p>123</p>
        <p></p>
        <div>
            <input type="text">
            <input type="text" disabled>
            <input type="text">
            <input type="text">
        </div>
        <hr>
        <div class="box">
            <input type="checkbox"><span>文字</span>
            <input type="checkbox"><span>文字</span>
            <input type="checkbox"><span>文字</span>
            <input type="checkbox"><span>文字</span>
        </div> 
    </body>
</html>

重叠性与权重计算

重叠性

指多个选择器同时作用于一个标签

<p id="para" class="para">我是一个段落</p>
#para {
       color: blueviolet;
}
.para {
       font-size:x-large
}
p {
   font-style: italic;
}

权重

当重叠性出现冲突时,比如出现不同颜色,此时就应该按照权重来选择:

id > class > 标签

属性选择器

直接看实例:

<!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>Document</title>
        <style>
            img {
                width: 300px;
            }
            /* 属性匹配 */
            img[alt] {
                border: 6px solid rgb(14, 1, 1);
            }

            /* 精准匹配 */
            img[alt=小黑子] {
                border: 6px solid rgb(101, 23, 235);
            }

            /* 开头匹配 */
            img[alt^=我们] {
                border: 6px solid rgb(185, 189, 226);
            }

            /* 以ikun-开头匹配 */
            img[alt|=ikun] {
                border: 6px solid rgb(239, 8, 8);
            }

            /* 结尾匹配 */
            img[alt$=哎呀] {
                border: 6px solid rgb(246, 205, 5);
            }

            /* 任意位置匹配 */
            img[alt*=树枝] {
                border: 6px solid rgb(48, 229, 11);
            }

            /* 以只因空格加独立部分匹配 */
            img[alt~=只因] {
                border: 10px solid rgb(236, 236, 6);
            }
        </style>
    </head>
    <body>
        <div>
            <img src="../../file/ikun.jpeg" alt="小黑子">
            <img src="../../file/ikun.jpeg" alt="小黑子">
            <img src="../../file/ikun.jpeg" alt="小黑子没有树枝">
            <img src="../../file/ikun.jpeg" alt="我们都是荔枝的">
            <img src="../../file/ikun.jpeg" alt="我们都是荔枝的">
            <img src="../../file/ikun.jpeg" alt="你干嘛哎呀">
            <img src="../../file/ikun.jpeg" alt="鸡 只因">
            <img src="../../file/ikun.jpeg" alt="ikun-永远滴神">
            <img src="../../file/ikun.jpeg" alt="ikun-永远滴神">
        </div>
    </body>
</html>

序号选择器

在一个盒子中,我们可以任意选择我们需要的标签进行添加样式。

直接看实例:

<!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>Document</title>
        <style>
            /* 选择第一个 */
            .box1 p:first-child {
                color: aqua;
            }
            /* 选择最后一个 */
            .box1 p:last-child {
                color: rgb(246, 14, 14);
            }
            /* 选择第2个 */
            .box1 p:nth-child(2) {
                color: rgb(94, 82, 222);
            }
            /* 选择第3个 */
            .box1 p:nth-child(3) {
                color: rgb(22, 234, 18);
            }
            /* 偶数 */
            .box2 p:nth-child(2n) {
                color: rgb(104, 15, 206);
            }
            /* 奇数 */
            .box2 p:nth-child(2n+1) {
                color: rgb(240, 232, 9);
            }

            /* n的计数从0开始依次叠加+2:从第二个开始 */
            .box3 p:nth-child(3n+2) {
                color: rgb(240, 232, 9);
            }

            /* 选择第四个p标签 */
            .box4 p:nth-of-type(4) {
                color: rgb(32, 230, 160);
            }

            /* 选择第二个h4标签 */
            .box4 h4:nth-of-type(2) {
                color: rgb(25, 38, 224);
            }

            /* 选择倒数第2个p标签 */
            .box5 p:nth-last-child(2) {
                color: rgb(224, 25, 217);
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>第一个段落</p>
            <p>第二个段落</p>
            <p>第三个段落</p>
            <p>第四个段落</p>
        </div>
        <hr>
        <div class="box2">
            <p>第一个段落</p>
            <p>第二个段落</p>
            <p>第三个段落</p>
            <p>第四个段落</p>
            <p>第五个段落</p>
            <p>第六个段落</p>
            <p>第七个段落</p>
            <p>第八个段落</p>
            <p>第九个段落</p>
            <p>第十个段落</p>
            <p>第十一个段落</p>
            <p>第十二个段落</p>
        </div>
        <hr>
        <div class="box3">
            <p>第一个段落</p>
            <p>第二个段落</p>
            <p>第三个段落</p>
            <p>第四个段落</p>
            <p>第五个段落</p>
            <p>第六个段落</p>
            <p>第七个段落</p>
            <p>第八个段落</p>
            <p>第九个段落</p>
            <p>第十个段落</p>
            <p>第十一个段落</p>
            <p>第十二个段落</p>
        </div>
        <hr>
        <div class="box4">
            <p>第一号段落</p>
            <p>第二号段落</p>
            <p>第三号段落</p>
            <h4>第一号标题</h4>
            <h4>第二号标题</h4>
            <p>第四号段落</p>
            <p>第五号段落</p>
            <h4>第三号标题</h4>
            <p>第六号段落</p>
        </div>
        <hr>
        <div class="box5">
            <p>第一号段落</p>
            <p>第二号段落</p>
            <p>第三号段落</p>
            <p>第四号段落</p>
    </body>
</html>

元素关系选择器

直接看实例:

<!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>Document</title>
        <style>

            /* 只会选择儿子标签 */
            .box>p {
                color: aqua;
            }

            /* 相邻兄弟选择器 */
            .box p+div {
                color: rgb(0, 110, 255);
            }

            /* 通用兄弟(一定是同层级)选择器:表示p后面的div标签 */
            .box2 p~div {
                color: rgb(234, 36, 241);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <p>儿子段落</p>
            <p>儿子段落</p>
            <div>
                <p>孙子段落</p>
                <p>孙子段落</p>
            </div>
            <p>儿子段落</p>
        </div>

        <div class="box2">
            <p>儿子段落</p>
            <p>儿子段落</p>
            <div>
                <p>div1孙子段落</p>
                <p>div1孙子段落</p>
            </div>
            <p>儿子段落</p>
            <div>
                <p>div2孙子段落</p>
                <p>div2孙子段落</p>
            </div>
        </div>
    </body>
</html>

伪元素

::before

创建一个伪元素,将其成为匹配选中的元素的第一个子元素,必须设置content属性表示其中内容

a::before {
    content: '⭐️'
}

::after

创建一个伪元素,将其成为匹配选中的元素的最后一个子元素,必须设置content属性表示其中内容

a::after {
     content: '⭐️';
}

实例:

<!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>Document</title>
        <style>
            .box1 a::before {
                content: '⭐️'
            }
            .box2 a::after {
                content: '⭐️';
            }

        </style>
    </head>
    <body>
        <div class="box1">
            <a href="http://www.baidu.com">这是前往百度的连接</a>
        </div>
        <div class="box2">
            <a href="http://www.baidu.com">这是前往百度的连接</a>
        </div>
    </body>
</html>

::selection

选中文字时显示的样式

::first-letter

第一个文字添加样式

::first-line

第一行文字添加样式

实例:

<!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>Document</title>
        <style>
             .box3, .box4 {
                width: 400px;
                height: 300px;
                border: 2px solid rgb(130, 36, 213);
            }

            /* 选中文字时的颜色 */
            .box3::selection {
                /* 背景颜色 */
                background-color: rgb(23, 216, 139); 
                /* 字体颜色 */
                color: rgb(165, 42, 122);
            }

            /* 第一个文字添加样式 */
            .box4::first-letter {
                font-size: xx-large;
            }

             /* 第一行文字添加样式 */
            .box4::first-line {
                text-decoration: underline red;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <a href="http://www.baidu.com">这是前往百度的连接</a>
        </div>
        <div class="box2">
            <a href="http://www.baidu.com">这是前往百度的连接</a>
        </div>
        <div class="box3">
            吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗
        </div>
        <div class="box4">
            吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗 吃了吗
        </div>
    </body>
</html>
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!