CSS选择器及其用法
2017-07-25 13:18
169 查看
CSS的七种选择器
元素选择器类选择器
ID选择器
属性选择器
后代选择器
子代选择器
相邻兄弟选择器
一、元素选择器
元素选择器是CSS最常见的选择器,也就是说,文档的元素就是最基本的选择器。在 W3C 标准中,元素选择器又称为类型选择器(typeselector)。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身,例如:
h1{ color:red; }
元素选择器可通过直接修改代码中的选择器,将某样式从一个元素切换到另一个元素中,例如,上面的例子,将h1选择器修改为p选择器,就可以直接将h1中选择器样式改为段落文本p中:
p{ color:red; }
元素选择器是各类选择器中最简单的一种了,其实也没什么好说的,用多了就上手了。
二、类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
提示:只有适当地标记文档后,才能使用这些选择器,以便类选择器正常工作,所以使用这两种选择器通常需要先做一些构想和计划。
为了将类选择器的样式与元素关联,必须将 class指定为一个适当的值。即可通过设置class属性的值选择某一个类选择器,进而修改元素的样式。如下面的例子中,important就是类选择器的一个标记
<h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph id very important. </p>
其语法为:
*.important{color:red} /*加上*表示为通用匹配选择器,加或不加效果差不多,可根据自己的兴趣自己选择*/ .important {color:red;}
注1:结合元素选择器(即类选择器+元素选择器)
类选择器可以结合元素选择器来使用。(其样式作用与元素选择器中的元素,并且class属性为类选择器的元素),如:
p.important{color:red;} h1.important{color:blue;} /*选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,这个规则的选择器与之不匹配,因此 h1 元素不会变成红色文本。*/
注2:CSS多类选择器
在 HTML 中,一个class值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:
<p class="important warning"> /*important 和warning的顺序无关要紧,写成 warning important 也可以*/ This paragraph is a very important warning. </p>
我们假设 class 为 important的所有元素都是粗体,而 class为 warning的所有元素为斜体,class中同时包含 important和
warning 的所有元素还有一个银色的背景 。就可以写作:
.important{font-weight:bold;} .warning{font-style:italic;} .important.warning{background:silver;}
通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。其语法可以理解为:
.类选择器1.类选择器2{ ;声明 }
重要事项:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。
三、ID选择器
ID选择器允许以一种独立于文档元素的方式来指定样式。
语法
1、ID 选择器前面有一个
# 号 - 也称为棋盘号或井号。
请看下面的规则:
*#intro {font-weight:bold;} #intro {font-weight:bold;}
2、ID 选择器引用 id 属性中的值,即需要通过设置id属性的值来选中ID选择器。而元素选择器和类选择器都是通过设置class属性的值来设置样式。
以下是一个实际 ID 选择器的例子:
<p id="intro">This is a paragraph of introduction.</p>
注:类选择器与 ID选择器的区别
在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。
1:只能在文档中使用一次
与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。2:不能使用 ID 词列表
不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。3:ID 能包含更多含义
类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。如在这种情况下,可以编写如下规则:
/*这个规则会与以下各个元素匹配(这些元素不能在同一个文档中同时出现,因为它们都有相同的 ID值)*/ #mostImportant {color:red; background:yellow;} <h1 id="mostImportant">This is important!</h1> <em id="mostImportant">This is important!</em> <ul id="mostImportant">This is important!</ul>
请注意,类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。
四、属性选择器
可以根据元素的属性及属性值来选择元素。CSS 2引入了属性选择器。
1、简单属性选择
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。还可以根据多个属性进行选择,只需将属性选择器链接在一起即可,必须为属性1+属性2即同时拥有属性1和2的才可以应用样式。*[title] {color:red;}/* 把包含标题(title)的所有元素变为红色*/ a[href] {color:red;}/* 只对有 href 属性的锚(a 元素)应用样式*/ a[href][title] {color:red;}/* 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色*/ 可以采用一些创造性的方法使用这个特性。 img[alt] {border: 5px solid red;}/* 对所有带有 alt 属性的图像应用样式,提示:上面这个特例更适合用来诊断而不是设计,即用来确定图像是否确实有效。*/
2、根据具体属性值选择。除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。
例1,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
例2,与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} /*这会把以下标记中的同时具备超链接和title属性的第一个文本变为红色,但是第二个或第三个链接不受影响:*/ <a href="http://www.w3school.com.cn/" title="W3School">W3School</a> <a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a> <a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>
【注意】属性与属性值必须完全匹配
请注意,这种格式要求必须与属性值完全匹配。
如果属性值包含用空格分隔的值列表,匹配就可能出问题。
请考虑一下的标记片段:
<p class="important warning">This paragraph is a very important warning.</p> /*如果写成 p[class="important"],那么这个规则不能匹配示例标记*/
要根据具体属性值来选择该元素,必须这样写:
p[class="important warning"] {color: red;}
3、根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。即只要定义的属性中包含后面class定义的属性就可以应用这个样式。假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:
p[class~="important"] {color: red;}
如果忽略了波浪号,则说明需要完成完全值匹配。
注:部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。也就是说,p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。那么,为什么还要有 "~=" 属性选择器呢?因为它能用于任何属性,而不只是 class。例如,可以有一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片:
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
五、后代选择器
后代选择器(descendant selector)又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
1、根据上下文选择元素
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:
h1 em {color:red;} <h1>This is a <em>important</em> heading</h1>/*important会变红色*/ <p>This is a <em>important</em> paragraph.</p>/*不会变成红色*/
当然,您也可以在 h1 中找到的每个 em 元素上放一个 class 属性,但是显然,后代选择器的效率更高。
2、语法解释
元素1 元素2 {声明;} /*元素2只有跟随在元素1后面才会应用该样式,不论元素2镶嵌层次有多深*/在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。
因此,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。
3、具体应用
后代选择器的功能极其强大。有了它,可以使 HTML 中不可能实现的任务成为可能。假设有一个文档,其中有一个边栏,还有一个主区。边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表。不能把所有链接都设置为蓝色,因为这样一来边栏中的蓝色链接都无法看到。
解决方法是使用后代选择器。在这种情况下,可以为包含边栏的 div 指定值为 sidebar 的 class 属性,并把主区的 class 属性值设置为 maincontent。然后编写以下样式:
div.sidebar {background:blue;} div.maincontent {background:white;} div.sidebar a:link {color:white;} div.maincontent a:link {color:blue;}
有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。
例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
因此,ul em 将会选择以下标记中的所有 em 元素:
<ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul>
六、子代选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
1、选择子元素
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。2、语法解释
子选择器使用大于号(子结合符)。子结合符两边可以有空白符,这是可选的,有或者没有都没关系。例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
/*如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有strong元素*/ h1 > strong {color:red;} <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>/*两个strong元素变为红色*/ <h1>This is <em>really <strong>very</strong></em> important.</h1>/*不变红色,不受影响*/
3、结合后代选择器和子选择器
请看下面这个选择器:
table.company td > p /*会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。*/
七、css相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}/* 选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素*/
语法解释
相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
请看下面这个文档树片段:
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。
请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:
li + li {font-weight:bold;}上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
结合其他选择器
相邻兄弟结合符还可以结合其他结合符:html > body table + ul {margin-top:20px;} /* 选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素*/
相关文章推荐
- 简述amixer及其用法
- 稀疏矩阵及其用法
- strcmp 函数的用法 及其实现
- qsort及其用法
- ionic2/3退出到登录页--以getRootNav、getRootNavs、getActiveNav、getActiveNavs、getRootNavById实现及其用法
- ASP程序特点及其标记的用法
- android LayoutInflater.inflate()的参数及其用法
- C++ 第六课:C/C++关键字及其用法
- Python关键字及其用法
- 常见ant命令及其用法
- explicit关键字的作用及其用法
- Vi编辑器用法及其环境的高级配置
- SSE2介绍及其简单用法举例
- mui的下拉刷新的用法及其解决双滚动的办法
- shp2sdo和oracle的关系及其用法
- Linux指令总结及其常见用法说明(8.27更新)
- CSS选择器的新用法
- 点石互动--枫林之:Robots Meta标签及其用法
- python运算符及其用法
- android LayoutInflater.inflate()的参数及其用法