CSS3(四) CSS3属性选择器

CSS3

发布日期: 2020-04-29

更新日期: 2020-05-24

文章字数: 900

阅读时长: 4 分

阅读次数:

学习 CSS3 之前必须要说明的几个问题

浏览器支持问题(IE6789 都别想了)
厂商前缀问题(涉及到内核-webkit-,-moz-,-ms-,-o-)
在 JS 中的写法:


 -webkit-transtion ==> WebkitTranstion;
 -o-transtion ==> OTransition
 -moz-transtion ==> MozTranstion

CSS3 属性选择器但是记住了不能是数字开头

E[attr] 只使用属性名,但没有确定任何属性值
E[attr=value] 指定属性名,并指定了该属性的属性值
E[attr~~=value]指定属性名,并有属性值.此属性值是一个词列表,并且以空格隔开,其中词列表包含了一个 value 词,而且等号前面的”~~“不能不写
E[attr^=value]指定了属性名,并且有属性值,属性值是以 value 开头的
E[attr$=value]指定了属性名,并且有属性值,而且属性值是以 value 结束的
E[attr*=value]指定了属性名,并且有属性值,而且属性中包含了 value
E[attr|=value]指定了属性名,并且属性值是 value 或者以”value-“开头的值比如说(zh-cn)
实例百度文库
备注:IE7 以上支持

CSS 属性代码基础版本

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content="text/html; charset=utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>CSS3</title>
</head>
<style>
    /*属性选择器*/
    *{margin:0px;padding:0px;}
    div{height:30px;border:1px solid black;}
    /*div[aaa]{background:red;}*/
    div[aaa=l1o]{background:blue;}   /*特别注意属性值不能是数字开头，否则认不出来*/
    div[aaa~=old]{background:black;}  /*波浪号便是自定义属性里面有old这个词。但是他前面必然是分开的。必须有空格作为隔断。这样才找得到*/
    div[aaa^=g]{background:pink;}  /*^表示找到这个单词开头的，中间可以不用管分隔符，只要他开头就找得到*/
    div[aaa$=m]{background:deepskyblue;}/*表示$以什么字母结束的。不用管是否分开*/
    div[aaa*=a33]{background:yellow;}/*表示只要存在这个单词都能找的到*/
    div[aaa|=b]{background:red;}  /*表示以b-开头的或者就是单纯的一个单词开头*/
</style>
<body>
<div aaa="a11 old">1111</div>
<div aaa="b1o">2222</div>
<div aaa="malea33">3333</div>
<div aaa="malea44m">4444</div>
<div aaa="g a55">5555</div>
<div aaa="b-leo">2222</div>
<div aaa="g-leo">2222</div>
<div aaa="b">2222</div>
</body>
</html>

百度文库效果图

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>百度文库</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    ul {
      list-style-type: none;
    }
    li {
      height: 30px;
      line-height: 30px;
      font-size: 24px;
      border: 1px solid #ccc;
    }
    a {
      text-decoration: none;
      padding-left: 30px;
    }
    li a[href*='text'] {
      background: url(images/text.gif) no-repeat left center;
    }
    li a[href*='ppt'] {
      background: url(images/ppt.gif) no-repeat left center;
    }
    li a[href*='swf'] {
      background: url(images/swf.gif) no-repeat left center;
    }
    li a[href*='word'] {
      background: url(images/w.gif) no-repeat left center;
    }
    li a[href*='excel'] {
      background: url(images/x.gif) no-repeat left center;
    }
  </style>
  <body>
    <ul>
      <li><a href="http://www.baidu.com/text/index.html">TEXT文档</a></li>
      <li><a href="http://www.baidu.com/ppt/index.html">PPT文档</a></li>
      <li><a href="http://www.baidu.com/swf/index.html">SWF文档</a></li>
      <li><a href="http://www.baidu.com/word/index.html">w文档</a></li>
      <li><a href="http://www.baidu.com/excel/index.html">x文档</a></li>
    </ul>
  </body>
</html>