站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

css3属性选择器包括哪几种

时间:2021-12-27 [网络编程]作者:fabuyuan 浏览:8 次

css3属性选择器包括3种:1、“E[att^=value]”选择器,选择名称为E的标记,且该标记定义了att属性,属性值包含前缀为value的子字符串;2、“E[att$=value]”选择器;3、“E[att*=value]”选择器。

css3属性选择器包括哪几种  2

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

属性选择器可以根据元素的属性及属性值来选择元素。CSS3中新增了3种属性选择器:E[att^=value]E[att$=value]E[att*=value],下面我们详细介绍。

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

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

下面通过一个案例对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 id="two">天空还是一片浅蓝,颜色很浅。转眼间天边出现了一道红霞,慢慢地在扩大它的范围,加强它的亮光。我知道太阳要从天边升起来了,便目不转睛地望着那里。</p>
        <p id="one1">果然过了一会儿,在那个地方出现了太阳的小半边脸,红是真红,却没有亮光。这个太阳好像负着重荷似地一步一步、慢慢地努力上升,到了最后,终于冲破了云霞,完全跳出了海面,颜色红得非常可爱。一刹那间,这个深红的圆东西,忽然发出了夺目的亮光,射得人眼睛发痛,它旁边的云朵也突然有了光彩。</p>
        <p id="two1">有时太阳走进了云堆中,它的光线却从云里射下来,直射到水面上。这时候要分辨出哪里是水,哪里是天,倒也不容易,因为我就只看见一片灿烂的亮光。</p>
    </body>
</html>

在上述代码中,使用了[att^=value]选择器“p[id^="one"]”。只要p元素中的id属性值是以“one”字符串开头就会被选中,从而呈现特殊的文本效果。

css3属性选择器包括哪几种  2

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

E[att$=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样,E元素可以省略,如果省略则表示可以匹配满足条件的任意元素。例如,div[id$=section]表示匹配包含id属性,且id属性值是以“section”字符串结尾的div元素。

下面通过一个案例对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>

在上述代码中,使用到了[att$=value]选择器“p[id$="main"]”。只要p元素中的id属性值是以“main”字符串结尾就会被选中,从而呈现特殊的文本效果。

css3属性选择器包括哪几种  2

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

E[att*=value]选择器用于选择名称为E的标记,且该标记定义了att属性,att属性值包含value子字符串。该选择器与前两个选择器一样,E元素也可以省略,如果省略则表示可以匹配满足条件的任意元素。例如,div[id*=section]表示匹配包含id属性,且id属性值包含“section”字符串的div元素。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att*=value]属性选择器的使用</title>
<style type="text/css">
    p[id*="demo"]{
        color:#0ca;
        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>

在上述代码中,使用了[att*=value]选择器“p[id*="demo"]”。只要p元素中的id属性值包含“demo”字符串就会被选中,从而呈现特殊的文本效果。

css3属性选择器包括哪几种  2

(学习视频分享:css视频教程

以上就是css3属性选择器包括哪几种的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css3属性选择器

转载请注明来源:css3属性选择器包括哪几种

本文永久链接地址:https://www.adminjie.com/post/6850.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • mysql怎样in查询操作排序

      mysql怎样in查询操作排序

      在mysql中,可利用“ORDERBY”子句配合SELECT语句in查询来操作排序,语法为“select*from表名where字段值in(排序1,排...

    • docker能用yum命令吗

      docker能用yum命令吗

      docker能用yum命令,docker容器内安装yum的方法:1、通过“apt-getupdate”更新apt-get指令;2、通过“apt-getins...

    • 如何解决docker telnet不通的问题

      如何解决docker telnet不通的问题

      dockertelnet不通的解决办法:1、查看配置文件;2、修改nginx配置文件的端口为80;3、重新加载即可。本文操作环境:centOS6.8系统、Do...

    • css怎样改变一个图片高度和宽度

      css怎样改变一个图片高度和宽度

      在css中,可以使用width和height属性来改变一个图片高度和宽度,只需要给图片元素添加“width:宽度值;height:高度值;”样式即可。width...

    • docker不能删除镜像怎么办

      docker不能删除镜像怎么办

      docker不能删除镜像的解决办法:1、删除REPOSITORY;2、删除IMAGEID;3、通过“dockerimages”查看镜像即可。本文操作环境:c...

    热门文章