• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > 那些被IE浏览器耽搁了的CSS属性选择器

    那些被IE浏览器耽搁了的CSS属性选择器

    作者: 分类:HTML5与CSS3.0 点击: 110 次
    wordpress CMS主题:ssmay主题

      CSS2系列的教程已经更新完毕很久了,今天终于开始了CSS3系列教程的更新,貌似又是一个漫长的过程!

      还没有看完CSS2系列教程的童鞋麻烦先学习一遍哦,知识都是有体系的,基础没有打好,后面的内容会更吃力。

      既然是系列教程,那还是要按照体系来,先把最基础的选择器讲完。

      CSS3新增了很多很棒的选择器,其中属性选择器在CSS2就有一部分了,在CSS3又增加了几个。为什么在以前属性选择器用的少呢,还不是因为IE6低版本支持不友好嘛,不过现在IE6已经彻底灭亡,所以让我们欢快地迎来属性选择器的使用吧。

      一、属性选择器

      选择器 例子 例子描述 CSS版本
      [attribute] [alt] 选择带有 alt属性所有元素。 2
      [attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
      [attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
      [attribute|=value] [class|=top] 选择其 class 属性值以 "top" 开头的元素。该值必须是整个单词,比如class="top",或者后面跟着连字符,比如class="top-nav",class="top-nav mobile" 2
      [attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
      [attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
      [attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3

      二、案例

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

      img[alt]

      2、选择提交按钮。

      input[type=submit]{
      	border:none;
      	background-color:#F36;
      	width:200px;
      	padding:10px;
      	color:#fff;
      	cursor:pointer;}

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

      Markup
      <div class="boxbg">1</div>
      <div class="bg1 box">2</div>
      <div class="box bg2">3</div>
      CSS
      [class~=box]{
      	background-color:#999;}

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

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

      Markup
      <ul>
              <li class="list-1">1</li>
              <li class="list2">2</li>
              <li class="list">3</li>
      </ul>
      CSS
      [class|=list]{
      	color:#F36;}

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

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

      CSS
      [class^=list]{
      	color:#F36;}

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

      6、选中所有jpg图片

      CSS
      img[src$=".jpg"]  /*这里必须有双引号,把.jpg引起来,或者使用转义字符:img[src$=\.jpg]*/

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

      Markup
      <a href="http://www.mrszhao.com">赵老师web前端开发教学博客</a>
      <a href="http://www.mrszhao12.com">百度一下</a>
      <a href="http://www.bmrszhao14.com.cn">百度一下</a>
      CSS
      [href*=mrszhao]{
      	font-weight:bold;}

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

      属性选择器主要注意两点:

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

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



      QQ二维码

    文章作者:andy
    本文地址:http://wanlimm.com/77201808256684.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.