CSS属性选择器

CSS属性选择器

首先定义一些超链接标签

<p class="demo">
    <a herf="https://www.baidu.com" class="links items first" id="first">1</a>
    <a herf="https://weibo.com" class="links items active" target="_blank"     title="test">2</a>
    <a herf="images/1.html" class="links items">3</a>
    <a herf="images/2.png" class="links items">4</a>
    <a herf="images/3.jpg" class="links items">5</a>
    <a herf="abc" class="links items">6</a>
    <a herf="/a.pdf" class="links items">7</a>
    <a herf="/abc.pdf" class="links items">8</a>
    <a herf="ab.doc" class="links items">9</a>
    <a herf="cd.doc" class="links items">10</a>
</p>

接着设置标签的样式

<style>
    .demo a{
          float : left;
          display : block;
          height : 50px;
          width : 50px;
          border-radius : 10px;
          background : red;
          text-align : center;
          color : black;
          text-decoration : none;
          margin-right : 5px;
          font : bold 20px/50px Arial
        }
</style>

测试属性选择器

/* 属性名 = 属性名（正则）
           =绝对等于 *=通配
           ^= 以...开头
           $= 以...结尾
           */

/* 存在id属性的元素 a[]{} */
/*
a[id]{
  background : yellow;
}
*/

/* id=first的元素 */
/*
a[id=first]{
  background : green;
}
*/

/* 标签中class属性中所有包含links的元素 */
/*
a[class *= "links"]{
  background : green;
}
*/

/* 标签中herf属性中所有以https开头的元素 */
/*
a[herf^="https"]{
  background : green;
}
*/

/* 标签中herf属性中所有以pdf结尾的元素 */
a[herf$="pdf"]{
  background : green;
}