文章地址 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. JS 图片放大镜

    今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...

  2. Eclipse Debug调试遇到的问题

    在使用Debug模式前,一定要先打好断点.快捷调试方法:   在使用过程中,可以只保留Console,Variables,Debug窗口,把其他无用的窗口最小化掉,或者删掉即可.如果要恢复删掉的试图, ...

  3. 零基础如何学Python爬虫技术？

    在作者学习的众多编程技能中,爬虫技能无疑是最让作者着迷的.与自己闭关造轮子不同,爬虫的感觉是与别人博弈,一个在不停的构建 反爬虫 规则,一个在不停的破译规则. 如何入门爬虫?零基础如何学爬虫技术?那前 ...

  4. MySQL之父造访腾讯云 为腾讯云数据库开源点赞

    近日,技术大牛 MariaDB 公司创始人兼CTO Michael Widenius(又名Monty).MariaDB 基金会主席 Kaj 来到中国,针对MariaDB与腾讯云的技术合作进行回访.去年 ...

  5. Linux - 修改Cent OS系统的的hostname、配置DNS映射

    目录 1 修改方式 2 扩展: 配置DNS映射 本篇文章中, 示例设计到的操作系统是CentOS 6.5. 1 修改方式 ① 命令hostname onepiece -- 运行后设置立即生效, 但要在 ...

  6. 一文带你认识Spring事务

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y Spring事务管理我相信大家都用得很多,但可能仅仅 ...

  7. 2.JAVA-基础语法以及String的介绍

    1.goto和const 目前java中,和C/C++有点区别,就是暂未用到goto const关键字.示例如下: public class Hello{ public static void mai ...

  8. 【学习笔记Part 2● MySQL】

    数据库 为什么要用数据库 如何去存放数据?生活中有各种各样的数据.比如说人的姓名.年龄.成绩等.平时我们记录这些信息都是记在大脑中.人的记忆力有限,不可能什么都记住.所以后来人们把数据记录在石头上–& ...

  9. 小程序 wepy框架 + iview-weapp的用法

    最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看 ...

  10. javascript 字符串转换数字的方法大总结

    方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有 ...