CSS2系列的万博manbext备用网址已经更新完毕很久了,今天终于开始了CSS3系列万博manbext备用网址的更新,貌似又是一个漫长的过程!
还没有看完CSS2系列万博manbext备用网址的童鞋麻烦先学习一遍哦,知识都是有体系的,基础没有打好,后面的内容会更吃力。
既然是系列万博manbext备用网址,那还是要按照体系来,先把最基础的选择器讲完。
CSS3新增了很多很棒的选择器,其中属性选择器在CSS2就有一部分了,在CSS3又增加了几个。为什么在以前属性选择器用的少呢,还不是因为IE6低版本支持不友好嘛,不过现在IE6已经彻底灭亡,所以让我们欢快地迎来属性选择器的使用吧。
一、属性选择器
二、万博manbext3.0首页登录
1、选择有alt属性的图片。
img[alt]
2、选择提交按钮。
input[type=submit]{ border:none; background-color:#F36; width:200px; padding:10px; color:#fff; cursor:pointer;}
3、选择class属性包含“box”这个单词的对象。
<div class="boxbg">1</div> <div class="bg1 box">2</div> <div class="box bg2">3</div>
[class~=box]{ background-color:#999;}
此时,只能选中后面两个div,因为第一个div,class属性中的box不是作为一个独立的单词存在。
4、选择class为list开头的元素。
<ul> <li class="list-1">1</li> <li class="list2">2</li> <li class="list">3</li> </ul>
[class|=list]{ color:#F36;}
此时,只能选中第一个和第三个li元素。这里的list必须是一个独立的单词或者list后面有连字符“-”的单词。
5、以万博manbext3.0首页登录4为例,但是使用该选择器,则可以选中所有以list开头的元素。
[class^=list]{ color:#F36;}
这里的以什么开头,不管是独立的单词,还是有连字符的单词,还是和别的字符混在一起的单词,只要以list开头,都可以选中。区别于[class|=list]
6、选中所有jpg图片
img[src$=".jpg"] /*这里必须有双引号,把.jpg引起来,或者使用转义字符:img[src$=\.jpg]*/
7、选择路径里面包含mrszhao的链接
<a href="http://www.mrszhao.com">赵老师web前端开发教学博客</a> rel="nofollow" <a href="http://www.mrszhao12.com">百度一下</a> rel="nofollow" <a href="http://www.bmrszhao14.com.cn">百度一下</a>
[href*=mrszhao]{ font-weight:bold;}
此时的包含,不管mrszhao是独立单词 ,还是前后有内容,只要有mrszhao这个子字符串,都可以选中。区别于[class~=box]。
属性选择器主要注意两点:
1、[attribute|=value]和[attribute^=value]都是以value开头,但是一个是独立的单词,一个是子字符串。[attribute~=value]和[attribute*=value]都是包含value值,但是一个是独立的单词,一个是子字符串。
2、如果属性值里面有“.”,“:”,"/"等特殊字符的时候,要用“”双引号引起来,或者使用转义字符“\”。
发表评论:
◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。