css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解

css中属性选择器我感觉与css2有比较大的区别了，下面我整理了一些关于css3选择器的使用例子，希望对各位会带来帮助。

注释：

一、属性选择器除了IE6不支持外，其他的浏览器都能支持。

二、E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。

CSS3中新增了许多选择器，今天零度给大家说说CSS3的属性选择器。

与CSS2相比，CSS3新增了3种属性选择器：[attr^=value]、[attr$=value]、[attr*=value]；分别来讲解一下。

一、[attr^=value]属性选择器

大家如果接触过正则表达式的话，应该知道^符号的意思，是表示开头，没错，这里也是表示开头的意思，意思就是选择属性名attr的开头值为value的元素！

举个例子：

代码如下

复制代码

[class^=tea]{width:200px; height:200px;} /*此选择器表示选择class开头字符串为tea的元素*/

我的class是teacher

我的class是tea

我的class是teach

我的class是aaa

这样会选择前三个元素，而不会选择最后一个元素。

二、[attr$=value]属性选择器

相比较前一个，这一个就很容易理解了，$符号就代表结尾，这里意思是选择属性名attr的结尾值为value的元素！

例子：

代码如下

复制代码

[class$=er]{width:200px; height:200px;} /*此选择器表示选择class结尾字符串为er的元素*/

我的class是teacher

我的class是tea

我的class是teach

我的class是aaa

这样就会选择class为teacher的div。

三、[attr*=value]属性选择器

最后这一个和前面两个的区别是符号换成了*，这个代表通配符的意思，意思是选择属性名attr的值包含value的元素！

代码如下

复制代码

[class$=ch]{width:200px; height:200px;} /*此选择器表示选择class包含字符串为ch的元素*/

我的class是teacher

我的class是tea

我的class是teach

我的class是aaa

这样就会选择class为teacher和class为teach的两个div。

这三种属性选择器大家如果用的熟练的话会对提高工作效率有很大帮助。

css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解相关推荐

编程实现linux中的who命令功能,Linux who命令简介及使用方法详解
玩蛇网推荐图文教程:python 列表本文是关于Linux who命令简介及使用方法详解一文.如果你是一名系统管理员,可能需要需要在一个特定的时间点都有谁活跃在系统上.以便必须严密监视我们的服务器. ...
linux系统中tar命令的使用,linux 系统的tar命令使用方法详解
-j :是否同时具有 bzip2 的属性?亦即是否需要用 bzip2 压缩或解压?一般格式为xx.tar.bz2 -v :压缩的过程中显示文件!这个常用 -f :使用档名,请留意,在 f 之后要立即接 ...
python中的pylab_Python使用pylab库实现画线功能的方法详解
本文实例讲述了Python使用pylab库实现画线功能的方法.分享给大家供大家参考,具体如下: pylab 提供了比较强大的画图功能,但是函数和参数都比较多,很容易搞混.我们平常使用最多的应该是画线了 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
webconfig的解决方案怎么添加_解决在Web.config或App.config中添加自定义配置的方法详解...
文档从网络中收集,已重新整理排版 .word 版本可编辑 . 欢迎下载支持 . 1 word 版本可编辑 . 欢迎下载支持 . 解决在 Web.config 或 App.config 中添加自定义配 ...
python反向缩进_在Pycharm中对代码进行注释和缩进的方法详解
在Pycharm中对代码进行注释和缩进的方法详解一.注释 1. #单行注释 2. """ 多行注释 """ 3. pycharm多行注释快 ...
JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
Python的Django框架中forms表单类的使用方法详解2
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能自动生成HTML ...
python中backward_pytorch的梯度计算以及backward方法详解
基础知识 tensors: tensor在pytorch里面是一个n维数组.我们可以通过指定参数reuqires_grad=True来建立一个反向传播图,从而能够计算梯度.在pytorch中一般叫做d ...
php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...

css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解

css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解相关推荐

最新文章

热门文章