`

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
分享到：
| document.ready()和window.onload()
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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规则，可以实现自定义字体的嵌入；同时，还支持文本阴影...

    CSS 3 Intellisense Schema 完整安裝包

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

    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)...

    网页设计与制作（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引入了新的布局模型，打破了传统的盒模型限制： - **...

Magicbox
Global site tag (gtag.js) - Google Analytics