(004)CSS选择符(selector)

一、引言

  选择符,顾名思义,用于从XHTML文档中选择元素。选择符有很多种,各有其不同的具体性,可以确定一大批元素或仅仅少数几个元素。具体性是度量选择符的作用范围的手段。所谓作用范围,换句话说,指的是选择符选择了多少元素。在CSS的设计原则中,比较具体的选择符将凌驾于较不具体的选择符之上并取而代之。具体性是CSS中较为含糊和难以掌握的概念之一,但也是这种语言中最强大的特性之一。

二、全体选择符

  全体选择符是一个星号(*)。它充当一个“通配符(wild card)”,选择文档中的每一个元素。

三、元素选择符

  元素选择符选择一种元素的所有实例,其具体性来自于标签名。这种选择符比全体选择符更具体,但还不是很具体,因为其目标是一种元素的每一个实例,无论它们到底有多少个。例如,下这一规则将每一个em元素的前景色都指定为红色,哪怕文档中有数以千计的这种元素。元素选择符又称为类型选择符。

em {
    color: red;
}

四、类选择符

  类选择符以class属性中有指定类名的任何元素为目标。因为class属性几乎可以用于任何XHTML中的任何元素,而且可以有任意数目的元素属于同一个类,所以这种选择符并不是特别具体,但还是比元素选择符更具体。在css中,类选择符以一个圆点(.)开头。例如,下列规则将影响所有属于“.info”类的元素的样式,不管它们是什么元素。

.info {
    color: red
}

五、ID选择符

  ID选择符将仅仅选择具有指定标识符的那个元素。实际上,id属性可用于几乎所有元素,但一个id属性值在一个文档中只能使用一次。ID选择符在一个页面中只以一个元素为目标,这使它比可能以许多元素为目标的类选择符具体得多。ID选择符以一个“#”符号开头。如下例:

#info {
    color: red;
}

六、伪类选择符

  伪类选择符类似于类选择符(其具体性也与类选择符相同),但它选择的是处于特定状态的元素。这种选择符以冒号(:)开头。可用的伪类只有有限几个:

:link { color: blue; }
:visited { color: purple; }
:active { color: red; }
:hover { color: green; }
:focus { color: orange; }

  :link伪类选择所有超链接元素。:visited伪类选择那些所指向的目标已经被访问过的链接(已访问过的链接被记录于web浏览器内在的访问历史记录中)。:active伪类选择处于活动状态的链接。所谓处于活动状态,指的是在被激活期间(当用鼠标点击链接时,或当焦点位于链接上并按下回车键时)。:hover伪类选择用户的定点设备“悬浮”于其上方的元素。虽然任何元素都能处于有定点设备悬浮其上的状态,但是这一伪类最常用于链接(不过,某些老式浏览器只支持把这一伪类用于链接而不是其他元素)。:focus伪类选择拥有焦点的元素。某些浏览器不支持:focus,特别是window下的IE 6。但是,IE实际上(不正确地)将:active伪类当做:focus伪类对待,不过这仅针对链接,不适用于其他元素。

七、后代选择符

  后代选择符是CSS的武器库中最有用和最强大的选择符之一。它可以组装自两个或多个用空格分隔的基本类型的选择符(全体、元素、类、伪类和ID选择符),用于选择文档树中匹配该位置的元素。这种选择符也被称为上下文选择符,因为它们是基于元素在文档中的上下文来选择它们。例如:

#introduction em { color: yellow; }

  这一规则将把id值为“introduction”的元素中包含的任何em元素的颜色设置为黄色。基于xhtml文档的结构,后代选择符可以很精确地只选择到你想要选择的元素。可以看看下面这个更复杂的例子:

#introduction .info p *    {
    color: pink;
}

  从上面这个例子可以看出,后代选择符的作用范围可能会非常窄,仅仅针对满足选择符的选择标准的那几个元素。

时间: 2024-08-06 22:37:03

(004)CSS选择符(selector)的相关文章

30个你必须记住的CSS选择符

30个你必须记住的CSS选择符 整理 本文摘自:http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/ 04 January 2014 号外号外:专注于移动端的fullPage.js来啦!!!快点我查看 所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1

转发-css 选择符

此文章仅为转发,非原创,原文 css 选择符   请支持原创 css参考手册:css.doyoe.com 在css3中,不同的浏览器可能需要不同的前缀,它表示该css属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的 -webkit 代表chrome.safari私有属性 -moz 代表firefox浏览器私有属性 -ms 代表IE浏览器私有属性 -o 代表opera浏览器私有属性 css语法结构 css语法由

[JavaScript忍者系列] — CSS选择符引擎入门

http://www.cnblogs.com/newyorker/archive/2013/02/14/2891298.html 本文的目标读者是入门级Web前端开发人员. 本文介绍了CSS选择符表达式引擎的基本原理.CSS选择符引擎几乎是前端开发人员每天在使用的工具.本文将逐一介绍实现该引擎的各种策略.首先,我们介绍基于W3C标准API的方法. W3C标准的Slectors API 能够支持的平台: Safari 3+, Firefox 3.1+, Internet Explorer 8+,

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?

1.CSS选择符有哪些? 类型选择符(body).群组选择符(h1,h2,h3,span).包含选择符(h2 span).ID选择符(#id).Class选择符(.content) 2.哪些属性可以继承? CLASS属性,伪类A标签,列表ul.li.dl.dd.dt可以继承 3.优先级算法如何计算? 优先级就近原则 版权声明:本文为博主原创文章,未经博主允许不得转载.

CSS选择符优先级引起的样式失效

选择符优先级带来的样式失效: 由于CSS选择符优先级可能引起某些样式失效,这个问题初学者可能会碰上,但是往往并不容易发现. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落

CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) 2)      类选择器(.myclassname) 3)      标签选择器(div, h1, p) 4)      相邻选择器(h1 + p) 5)      子选择器(ul > li) 6)      后代选择器(li a) 7)      通配符选择器( * ) 8)      属性选择器

CSS选择符总结(Selectors)

一.通配选择符(Universal Selector): 语法:* 说明:1.*表示通配符,表示所有的            2.格式:*{样式列表}            3.用于整个页面或网站字体.边距.背景等 例子: 1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type&

css那些事儿1 css选择符与管理

结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库 缓存 消息队列的路线如果没有大型项目平台的建设机会是很难能够大纵深的切入,恰恰前端通过编写微信公众号作为一个切入点,希望不会再也找不到工作,再也无法跳巢的尴尬境地. 1 css语法 选择符{属性:value}css的语法非常简单. 2 css常见简写 color:#ffffff ;color:rgb(255,255,255);rg

CSS选择符

一.选择符类型及使用 1.html标记,在CSS中可选择要实现目标的标记, 如:P{属性:值} 2.多个html标记,可在CSS中写相对的标记用逗号隔开. 如:h1,h2,h3,h4,h5{属性:值} 3.选择符在已经使用过的标记,再重复添加需在已经添加的样式下一行方可实现. 如要添加在前面,可用 [!important][IE浏览器不支持]. 如: h2{color:green !important;} h2,h3,h4,h5{color:grey; font-size:36px;} 二.id