属性选择器

最新推荐文章于 2023-04-09 13:44:16 发布

Paranoid_truggle

最新推荐文章于 2023-04-09 13:44:16 发布

阅读量80

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Paranoid_truggle/article/details/119082038

版权

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  属性选择器-->
  <style>
    /*float浮动*/
    /*border-radius变圆角*/
    /*text-decoration去掉下划线*/
    /*font设置字体样式
      font 粗体 字体大小/行高 宋体（字体）；
     */
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: #42b983;
      text-align: center;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Algerian;
    }
  /*  属性选择器
      属性名： 属性名=属性值（正则）
      = 绝对等于
      *= 包含这个元素
      ^=以这个开头
      $=以这个结尾
      a[]标签名的后面不能出现空格
   标签名【标签里面的某些属性class，ID等】{}*/
    a[id]{
      background: red;
    }
    a[id="first"]{
      background: burlywood;
    }
  /*  class中有links的元素*/
    a[class*="link"] {
      background: yellow;
    }
  /*  在href中以HTTP开头的元素*/
    a[href^=http]{
      background: #ff5777;
    }
    a[href$=com]{
      background: #ff5777;
    }
  </style>
</head>
<body>
<!--一个标签可以起多个类名-->
<p class="demo">
  <a href="https://www.baidu.com" class="link item first" id="first">1</a>
  <a href="http://www.huohu.com" class="link item active">2</a>
  <a href="imgine" class="link item">3</a>
  <a href="dsads" class="link item">4</a>
  <a href="sdasd"class="link item" >5</a>
  <a href="" class="link item">6</a>
  <a href="" class="link item">7</a>
  <a href="" class="link item">8</a>
  <a href="" class="link item last">9</a>
</p>
</body>

Paranoid_truggle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
属性选择器

<head> <meta charset="UTF-8"> <title>Title</title> <style> /*float浮动*/ /*border-radius变圆角*/ /*text-decoration去掉下划线*/ /*font设置字体样式 font 粗体字体大小/行高宋体（字体）； */ .demo a
复制链接

扫一扫