加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

菁瑞优智干货:被IE耽搁了的CSS属性选择器

(2022-12-06 11:00:39)
标签:

h5前端培训

java培训

it

菁瑞优智

ui设计培训

CSS2中有很多属性选择器,而在CSS3中,又新增加很多很棒的属性选择器。为什么以前属性选择器用的比较少呢,主要是因为IE浏览器低版本不友好,不过现在的版本已经能很好的兼容了,所以让我们愉快的使用属性选择器吧。

一、属性选择器

菁瑞优智干货:被IE耽搁了的CSS属性选择器

二、案例

1、选择有alt属性的图片。

菁瑞优智干货:被IE耽搁了的CSS属性选择器

2、选择提交按钮。

菁瑞优智干货:被IE耽搁了的CSS属性选择器

3、选择class属性包含“box”这个单词的对象。

菁瑞优智干货:被IE耽搁了的CSS属性选择器

此时,只能选中后面两个div,因为第一个div,class属性中的box不是作为一个独立的单词存在。

4、选择class为list开头的元素。

菁瑞优智干货:被IE耽搁了的CSS属性选择器

此时,只能选中第一个和第三个li元素。这里的list必须是一个独立的单词或者list后面有连字符“-”的单词。

5、以案例4为例,但是使用该选择器,则可以选中所有以list开头的元素。

菁瑞优智干货:被IE耽搁了的CSS属性选择器

这里的以什么开头,不管是独立的单词,还是有连字符的单词,还是和别的字符混在一起的单词,只要以list开头,都可以选中。区别于[class|=list]

6、选中所有jpg图片

菁瑞优智干货:被IE耽搁了的CSS属性选择器

7、选择路径里面包含jenreal的链接

菁瑞优智干货:被IE耽搁了的CSS属性选择器

此时的包含,不管mrszhao是独立单词 ,还是前后有内容,只要有mrszhao这个子字符串,都可以选中。区别于[class~=box]。 属性选择器主要注意两点:

1、[attribute|=value]和[attribute^=value]都是以value开头,但是一个是独立的单词,一个是子字符串。[attribute~=value]和[attribute*=value]都是包含value值,但是一个是独立的单词,一个是子字符串。

2、如果属性值里面有“.”,“:”,"/"等特殊字符的时候,要用“”双引号引起来,或者使用转义字符“\”。

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有