一、匹配部分字符串

在CSS2中,可以使用[ href='info.htm' ] 这样的属性选择器来匹配href属性中的字符,但是无法只匹配部分字符串。而CSS3给出了三个新的运算符:^ , $ 和 * 来解决这类问题。只需将其中一个运算符直接放在等于符号"="的前面,就可以匹配开始,结尾或任意部分的字符。

1. ^ 运算符:匹配开头的字符串

a[ href^='http://website' ]

2. $运算符:匹配结尾的字符串

a[ href$='.png' ]

3. *运算符:匹配任意位置的字符串

a[ href*='google' ]

支持CSS3的高级CSS的更多相关文章

  1. 高性能封装检测浏览器支持css3属性函数

    css3出来已经很久了,现在来谈判断浏览器是否支持某个css3的属性虽说有点过时了,但是还是可以谈谈的,然后,此篇主要谈的不是判断是否支持,而是怎么封装更好,为什么这么封装,欢迎吐槽. 入题,判断浏览 ...

  2. IE10开始支持CSS3 Transitions, Transforms 和 Animations

    这是一个好消息,微软公开说明IE10预览版已经支持CSS3属性 Transitions, Transforms 和 Animations,你可以直接写transitions,而不是加个恶心的前缀-ms ...

  3. IE6-8支持css3属性

    方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shi ...

  4. 让IE6IE7IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  5. css3 calc():css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  6. document.documentElement.style判断浏览器是否支持Css3属性

    1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAn ...

  7. 让IE支持CSS3 Media Query实现响应式Web设计

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...

  8. IE支持CSS3圆角

    在CSS中使用CSS插件文件即可让IE6/IE7/IE8浏览器. 具体CSS代码: .yuan { border: 2px solid #C0C0C0; -moz-border-radius: 10p ...

  9. css3部分属性兼容性别扭写法(因为很多我就叫他别扭了,希望全面早早支持css3吧)

    /*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-bor ...

随机推荐

  1. JS的基本概念和数据类型

    什么是 JavaScript 语言 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ ta ...

  2. CF #623 div.2

    序 话说,总有人认为我是黑别人电脑的(雾??其实,我不黑电脑,我黑手机. T1 此题巨水,比较四个面积就就好了.. /* make by ltao */ #include <iostream&g ...

  3. 获取Servlet原生API

    1.请求 <a href="param/test1">Servlet原生API</a> 2.处理方法 @RequestMapping("/para ...

  4. 转换:使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题

    本人配置成功https://segmentfault.com/a/1190000011072725

  5. 数据结构(集合)学习之Collection和Iterator

    集合 1.集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使 ...

  6. QQ常用表情

    以下表情均为QQ官方表情原图,版权归QQ所有,禁止用于商业用途. ![3nEdY9.png](https://s2.ax1x.com/2020/02/21/3nEdY9.png) ![3nEaFJ.p ...

  7. phpcms v9全站点击量排行代码

    前台: <ul> {pc:content action="sitehits" siteid="1" num="10" order ...

  8. Flex布局如何实现最后一个元素右对齐,或者第一个元素左对齐

    先来看看一个例子 在一个div我们把四个按钮全部放到右边去了,看下效果↓ 这个时候我们想把第一个按钮左对齐,其他保持不变 这时候我们来个第一个按钮样式上加上 :margin-right: auto; ...

  9. 前向传播和反向传播实战(Tensor)

    前面在mnist中使用了三个非线性层来增加模型复杂度,并通过最小化损失函数来更新参数,下面实用最底层的方式即张量进行前向传播(暂不采用层的概念). 主要注意点如下: · 进行梯度运算时,tensorf ...

  10. sublime text3 控制台 Package Control 的安装与使用方法

    下载安装 sublime text3 直接网上搜sublime text3 下载即可,安装很简单 下一步就行,这里主要说明sublime text3 控制台 Package Control 的安装与使 ...