CSS3选择器

9.1 选择器概述

CSS 常用选择器如下:

9.2 基本选择器

基本选择器包含着: 类型、类和 ID 选择器

9.2.1 元素选择器

元素选择器 也可以叫做" 类型选择器 "或" 标签名选择器 ",即在文档中选择了一个 HTML 标签/元素.

示例代码如下:

p {color: black;}
h1 {color: red;}
a {color: yellow;}

9.2.2 类选择器

类选择器通过元素的 class 属性选择指定元素,以一个句点（ . ）开头.

语法格式如下:

.classname {}

9.2.3 ID 选择器

ID 选择器开头为 # ,通过元素的 id 属性选择指定元素.

一篇文档中，一个 ID 只会用到一次.

语法格式如下:

#intro{color:red;}

实例如下:

结合使用类选择器和ID选择器实现手机营业厅店铺宣传的页面。

/*css document*/
/*清除标签的默认边距*/
* {
    margin: 0;
    padding: 0;
}

/*ID选择器设置主体内容的大小位置以及背景颜色*/
#cont {
    height: 1000px;
    width: 800px;
    margin: 0 auto;
    text-align: center;
    background-color: rgba(222, 184, 135, 0.6);
}

/*ID选择器设置顶部内容的位置*/
#top {
    height: 150px;
    margin-left: 260px;
}

/*设置顶部文字的共同样式*/
.txt1,
.txt2,
.txt3 {
    margin-top: 50px;
    float: left;
    font-weight: 900;
    font-size: 35px;
    color: darksalmon;
    font-family: "华文新魏";
}

/* 单独设置txt2,3的样式 */
.txt2 {
    font-size: 50px;
    color: yellowgreen;
}

.txt3 {
    margin-top: 5px;
}

/*第一部分的高度和对齐方式*/
.cont1 {
    text-align: left;
    height: 240px;
}

/*ID选择器实现主体内容的大小*/
#content {
    height: 705px;
    margin-top: 20px;
}

/*类选择器设置图片外边距*/
.pic {
    float: left;
    margin: 10px 15px;
}

/*设置每一版块标题的对齐方式*/
.title {
    text-align: left;
}

/*类选择器结合元素设置图片的大小*/
.pic img {
    width: 170px;
}

/*ID选择器实现底部联系方式的样式*/
#bottom {
    height: 100px;
    margin-top: 20px;
    line-height: 30px;
    font-weight: bolder;
}

<!-- html -->
    <!--定义ID属性-->
    <div id="cont">
        <!--顶部文字-->
        <div id="top">
            <p class="txt1">腾飞手机</p>
            <p class="txt2">开业啦！！！</p>
            <p class="txt3">开业期间，优惠重重</p>
        </div>
        <!--图片内容-->
        <div id="content">
            <!--第一部分-->
            <div class="cont1">
                <h3 class="title">分期购机免利息</h3>
                <div>
                    <div class="pic"><img src="img/phone1.jpg" alt=""> </div>
                    <div class="pic"><img src="img/phone2.jpg" alt=""> </div>
                    <div class="pic"><img src="img/phone3.jpg" alt=""> </div>
                    <div class="pic"><img src="img/phone4.jpg" alt=""> </div>
                </div>
            </div>
            <!--第二部分-->
            <div class="cont1">
                <h3 class="title">直接购机送耳机</h3>
                <div>
                    <div class="pic"><img src="img/ry1.jpg" alt=""> </div>
                    <div class="pic"><img src="img/ry2.jpg" alt=""> </div>
                    <div class="pic"><img src="img/ry3.jpg" alt=""> </div>
                    <div class="pic"><img src="img/ry4.jpg" alt=""> </div>
                </div>
            </div>
            <!--第三部分-->
            <div class="cont1">
                <h3 class="title">预约购机有好礼</h3>
                <div>
                    <div class="pic"><img src="img/ry5.jpg" alt=""> </div>
                    <div class="pic"><img src="img/ry7.jpg" alt=""> </div>
                    <div class="pic"><img src="img/ry8.jpg" alt=""> </div>
                    <div class="pic"><img src="img/phone5.jpg" alt=""> </div>
                </div>
            </div>
        </div>
        <!--底部联系方式-->
        <div id="bottom">
            <p class="tel">联系电话：0431-********</p>
            <p class="addr">店面地址：吉林省长春市**区**街道</p>
        </div>
    </div>

9.2.4 全局选择器

由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容.

语法格式如下:

* {
  margin: 0;
}

9.2.5 属性选择器

属性选择器 可以选中带有特定属性的元素.

语法格式如下:

[color="red"] {
    color: red;
}

示例代码如下:

/*css document*/
[id="type"] {
    font-size: 20px;
}

[class="red"] {
    color: red;
}

[class="green"] {
    color: green;
}

<!-- html -->
    <div id="type">编程图书</div>
    <div class="red">Web前端</div>
    <div class="red">Java编程</div>
    <div id="type">抒情散文</div>
    <div class="green">荷塘月色</div>
    <div class="green">白杨礼赞</div>

实例代码如下:

实现51购商城首页的手机风暴版块。

@charset "utf-8";

#mr-content {
    /*使用ID选择器设置页面布局*/
    width: 1200px;
    height: 480px;
    margin: 0 auto;
    border: 1px solid red;
    text-align: left;
    font-size: 12px;
    /*设置文本对齐方式*/
}

.mr-img1 {
    /*使用类选择器设置图片浮动*/
    float: left;
}

.mr-right {
    /*使用类选择器设置页面布局*/
    width: 960px;
    /*设置宽度*/
    height: 527px;
    /*设置高度*/
    float: left;
    /*设置浮动*/
    position: relative;
    /*设置定位*/
}

.mr-right * {
    position: absolute;
}

[att=a],
[att=b],
[att=c],
[att=d],
[att=e] {
    width: 180px;
    /*设置宽度*/
    height: 182px;
    /*设置高度*/

}

/*使用属性选择器设置第1张手机图片位置及大小*/
[att=a] {
    left: 140px;
    top: 20px;
}

[att=b] {
    /*使用属性选择器设置第2张手机图片位置及大小*/
    left: 700px;
    top: 20px;
}

/*使用属性选择器设置第3张手机图片位置及大小*/
[att=c] {
    left: 400px;
    top: 180px;
}

[att=d] {
    /*使用属性选择器设置第4张手机图片位置及大小*/
    left: 100px;
    top: 250px;
}

/*使用属性选择器设置第5张手机图片位置及大小*/
[att=e] {
    left: 650px;
    top: 230px;
}

.mr-car1 {
    /*使用类选择器设置第1个购物车小图标位置*/
    left: 330px;
    top: 170px;
}

/*使用类选择器设置第2个购物车小图标位置*/
.mr-car2 {
    left: 890px;
    top: 170px;
}

.mr-car3 {
    /*使用类选择器设置第3个购物车小图标位置*/
    left: 590px;
    top: 330px;
}

/*使用类选择器设置第4个购物车小图标位置*/
.mr-car4 {
    left: 290px;
    top: 380px;
}

.mr-car5 {
    /*使用类选择器设置第5个购物车小图标位置*/
    left: 840px;
    top: 380px;
}

.mr-price1 {
    /*使用类选择器设置第1个手机品牌文字的位置*/
    left: 90px;
    top: 170px;
}

/*使用类选择器设置第2个手机品牌文字的位置*/
.mr-price2 {
    left: 610px;
    top: 170px;
}

/*使用类选择器设置第3个手机品牌文字的位置*/
.mr-price3 {
    left: 20px;
    top: 350px;
}

/*使用类选择器设置第4个手机品牌文字的位置*/
.mr-price4 {
    left: 320px;
    top: 300px;
}

/*使用类选择器设置第5个手机品牌文字的位置*/
.mr-price5 {
    left: 580px;
    top: 360px;
}

/*使用元素选择器设置5个手机价格字体颜色以及大小*/
span {
    font-size: 10px;
    color: #706A6A;
}

    <div id="mr-content">
        <!--通过<img>标签添加作左边图片-->
        <img src="images/8-1.jpg" alt="" class="mr-img1">
        <div class="mr-right">
            <!--通过<img>标签添加5张手机图片-->
            <img src="images/8-1a.jpg" alt="" att="a">
            <img src="images/8-1b.jpg" alt="" att="b"><br />
            <img src="images/8-1c.jpg" alt="" att="c">
            <img src="images/8-1d.jpg" alt="" att="d">
            <img src="images/8-1e.jpg" alt="" att="e">
            <!--通过<img>标签添加购物车侧图片-->
            <img src="images/8-1g.jpg" alt="" class="mr-car1">
            <img src="images/8-1g.jpg" alt="" class="mr-car2">
            <img src="images/8-1g.jpg" alt="" class="mr-car3">
            <img src="images/8-1g.jpg" alt="" class="mr-car4">
            <img src="images/8-1g.jpg" alt="" class="mr-car5">
            <!--通过p和span标签添加手机型号和价格-->
            <p class="mr-price1">vivo X90<br /><span>3999.00</span></p>
            <p class="mr-price2">vivo iQOO 11<br /><span>4399.00</span></p>
            <p class="mr-price3">iPhone 14 Pro<br /><span>9699.00</span></p>
            <p class="mr-price4">华为 Mate 50<br /><span>4999.00</span></p>
            <p class="mr-price5">OPPO K10x<br /><span>1399.00</span></p>
        </div>
    </div>

9.3 复合选择器

9.3.1 后代选择器

又称为包含选择器，可以选择作为某元素后代的元素.

后代选择器——典型用单个空格（" "）字符——组合两个选择器.

语法格式如下:

/* css */
h1 em{color:red;}

<h1><em>我变红色</em></h1>
<p><em>我不变色</em></p>

示例代码如下:

/* css */
div {
    text-align: center;
}

div h3 {
    color: #009688
}

div h5 {
    color: #a9a6a6;
}

div p {
    color: #e65100;
}

    <div>
        <h3>春晓</h3>
        <h5>孟浩然</h5>
        <p>春眠不觉晓，</p>
        <p>处处闻啼鸟。</p>
        <p>夜来风雨声，</p>
        <p>花落知多少。</p>
    </div>

9.3.2 子元素选择器

子代关系选择器 只能选择某元素的子元素，用大于号作为结合符

语法格式如下:

h1>strong{color:red;}

<h1><strong>我变红色</strong></h1>
<h1><em><strong>我不变色</strong></em></h1>

示例代码如下:

添加一首古诗，结合使用子元素选择器与后代选择器来设置古诗的样式。

.cont {
    text-align: center;
}

.cont h3 {
    color: #009688
}

.cont p {
    color: #e65100;
    background-color: #ffe6b6;
}

.cont>p {
    color: #a9a6a6;
    background-color: transparent;
}

    <div class="cont">
        <h3>春晓</h3>
        <p>孟浩然</p>
        <div>
            <p>春眠不觉晓，</p>
            <p>处处闻啼鸟。</p>
            <p>夜来风雨声，</p>
            <p>花落知多少。</p>
        </div>
    </div>

9.3.3 相邻兄弟元素选择器

可选择紧接在另一元素后的元素，且二者有相同父元素，使用“+”作为结合符

语法格式如下:

h1+p{color:yellow;}

示例代码如下:

添加一首古诗，古诗标题使用3级标题实现，作者及古诗内容都用<p>标签实现。设置古诗中标题和作者的文字颜色，其中设置作者的颜色时需要使用兄弟元素选择器。

.cont {
    text-align: center;
}
.cont h3 {	
    color: #009688
}
h3+p {
    color: #e65100;
    background-color: transparent;
}

    <div class="cont">
        <h3>春晓</h3>
        <p>孟浩然</p>
        <p>春眠不觉晓，</p>
        <p>处处闻啼鸟。</p>
        <p>夜来风雨声，</p>
        <p>花落知多少。</p>
    </div>

9.3.4 通用兄弟元素选择器

选择位于同一个父元素之中的某个元素之后的所有指定的兄弟元素，使用“~”作为结合符

语法格式如下:

h1~p{color:blue;}

示例代码如下:

添加一首古诗，然后设置古诗各部分内容的样式。

.cont {
    text-align: center;
}

.cont h3 {
    color: #009688
}

h3~p {
    color: #e65100;
}

h3+p {
    color: #a9a6a6;
}

    <div class="cont">
        <h3>春晓</h3>
        <p>孟浩然</p>
        <p>春眠不觉晓，</p>
        <p>处处闻啼鸟。</p>
        <p>夜来风雨声，</p>
        <p>花落知多少。</p>
    </div>

9.4 伪类选择器和伪元素选择器

伪类和伪元素

9.4.1 伪类选择器

CSS 中已经定义好的选择器，用来对某种特殊状态的目标元素应用样式.

主要有以下四种:

• :link 表示未访问的超链接应用样式
• :visited 表示对已访问的超链接应用样式(只对连接标签起作用)
• :hover 表示对鼠标所停留的元素应用样式
• :active 表示对用户正在单击的元素应用样式

注意:

1. :link 和 :visited 只对连接标签起作用
2. :hover 伪类必须在 :link 和 :visited 两个伪类之后, :actived 伪类必须在 :hover 伪类之后.
3. 即 :link 和 :visited , :hover , :actived 这样的顺序

示例代码如下:

通过伪类选择器改变特定状态的标签样式。

a:link {
    color: #000;
}

a:visited {
    color: #f00;
}

.hov:hover {
    border: 2px red solid;
}

.act:active {
    background: #ffff00;
}

9.4.2 伪元素选择器

用来改变文档中特定部分的效果样式

主要有以下四种:

• :first-letter 该选择器对应的CSS样式对指定对象内的第一个字符起作用.
• :first-line 该选择器对应的CSS样式对指定对象内的第一行内容起作用.
• :before 该选择器与内容相关的属性结合使用,用于在指定对象内部的前端插入内容.
• :after 该选择器与内容相关的属性结合使用,用于在指定对象内部的尾端添加内容.

示例代码如下:

通过伪元素选择器向页面中添加内容，并且修改类名为“txt”的标签中第一行文字以及 <p> 标签第一个字的样式。

.txt:first-line {
    font-size: 35px;
    height: 50px;
    line-height: 50px;
    color: #000;
}

p:first-letter {
    font-size: 30px;
    margin-left: 20px;
    line-height: 30px;
}

.txt:after {
    content: url("../img/phone1.png");
    position: absolute;
    top: 75px;
    left: 777px;
}

实例代码如下:

结合类选择器、伪类选择器以及伪元素选择器实现对vivo X90手机的宣传页面的美化。

@charset "utf-8";

/*css document*/
/*类选择器设置页面的整体大小以及背景图片*/
.cont {
    /*设置页面的宽度为1536像素*/
    width: 1536px;
    /*设置页面的高度为840像素*/
    height: 840px;
    /*设置页面外边距上下为0，左右为自适应*/
    margin: 0 auto;
    /*文字对齐方式居中对齐*/
    text-align: center;
    /*为页面设置背景图片*/
    background: url("./img/bg.jpg");
}

/*标记选择器选择<h1>标题标记*/
h1 {
    /*设置向上的内边距*/
    padding-top: 80px;

}

/*使用类选择器，改变主题内容的样式*/
.top {
    /*设置行高为30像素*/
    line-height: 30px;
    /*设置主体部分的外边距*/
    margin: 0 auto;
    /*设置文字的对其方式为居中对齐*/
    text-align: center;
    /*设置主体部分宽度为650像素*/
    width: 650px;
    /*设置文字的大小*/
    font-size: 20px;
}

/*在类名为top的div后面添加内容*/
.top:after {
    /*添加的内容为1张图片，url为图片地址*/
    content: url("./img/phone.png");
    /*设置显示方式*/
    display: block;
    /*设置所天机啊内容向上的外边距*/
    margin-top: 50px;

}

/*类选择器中第一行文字的样式*/
.top:first-line {
    /*设置第一行文字的字体*/
    font-size: 30px;
    /*设置第一行文字的行高*/
    line-height: 90px;

}

/*设置未被访问的超链接的样式*/
a:link {
    /*取消其默认的下划线*/
    text-decoration: none;
    /*设置字体颜色为黑色*/
    color: #000;

}

/*设置访问后超链接的样式*/
a:visited {
    /*设置访问后的超链接字体为紫色*/
    color: purple;

}

/*设置鼠标停在超链接上的样式*/
a:hover {
    /*鼠标滑过超链接时，文字下方出现下划线*/
    text-decoration: underline;
    /*设置鼠标停在超链接上时的文字颜色*/
    color: #B49668;

}

/*设置正在被单击的超链接样式*/
a:active {
    /*设置正在被单击的超链接的文字颜色*/
    color: red;
    /*取消正在被单击的超链接的下划线*/
    text-decoration: none;
}

    <div class="cont">
        <h1><a href="#">vivo X90</a></h1>
        <div class="top">蔡司影像 超越想象<br />
            vivo X90支持舒适模式，会随着时间不断调整色温，渐进式地减少蓝光，减少人体褪黑素的产生，从而较为科学地减少视觉疲劳</div>
    </div>