随笔 - 54,  文章 - 0,  评论 - 0,  阅读 - 13105
CSS3选择器

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

1.E[att^=value]属性选择器

E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。

下面通过一个案例对E[att^=value]属性选择器的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>E[att^=value]</title>
        <style type="text/css">
        p[id^="one"]{
            color: pink;
            font-family: "微软雅黑";
            font-size: 20px;
        }
        </style>
    </head>
    <body>
        <p id="one">
            为了看日出，我常常早起。那时天还没有大亮，周围非常清静，船上只有机器的响声。
        </p>
        <p>
            天空还是一片浅蓝，颜色很浅。转眼间天边出现了一道红霞，慢慢地在扩大它的范围，
            加强它的亮光。我知道太陽要从天边升起来了，便不转眼地望着那里。
        </p>
        <p id="one1">
            果然过了一会儿，在那个地方出现了太陽的小半边脸，红是真红，却没有亮光。这个太
            陽好像负着重荷似地一步一步、慢慢地努力上升，到了最后，终于冲破了 云霞，完全跳
            出了海面，颜色红得非常可爱。一刹那间，这个深红的圆东西，忽然发出了夺目的亮光，
            射得人眼睛发痛，它旁边的云片也突然有了光彩。
        </p>
        <p id="two1">
            有时太陽走进了云堆中，它的光线却从云里射下来，直射到水面上。这时候要分辨出
            哪里是水，哪里是天，倒也不容易，因为我就只看见一片灿烂的亮光。
        </p>
    </body>
</html>
复制代码

运行效果如图所示：

 

 

2.E[att$=value]属性选择器 

E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。

下面通过一个案例对E[att$=value]属性选择器的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>E[att$=value]</title>
        <style type="text/css">
        p[id$="main"]{
            color: #0cf;
            font-family: "宋体";
            font-size: 20px;
        }
        </style>
    </head>
    <body>
        <p id="old1">
            盼望着，盼望着，东风来了，春天的脚步近了。
        </p>
        <p id="old2">
            小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。
            坐着，趟着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
        </p>
        <p id="oldmain">
            桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的
            像雪。花里带着甜味儿，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜
            蜂嗡嗡地闹着……
        </p>
        <p id="newmain">
            “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土气息，混着青草味儿，
            还有各种花的香都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了……
        </p>
    </body>
</html>
复制代码

运行效果如图所示：

 

 

3.E[att*=value]属性选择器 

E[att*=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。

下面通过一个案例对E[att*=value]属性选择器的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>E[att*=value]</title>
        <style type="text/css">
        p[id*="demo"]{
            color: #0cf;
            font-family: "宋体";
            font-size: 20px;
        }
        </style>
    </head>
    <body>
        <p id="demo1">
            我们消受得秦淮河上的灯影，当圆月犹皎的仲夏之夜。
        </p>
        <p id="main1">
            在茶店里吃了一盘豆腐干丝，两个烧饼之后，以歪歪的脚步踅上夫子庙前停泊着的画舫，就懒洋洋躺到藤椅上
            去了。好郁蒸的江南，傍晚也还是热的。“快开船罢！”桨声响了。
        </p>
        <p id="newdemo">
            小的灯舫初次在河中荡漾；于我，情景是颇朦胧，滋味是怪羞涩的。我要错认它作七里
            的山塘；可是，河房里明窗洞启，映着玲珑入画的曲栏干，顿然省得身在何处了……
        </p>
        <p id="olddemo">
            又早是夕阳西下，河上妆成一抹胭脂的薄媚。是被青溪的姊妹们所薰染的吗？还是匀得
            她们脸上的残脂呢？寂寂的河水，随双桨打它，终是没言语。密匝匝的绮恨逐老去的年华，
            已都如蜜饧似的融在流波的心窝里，连呜咽也将嫌它多事，更哪里论到哀嘶……
        </p>
    </body>
</html>
复制代码

运行效果如图所示：

 

 

关系选择器

1.子代选择器（>）

子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为h1元素子元素的strong元素，可以这样写：h1>strong。

下面通过一个案例对子代选择器（>）的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子代选择器的应用</title>
        <style type="text/css">
        h1>strong{
            color: red;
            font-size: 20px;
            font-family: "微软雅黑";
        }
        </style>
    </head>
    <body>
        <h1>这个<strong>知识点</strong>很<strong>重要</strong></h1>
        <h1>传智<em><strong>播客</strong></em>欢迎你！</h1>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 

2.兄弟选择器（+、~） 

兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

临近兄弟选择器（+）

该选择器适用加号“+”来连接前后两个选择器。选择器中的2个元素有同一个父亲，而且第2个元素是紧跟第1个元素。

下面通过一个案例对临近兄弟选择器的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>临近兄弟选择器的应用</title>
        <style type="text/css">
        p+h2{
            color: green;
            font-family:"宋体";
            font-size: 20px;
        }
        </style>
    </head>
    <body>
        <h2>《赠汪伦》</h2>
        <p>李白乘舟将欲行，</p>
        <h2>忽闻岸上踏歌声。</h2>
        <h2>桃花潭水深千尺，</h2>  <!--只有紧跟p元素的那个h2元素应用了代码中设定的样式-->
        <h2>不及汪伦送我情。</h2>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 普通兄弟选择器（~）

普通兄弟选择器使用“~”来链接前后2个选择器。选择器中的2个元素有同一个父亲，但第2个元素不必紧跟第1个元素。

下面通过一个案例对普通兄弟选择器进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>临近兄弟选择器的应用</title>
        <style type="text/css">
        p~h2{
            color: green;
            font-family:"宋体";
            font-size: 20px;
        }
        </style>
    </head>
    <body>
        <p>你站在桥上看风景</p>
        <h2>看风景的人在楼上看你</h2>
        <h2>明月装饰了你的窗子</h2>
        <h2>你装饰了别人的梦</h2>
    </body>
</html>
复制代码

 

运行效果如图所示：

结构化伪类选择器

CSS3中新增加的选择器。

1.：root选择器

：root选择器用于匹配文档根元素，在HTML中，根元素始终是HTML元素。也就是说使用“：root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。

下面通过一个案例对：root选择器的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>：root选择器的应用</title>
        <style type="text/css">
        :root{color: red;}
        h2{color: blue;}
        </style>
    </head>
    <body>
        <h2>《面朝大海，春暖花开》</h2>
        <p>从明天起，做个幸福的人；喂马，劈柴，周游世界。从明天起，关心粮食和蔬菜；
        我有一所房子，面朝大海，春暖花开。</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 如果以上代码中不指定h2元素的字体颜色，而仅仅使用“：root选择器”设置的样式，那么效果变为：

 

 2.：not选择器

如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用：not选择器。

下面通过一个案例对：not选择器进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>：not选择器的应用</title>
        <style type="text/css">
        body *:not(h3){ /*body与*之间一定要有空格，否则无效*/
            color: orange;
            font-size: 20px;
            font-family: "宋体";
        }
        </style>
    </head>
    <body>
        <h3>《世界上最远的距离》</h3>
        <p>世界上最远的距离</p>
        <p>不是生与死的距离</p>
        <p>而是我站在你面前</p>
        <p>你却不知道我爱你……</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 注意：body与*之间一定要有空格，否则无效。

3.：only-child选择器

：only-child选择器用于匹配属于某元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“：only-child选择器”选择这个子元素。

下面通过一个案例对“：only-child选择器”的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>：only-child选择器的应用</title>
        <style type="text/css">
        li :only-child{color: red;}
        </style>
    </head>
    <body>
    <div>
        国内电影：
        <ul>
            <li>一代宗师</li>
            <li>叶问</li>
            <li>非诚勿扰</li>
        </ul>
        漂亮国电影：
        <ul>
            <li>侏罗纪世界</li>
        </ul>
        小日子过得不错的本动漫：
        <ul>
            <li>蜡笔小新</li>
            <li>火影忍者</li>
            <li>航海王</li>
        </ul>
    </div>
    </body>
</html>
复制代码

 

运行效果如图所示：

效果与实际不符，不知问题出在哪里。

 4.：frist-child和：last-child选择器

：frist-child选择器和：last-child选择器分别用于为父元素中的第1个或者最后一个子元素设置样式。

下面通过一个案例来演示它们的使用方法：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>：frist-child和last-child选择器的应用</title>
        <style type="text/css">
        p:first-child{
            color: pink;
            font-size: 16px;
            font-family: "宋体";
        }
        p:last-child{
            color: blue;
            font-size: 16px;
            font-family: "微软雅黑";
        }
        </style>
    </head>
    <body>
        <p>第一篇 毕业了</p>
        <p>第二篇 关于考试</p>
        <p>第三篇 夏日飞舞</p>
        <p>第四篇 惆怅的心</p>
        <p>第五篇 畅谈美丽</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 5.：nth-child(n)和：nth-last-child(n)选择器

使用：nth-child(n)和：nth-last-child(n)选择器可以选择第n个或倒数第n个子元素，与元素类型无关。

下面通过一个案例来演示它们的使用方法：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>：nth-child(n)和nth-last-child(n)选择器的应用</title>
        <style type="text/css">
        p:nth-child(2){
            color: pink;
            font-size: 16px;
            font-family: "宋体";
        }
        p:nth-last-child(2){
            color: blue;
            font-size: 16px;
            font-family: "微软雅黑";
        }
        </style>
    </head>
    <body>
        <p>第一篇 毕业了</p>
        <p>第二篇 关于考试</p>
        <p>第三篇 夏日飞舞</p>
        <p>第四篇 惆怅的心</p>
        <p>第五篇 畅谈美丽</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

6.：nth-of-type（n）和：nth-last-of-type（n）选择器

 ：nth-of-type（n）和：nth-last-of-type（n）选择器用于匹配属于父元素特定类型的第n个子元素和倒数第n个子元素。

下面通过一个案例对它们的具体用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>：nth-of-type(n)和nth-last-of-type(n)选择器的应用</title>
        <style type="text/css">
        h2:nth-of-type(odd){color: #f09;}   /*只对奇数行起作用*/
        h2:nth-last-of-type(even){color: #12ff65;}  /*只对偶数行起作用*/
        p:nth-last-of-type(2){font-weight: bold;}  /*将倒数第2个p元素的字体加粗显示*/
        </style>
    </head>
    <body>
        <h2>网页设计</h2>
        <p>网页设计是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化)，进行网站功能策划。
        然后进行进行的页面设计美化工作。</p>
        <h2>Java</h2>
        <p>Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言。</p>
        <h2>iOS</h2>
        <p>iOS是由苹果公司开发的移动操作系统。</p>
        <h2>PHP</h2>
        <p>PHP(PHP：Hypertext Preprocessoe，超文本预处理器)是一种通用开源脚本语言。</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 7.：empty选择器

：empty选择器用来选择没有子元素或文本内容为空的所有元素。

下面通过一个案例对“：empty选择器”的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>empty选择器的应用</title>
        <style type="text/css">
        p{
            width: 150px;
            height: 30px;
        }
        :empty{background-color: #999;}
        </style>
    </head>
    <body>
        <p>传智播客北京校区</p>
        <p>传智播客上海校区</p>
        <p>传智播客广州校区</p>
        <p></p>
        <p>传智播客北京校区</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 8.：target选择器

：target选择器用于为页面中的某个target元素指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，：target选择器所设置的样式才会起作用。

下面通过一个案例对“：target选择器”进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>target选择器的应用</title>
        <style type="text/css">
        :target{background-color: #e5eecc;}
        </style>
    </head>
    <body>
        <h1>这是标题</h1>
        <p><a href="#news1">跳转至内容1</a></p>
        <p><a href="#news2">跳转至内容2</a></p>
        <p>请单击上面的链接，：target选择器会突然显示当前活动的HTML锚点。</p>
        <p><b id="news1">内容1……</b></p>
        <p><b id="news2">内容2……</b></p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 伪元素选择器

1.：before选择器

：before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。

下面通过一个案例对“：before选择器”进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>before选择器的应用</title>
        <style type="text/css">
        p:before{
            content: "传播智客"; /*content用来指定具体要插入的内容*/
            color: #c06;
            font-size: 20px;
            font-family: "微软雅黑";
            font-weight: bold;
        }
        </style>
    </head>
    <body>
        <p>专注于Java、.NET、PHP、网页设计和平面设计、iOS、c++工程师的培养，提供的免费视频教程是目前
        覆盖面最广，项目最真实的视频教程之一。</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 2.：after选择器

：after伪元素选择器用于在某个元素之后插入一些内容。

下面通过一个案例对“：after选择器”进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>after选择器的应用</title>
        <style type="text/css">
        p:after{content: url(C:/Users/86155/Desktop/网页制作HTML5+CSS3/鸟巢.webp) ;}
        </style>
    </head>
    <body>
        <p>鸟巢<br></p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

链接伪类

定义超链接时，为了提高用户体验，网页设计者经常需要为超链接不同的状态指定不同的样式，使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。在CSS3中，通过链接伪类可以实现不同的超链接样式。

所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加“：”构成。

超链接标记<a>的伪类有4种，具体如表所示：

超链接标记<a>的伪类 含义
a:link{CSS样式规则；} 未访问时超链接的状态
a:visited{CSS样式规则；} 访问后超链接的状态
a:hover{CSS样式规则；} 鼠标指针悬停时超链接的状态
a:active{CSS样式规则；} 鼠标单击不动时超链接的状态

下面通过一个案例来做具体演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>链接伪类</title>
        <style type="text/css">
        a:link,a:visited{             /*未访问时和访问后*/
            color: pink;
            text-decoration: none;    /*清除超链接默认的下划线*/
        }
        a:hover{                      /*鼠标指针悬停时*/
            color: blue;
            text-decoration: underline; /*鼠标指针悬停时出现下划线*/
        }
        a:active{color: #F00;}                       /*鼠标单击不动时*/
        </style>
    </head>
    <body>
        <a href="#">公司首页</a>
        <a href="#">公司简介</a>
        <a href="#">产品介绍</a>
        <a href="#">联系我们</a>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 注意：同时使用链接的4种伪类时，通常按照a:link、a:wisited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。

posted on   心有所信方能行远  阅读(114)  评论(0)  编辑  收藏  举报
相关博文：
· CSS核心基础
· 浮动与定位
· CSS3选择器
· CSS3新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
· CSS选择器（包含CSS3新增的伪类和属性选择器等）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
Copyright © 2025 心有所信方能行远
Powered by .NET 9.0 on Kubernetes Powered By: 博客园
点击右上角即可分享
微信分享提示
AI IDE Trae