`

css3新特性-新增3个属性选择器

    博客分类:
  • CSS3
 
阅读更多
CSS3在CSS2的基础上对属性选择器进行了扩展,使得属性选择器有了通配符的概念。




<style type="text/css">
a[class^="column"]{
    background:red;
    }
a[href$="doc"]{
    background:green;
}
a[title*="box"]{
    background:blue;
}
</style>
</head> 
<body>
<a href="##" class="columnNews">背景红色</a>
<a href="##" class="columnVideo">背景红色</a>
<a href="##" class="columnAboutUs">背景红色</a><br/>
<a href="1.doc">背景绿色</a>
<a href="2.doc">背景绿色</a><br/>
<a href="##" title="this is a box">背景蓝色</a>
<a href="##" title="box1">背景蓝色</a>
<a href="##" title="two boxs">背景蓝色</a>
</body>
  • 大小: 63.9 KB
分享到:
评论

相关推荐

    CSS3教程和css3新特性专题

    CSS3的核心概念包括选择器、声明和属性。选择器用于定位网页中的元素,如`class`、`id`或元素类型;声明则由属性和值组成,用来定义元素的样式,如`color: red;`;属性是样式规则的一部分,如颜色、字体、布局等。 ...

    HTML5&CSS3网页制作:属性选择器.pptx

    CSS3中新增了三种属性选择器,它们分别是: 1. **E[att^=value]**:前缀匹配选择器。这种选择器会选择那些名称为E的元素,且这些元素的att属性值以value开头。例如,如果我们想选择所有href属性值以"http://"开头的...

    CSS3选择器总结CSS3选择器总结

    3. 类选择器、伪类和属性选择器(如.class, :hover, [type="text"]) 4. id选择器(如#id) 5. 内联样式(在HTML元素中直接定义的样式) 当优先级相同时,CSS规则中后来定义的规则会覆盖先前定义的规则。此外,CSS...

    css3-cheat-sheet_IDEAL_cheatsheet_css_

    3. **属性选择器**:例如`[attr=value]`,可以匹配具有特定属性和值的元素。 4. **伪元素**:`:before`和`:after`可以插入内容到元素的前面或后面,而`:first-letter`和`:first-line`则对首字母和首行进行样式设置...

    html5-css3-side-silder-menu.zip

    1. **选择器增强**:例如,类选择器、伪类选择器和属性选择器的扩展,使得更加精准地定位元素变得可能。 2. **多列布局**:column-count, column-gap, column-width等属性使得创建多列布局变得容易。 3. **过渡和...

    day01-H5C3-新增音视频 表单标签及选择器.pdf

    新增的选择器主要有属性选择器、伪类选择器和微元素选择器。属性选择器可以根据元素的属性或属性值来选择元素;伪类选择器提供了基于元素状态或位置的选择方式,如:hover和:first-child;微元素选择器则能够选择页面...

    HTML5+CSS3移动商城-首页

    1. 选择器增强:CSS3新增了伪类选择器(如:hover、:active、:visited)、属性选择器(如[E^="value"]、[E|=value])和类选择器(如:nth-child()、nth-of-type()),增强了样式定位的精确性。 2. 布局方式:CSS3引入...

    你值得拥有的css3权威3

    1. **选择器**:CSS3增加了更多的选择器,如属性选择器、伪类选择器等,这为开发者提供了更强大的选择元素的能力。 2. **文字和字体**:CSS3支持@font-face规则,可以实现自定义字体的嵌入;同时,还支持文本阴影...

    html5-css3

    例如,新的选择器允许开发者针对特定的元素应用样式,而新增的边框、背景、文字效果等属性则让页面设计变得更加丰富多彩。 ### 学习资源推荐 1. **W3School官网**([http://www.w3school.com.cn/html5/index.asp]...

    HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_

    CSS3(层叠样式表)是CSS的第三个主要版本,它带来了许多新的选择器、布局模式和动画效果。CSS3的选择器如`:nth-child()`、`:not()`、`:checked`等,使得选取特定元素变得更加精准。多列布局(column-count、column-...

    CSS,CSS3基础

    1. **选择器增强**:CSS3增加了更多的选择器类型,如伪类选择器(:hover、:active、:focus)、属性选择器([attr=value])、兄弟选择器(~和+)以及更强大的子元素选择器(:nth-child()和:nth-of-type()),使选择元素更加...

    【css新增特性思维导图梳理】

    【CSS新增特性思维导图梳理】是对CSS3中新增特性的整理,主要关注浏览器兼容性和CSS Hack技巧。CSS3引入了许多新的功能,提高了网页设计的灵活性和表现力。以下是其中的一些关键点: 1. **私有前缀**: 为了解决...

    CSS3视频教程 1 CSS3介绍

    1. **选择器增强**:CSS3引入了更强大的选择器,如类选择器(.class)、ID选择器(#id)、属性选择器([attribute])和伪类选择器(如:hover、:active、:focus)。此外,还有基于元素位置的选择器,如:nth-child(n)...

    CSS 3 Intellisense Schema 完整安裝包

    1. **选择器增强**:CSS3增加了更多的选择器类型,如伪类选择器(`:hover`, `:active`, `:focus`),子元素选择器(`&gt;`),同胞元素选择器(`+`, `~`),以及属性选择器(`[attr=value]`)等,使样式规则更精确地...

    网页设计与制作(HTML+CSS+JS)-3期(KC003) KC003050000004 单元设计_任务4 构建网站层叠样式表

    此外,还需要掌握CSS3的新特性,如属性选择器、关系选择器(如子代选择器、相邻兄弟选择器和普通兄弟选择器)以及结构伪类选择器。同时,课程也强调了CSS的继承性和层叠性,这是控制样式优先级和保持样式一致性的...

    常用web开发手册css2/css3/jquery-api/javascript api/dom/html/j2ee-api/dhtml

    CSS3进一步扩展了这些功能,引入了更多选择器、边框和背景的高级效果、过渡和动画、多列布局、媒体查询等,使网页适应不同设备,实现响应式设计。 **jQuery API** jQuery是一个流行的JavaScript库,简化了DOM操作、...

    CSS3最全手册

    - **属性选择器**:`[attr=value]`,根据元素属性值进行选择。 - **伪元素选择器**:`:before`、`:after`,在元素内容前后插入内容。 ### 2. 布局模式 CSS3引入了新的布局模型,打破了传统的盒模型限制: - **...

Global site tag (gtag.js) - Google Analytics