章节
问答
笔记
评论
占位
占位

CSS3选择器 属性选择器

   在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。

   在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:

(单击可放大)

 实例展示:

html代码

<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

css代码  

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

 结果显示:

任务

请你在右边输入css3代码改变三行链接的背景颜色,第一行为红色,第二行为绿色,第三行为蓝色。

实现效果:

要求:用三条css样式实现。(大脑开动起来吧!)

好吧!如果实现想不出来就打开“不会了怎么办”吧。

?不会了怎么办

对CSS3新增的属性选择器要深入掌握呀!请你再详细看下内容有关的详细讲解吧,相信这对你很轻松的!

参考代码如下:

a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue;}
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?