6.2 选择器
选择器是CSS3中一个重要的部分,通过使用CSS3的选择器,可以提高开发人员的工作效率。在本节中,我们将为读者介绍属性选择器和伪类选择器的基本用法。
6.2.1 属性选择器
在CSS3中,我们可以使用HTML元素的属性名称选择性地定义CSS样式。其实,属性选择器早在CSS2中就被引入了,其主要作用就是为带有指定属性的HTML 元素设置样式。例如,通过指定div元素的id属性,设定相关样式。
属性选择器一共分为4种匹配模式选择器:
完全匹配属性选择器
包含匹配选择器
首字符匹配选择器
尾字符匹配选择器
1.完全匹配属性选择器
其含义就是完全匹配字符串。当div元素的id属性值为test时,利用完全匹配选择器选择任何id值为test的元素都使用该样式。如下代码通过指定id值将属性设定为红色字体:
- <div id="article">测试完全匹配属性选择器</div>
-
<style type="text/css">
-
[id=article]{
- color:red;
- }
-
</style>
2.包含匹配选择器
包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串,元素就使用该样式。
其语法是:[attribute*=value]。其中attribute指的是属性名,value指的是属性值,包含匹配采用"*="符号。
例如下面三个div元素都符合匹配选择器的选择,并将div元素内的字体设置为红色字体:
- <div id="article">测试完全匹配属性选择器</div>
-
<div id="subarticle">测试完全匹配属性选择器</div>
-
<div id="article1">测试完全匹配属性选择器</div>
-
<style type="text/css">
- [id*=article]{
- color:red;
- }
-
</style>
3.首字符匹配选择器
首字符匹配就是匹配属性值开头字符,只要开头字符符合匹配,则元素使用该样式。
其语法是:[attribute^=value]。其中attribute指的是属性名,value指的是属性值,首字符匹配采用"^="符号。
例如下面三个div元素使用首字符匹配选择器后,只有id为article和article1的元素才被设置为红色字体。
- <div id="article">测试完全匹配属性选择器</div>
-
<div id="subarticle">测试完全匹配属性选择器</div>
-
<div id="article1">测试完全匹配属性选择器</div>
-
<style type="text/css">
- [id^=article]{
- color:red;
- }
-
</style>
4.尾字符匹配选择器
尾字符匹配跟首字符匹配原理一样。尾字符只匹配结尾的字符串,只要结尾字符串符合匹配,则元素使用该样式。
其语法是:[attribute$=value]。其中attribute指的是属性名,value指的是属性值,尾字符匹配采用"$="符号。
例如下面三个div元素使用尾字符匹配选择器时,只有id为subarticle的元素才被设置为红色字体。
- <div id="article">测试完全匹配属性选择器</div>
-
<div id="subarticle">测试完全匹配属性选择器</div>
-
<div id="article1">测试完全匹配属性选择器</div>
-
<style type="text/css">
- [id$=article]{
- color:red;
- }
-
</style>
分享到:
相关推荐
CSS属性选择器详解.pdf
详解CSS选择器标签HTML 选择器 类别CLASS 选择器
1. 通用选择器 2. 标签选择器 3. ID 选择器 4. 类选择器 5. 后代选择器 6. 子选择器 8. 通用兄弟选择器 9. 分组选择器 10. 属性选择器 基础选择器总结
然后两个选择器相对应的CSS代码如下: p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色: 尽管上面两个demo...
CSS选择器的重点内容详解
伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active` 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是...
一 通用选择器1 *{}通配选择符(CSS2):适合所有...CSS3新增的通用选择器:同级元素通用选择器:1 通用选择器E~F{}:匹配的是E元素之后的同级F元素匹配E后边所有的F,EF同级。只要F在E的后边,E只是作为一个参考。E~
CSS3的诸多革命性改进中,对属性选择器的增强绝对是亮点之一,这里我们就来详解CSS3中属性选择器新增加的特性,需要的朋友可以参考下
之前学习了css的一些基础选择器,然而今天要介绍css的复杂选择器,复杂选择器一共有三种 1.父子(派生)选择器 <em>234 <em>123 此时要使234有颜色,需要用到父子选择器,虽说用之前的标签选择器可以让它有...
CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下
下面小编就为大家带来一篇对CSS3选择器的研究(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
CSS选择符详解,内容包括元素选择符、类选择符、ID选择符、属性选择符及文档结构选择。。。。。。 CSS选择符 一、 普通选择符 1、 元素选择符:h2 {font: large/150% sans-serif;} 2、 类选择符:p.warning.help {...
第6章 级联样式单与CSS选择器 150 6.1 样式单概述 151 6.2 CSS样式单的基本使用 152 6.3 CSS选择器 158 6.4 伪元素选择器 167 6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样式 195 6.7 本章小结 ...
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
在css中类选择器就是在类名前面加一个点号了,如果是多类不是打多个点号而以.important.urgent这种形式了,下面我来给大家介绍一下CSS 类选择器与多类选择器的用法
本文主要对CSS选择器进行详细介绍,对初学CSS样式的朋友具有很好的参考价值。下面跟着小编一起来看下吧
作为一个Web开发者,掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题,为了广大web爱好者可以更好的解决问题,这里就CSS选择器的优先级问题做了一些总结
可是,我们经常看到带有元素名称的选择器,例如,在微软的项目模板中就有大量的带有元素名称的选择器,如果没有用的话,为什么要这样写呢?哈哈哈,这么写是有原因的,下面就带大家一起看一下! CSS Code复制内容到...