文章地址 https://www.cnblogs.com/sandraryan/

[att*=val] 选择所有att属性值中包含val的。只要包含val值，不论val值在属性值的前面还是中间还是后面~

<style>

    div[class*=div]{

        color: red;

    }

</style>

<body>

    <div class="div1">div1</div>

    <div class="div1.2">div1.2</div>

    <div class="hhhdiv1">hhhdiv1</div>

</body>
效果 ：都变红

[att^val] att属性值中以val开头的所有。

    <style>

    div[class^=div1]{

        color: red;

    }

    </style>

<body>

    <div class="div1">div1</div>

    <div class="div1.2">div1.2</div>

    <div class="hdiv1">hdiv1</div>

</body>
效果：前两个变红

[att$=val] att中以val结尾的属性值

  <style>

    div[class$=div1]{

        color: red;

    }

    </style>

<body>

    <div class="div1">div1</div>

    <div class="div1.2">div1.2</div>

    <div class="hdiv1">hdiv1</div>
效果：第一，三div变红

h5与c3权威指南笔记--css3新属性选择器的更多相关文章

  1. h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target

    root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...

  2. H5与C3权威指南笔记--transition动画

    translation:过渡 举个栗子:transition: width 1s linear; transition有三个属性,分别是transition-property, transition- ...

  3. H5与C3权威指南笔记--box-shadow

    box-shadow 用于给盒子添加阴影效果.IE9+ 举个栗子:box-shadow: inset 5px 5px 5px red; inset可选,该值会让阴影出现在盒子内部. 第一个5px是阴影 ...

  4. css 权威指南笔记（四）选择器

    规则结构 每个规则都有两个基本部分组成:选择器和声明块.声明块由一个或多个声明组成,每个声明则是一个属性-值对. 元素选择器 声明和关键字 关键字一般由空格隔开:有一种情况例外 font属性中的  斜 ...

  5. Struts2权威指南笔记

    Struts2权威指南笔记 1.mvc特点包括: ① 多个视图可以对应一个模型 ② 模型返回的数据与显示逻辑分离 ③ 应用层被分隔为三层,降低了各层之间的耦合,提供了应用的可扩展性 ④ 控制层的概念也 ...

  6. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  7. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  8. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  9. css3新的选择器

    CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元 ...

随机推荐

  1. ES踩坑笔记

    现在开始在业务上使用ES,记录一些踩坑经历,做点笔记. 2018-11-13 source不返回问题 使用了角色校验,客户端插入成功之后获取数据没有source,和查询参数无关. 检查mapping, ...

  2. nodejs操作redis总结

    本文总结常见的使用node操作redis服务,redis的key是唯一的,如果一个key所对应的存储类型是string,则不能再次覆盖式设置key为hash; 1. 启动redis 这里我们使用doc ...

  3. asp.net core系列 51 Identity 授权(下)

    1.6 基于资源的授权 前面二篇中,熟悉了五种授权方式(对于上篇讲的策略授权,还有IAuthorizationPolicyProvider的自定义授权策略提供程序没有讲,后面再补充).本篇讲的授权方式 ...

  4. windows,分割路径.得出目录

    #include <windows.h> #include <vector> #include <stdio.h> #include <string> ...

  5. WAF开放规则定义权：专家策略+用户自定义策略=Web安全

    在第一期“漫说安全”栏目中,我们用四格漫画的形式介绍了基于深度学习的阿里云WAF到底智能在哪里,能帮客户解决什么问题. 在今天的这期栏目里,我们依然通过漫画这种通俗易懂的方式,与大家分享阿里云WAF的 ...

  6. 微信小游戏爆款秘笈 数据库MongoDB攻略篇

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB 发表于云+社区专栏 随着微信小游戏的爆发,越来越多开发者关注到MongoDB与小游戏业务的契合度. ...

  7. C# .NET Web API 如何自訂 ModelBinder

    各位好!這次要來替大家介紹的是如何在 .NET  Web API 中自訂一個 ModelBinder 透過自定義的 ModelBinder 我們可以很簡單的將 QueryString 傳過來的參數綁定 ...

  8. iOS----------时间戳与NSDate

    1:时间戳转NSDate NSString *timeStamp =@"1545965436"; NSDate *date = [NSDate dateWithTimeInterv ...

  9. Flutter的初体验--初次配置的问题

    首先参照官方文档进行搭建Mac下的环境 ,然后就会遇到以下问题:   1.在下载了Flutter 之后,执行Flutter doctor之后,报错: Could not resolve URL &qu ...

  10. 编程心法 之 敏捷开发（新架构）Agile Team Organization Squads, Chapters, Tribes and Guilds

    Agile Team 参考 一般情况下,一个小组有以下功能分布: Squads 每个主要的功能的开发属于一个Squad,比如说QQ这个应用,可以分为QQ空间小组.QQ会员小组等等, 每一个Squad有 ...