Login
芋圆社区 > 编程 > CSS > 属性选择器[attribute]

属性选择器[attribute]

1196
0
2022-06-28
2022-06-28
Hey、小怪兽

  • • 应用场景:
  • <div class="ta-div">
        <p class="ta-content-1">1</p>
        <div class="ta-content-2">2</div>
        <p class="ta-content-4">4</p>
        <a class="ta-content-5">5</a>
        <p>6</p>
    </div>
  • • 希望修改ta-div里的1245,不包括6,这时就会想到要是CSS能匹配标签中class里包含"ta-content-"或者以"ta-content-"开头的就好了,这里就可以用到CSS3属性选择器[attribute]了
  • • 可以先看看W3school的CSS选择器表格,就一目了然了
  • // 随便挑一种写法写就可以了
    [class*=ta-content-] {
      color: red;
    }
  • • 注意[attribute=value]这个value可以加双引号也可以不加
  • // 两种都是对的
    [class*=ta-content-] {
      color: red;
    }
    [class*="ta-content-"] {
      color: red;
    }
  • • 其他例子(只改变box的颜色,这个选择器用法很多,可以自己探索):
  • • 至于性能问题,比方说a[class="ta-box"],它会先找到所有的a标签,之后再匹配class的属性值是否为"ta-box"
  • • 也不会说性能非常差,现在大部分项目也不差这一点点的性能优化,CSS其他选择器也是为了让我们更好地完成工作,可以取舍

上一篇:用变量控制CSS

下一篇:修改火狐浏览器滚动条

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

overscroll-behavior

用变量控制CSS

属性选择器[attribute]

修改火狐浏览器滚动条

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点