css3中的属性选择器

1.[att*=val]属性选择器
该选择器的含义是如果属性att中包含了val值,则该元素可以使用这个样式。
如:[id*=content]中,这个样式在页面元素中id包含content字符串的可以使用。

2.[att^=val]属性选择器
该选择器的含义是如果属性att中的值以val开始,则可以使用这个样式。
如:[id^=con]选择器,这个样式在页面元素中id是以con字符串开头的可以使用。

3.[att$=val]属性选择器
该选器的含义是如果属性att中的值以val结束,则可以使用这个样式。
如:[id$=lt]样式,这个样式在页面元素中id是以lt字符串结束的可以使用。

时间: 2024-08-03 15:08:25

css3中的属性选择器的相关文章

css3中伪类选择器和伪元素介绍

利用html5和css3开发出炫酷的网页,那么对于一个web前端开发者,css3也是必须要掌握的,下面和大家讨论一下css3中伪类选择器和伪元素. 类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如:p.left{text-align: left}p.rigth{text-align: right} 伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 最常见的伪类选择器 a:link{ color:

css3中font-face属性的用法详解

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围  {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

css3新增的属性选择器

使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att^=val]和[att$=val] id="top" att就是id,类似的如class,href~~等属性. [att*=val]属性选择器 如果元素att属性的属性值中包含val指定的字符,那么该元素使用这个样式.[att^=val]属性选择器 如果att属性的属性值的开头字符为用va

CSS3中动画属性transform、transition和animation

Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform

初识 css3中counter属性

最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器兼容性可以看[这里] 2.counter的作用 实际上是代替了javascript作为一种计数器工具,在css中使用.元素出现了几次就默认增加多少对应值.增加值大小还可以由自己设置. 可以想象当我们设置好一次规矩之后,以后无论添加多少标签,计数工具自动帮我们算计数,不必手动输入那些值.而且这些不必借

css3中animation属性animation-timing-function知识点以及其属性值steps()

在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n,n,n,n),你平时用到的linear.ease.ease-out等都是基于这个属性值的,那么我们接下来就看看这个东西到底是什么含义. 这个时间函数是通过一个坐标反映出来的: 这个就是timing-function的工作图,总共有4个点来描述整个曲线的运动形状,其中P0和P3是开始和截止的位置,关

css3中placeholder属性修改文字颜色。

这个问题困扰我好久了.终于在网上找到合适的写法..... 直接扒过来的,嘻嘻... .text::-webkit-input-placeholder { color: red; } .text:-moz-placeholder {/* Firefox 18- */ color: red; } .text::-moz-placeholder{/* Firefox 19+ */ color: red; } .text:-ms-input-placeholder { color: red; } .te

css3中clip属性

clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. 用这个属性需要注意以下三点: 1.clip属性只能用于绝对定位元素,position:absolute或fixed. 2.clip属性有三种取值:auto  默认的  inherit继承父级的 一个定义好的形状,但现在只能是方形的 rect() clip: { shape | auto | inherit