IT技术浅谈
联系我们
IT技术浅谈

CSS学习之二 选择器

发布人:admin 发布时间:2018-09-11
1、亚美娱乐元素选择器:往往是HTML元素,也可能是XML定义的元素,举例: 复制代码代码如下: h1 {color:red;}/* 元素选择器 */ h2 {font:normal 12px/16px "Courier New",Arial;}/* css关键字由空格隔开,只有font属性中字体大小和行高可用“/”分割 */ h3,p {background-color:#EEE;}/* 选择器的分组 */ 2、通配选择器,它为页面中所有元素添加样式,就像是一个通配符,举例: 复制代码代码如下: * {color:blue;}/* 通配选择器,等价于列出了文档中所有元素的color属性均为blue,它的优先级很低 */ *.p {font-weight:bold;}/* 类选择器,运用到所有类为p的元素上,可以忽略(*)号,等价于.p */ 3、类选择器:多的不废话,说一下多类选择器吧,举例: 有如下HTML代码: 复制代码代码如下: <p >This is a paragraph</p><!-- 类选择符 --> <div >This is a div element</div><!-- 类选择符 --> <p >This is a paragraph</p><!-- 多类选择符,一个class可以包含一个词列表,各个词之间用空格隔开 --> <p >Those words's background-color is red too in all browser!</p><!-- 多类选择符,.waring.urgent选择器将不能匹配这里的p --> <p >Those words's background-color is red in browser ie6!</p><!-- 多类选择符,由于help在选择器中最后出现,所以在IE6中背景为红色的 --> <p >Those words's background-color is red in browser ie6!</p><!-- 类选择符,由于help在选择器中最后出现,所以在IE6中背景为红色的 --> <p>This is a paragraph<span > But this is a span element</span></p> CSS风格如下: 复制代码代码如下: p.p {font-style:italic;}/* 类选择器,选择段落且类为p时才显示粗体 */ .waring {font-weight:bold;} .urgent {font-style:italic;} .warning.urgent {background-color:silver;}/* 类选择器,选择同时包含waring和urgent两个类的元素,且出现的顺序可以和定义class时不同 */ p.warning.urgent.help {background-color:red;}/* 类选择器,选择同时包含waring,urgent和help三个类的p元素,但是在IE6中此选择符匹配class属性中包含help的所有p元素 */ 在非IE6下面,CSS里如果有.warning.urgent.help这类的选择器,它只匹配同时包含waring,urgent和help三个类的HTML元素,而HTML中诸如class="urgent warning help"这类的选择器却可以匹配CSS中多种样式;而在IE6下却不同,这一点是很值得注意的。 4、ID选择器:比起类选择器来说,ID选择器不会那么复杂,ID属性不允许有以空格分隔的词列表,比如以下的写法是不对的: 复制代码代码如下: <div id="div1 div2">...</div><!-- 这种写法是不对的 --> 无论CSS怎么写,样式都会无效。可是,ID选择符与类选择符是可以结合使用的,如下: 复制代码代码如下: #div.div {color:red;}/* ID选择器与类选择器的结合,可以这么写的,且先后顺序可以颠倒 */ 匹配即声明ID为div又声明属于div这个类的HTML元素。 还有要补充一点,既然使用了ID选择符,那么就只能对一种元素中的一个元素使用ID,比如下面的写法就不对: 复制代码代码如下: <h1 id="important">important</h1> <em id="important">important</em> <ul id="important">important</ul> 这三种(个)元素具有相同的ID,在同一个文档中不能够同时出现,这也体现出ID的唯一性。 5、属性选择符:目前遗憾的是属性选择器没有被IE6识别,而IE7及以上IE系列支持大多数CSS2.1属性选择器。 简单的属性选择符实例: 复制代码代码如下: a[href] {color:yellow;}/* 简单的属性选择符,匹配所有具有href属性的a元素 */ *[title] {font-weight:bold;}/* 简单的属性选择符,匹配所有具有title属性的元素 */ a[href][title] {color:red;}/* 简单的属性选择符,匹配所有有title属性且有href属性的的a元素 */ 下面是根据具体属性值选择: 复制代码代码如下: a[href="../chemdemo/"] {color:yellow;}/* 根据具体属性值选择,匹配链接为“../chemdemo/”的a标签 */ p[] {font-weight:bold;}/* 根据具体属性值选择,要求属性值必须完全匹配,写成或其他是不对的 */ 上例中,p[class="urgent warning"]严格匹配具有 class="urgent warning"类的p元素,urgent与warning的顺序不颠倒。 下面是根据部分属性值选择:对于class="urgent warning"这个类,CSS可以这样写: 复制代码代码如下: p[class~="warning"] {color:red;}/* 根据部分属性值选择,“~”表示属性中出现一个空格分隔的词来完成选择相应的p元素 */ [class~="urgent"] {color:grey;}/* 根据部分属性值选择,“~”表示属性中出现一个空格分隔的词来完成选择 */ 当然不仅仅只局限于class属性,任何属性都可以使用属性选择符,比如选择器img[title~="Figure"]会匹配title值为含有“空格和Figure”的图像。 还有以下几种子串匹配属性选择器: 复制代码代码如下: [class^="cl"] {}/* 子串匹配属性选择器,“^=”匹配class属性的值以cl开头的元素 */ [class$="dy"] {}/* 子串匹配属性选择器,“$=”匹配class属性的值以dy结尾的元素 */ [class*="ou"] {}/* 子串匹配属性选择器,“*=”匹配class属性的值还有ou的元素 */ 最后一种属性选择器是特定属性选择类型,例子如下: 复制代码代码如下: *[lang|="en"] {}/* 选择lang属性为en或以en-开头的所有元素 */ img[src|="figure"] {}/* 可以用来选择图片名为“figure-”的系列图片 */ 6、根据HTML标签的嵌套关系选择元素: 一种是选择后代元素: 复制代码代码如下: h4 em {}/* 为h4元素的后代em元素添加样式 */ ul ol li em {}/* 后代选择器,不局限于两个选择器 */ 一种是选择子元素: 加入有HTML代码: 复制代码代码如下: <h2>This is <strong>very</strong> important.</h2><!-- strong元素是h2的子元素、后代元素 --> <h2>This is <em>really <strong>very</strong></em> important.</h2><!-- strong元素是h2的后代元素而非子元素 --> 那么下面的CSS将使前面的“very”以粗体显示: 复制代码代码如下: h2 > strong {color:red;}/* 选择作为h2元素的所有子元素中的strong元素 */ 还有一种是选择相邻兄弟元素:当不想选择所有后代元素时,可用选择相邻兄弟元素的办法缩小选取范围: 复制代码代码如下: h2 + p {}/* 选择紧跟在h2后面的p元素(注意是对p添加样式),它们是兄弟元素(必须有相同的父元素)*/ html > body tabke + ul {}/* 多种选择符的结合运用 */ 注:IE6不支持子选择器和相邻选择器。 7、伪类: 只运用于链接得伪类有两个:“:link”和“:visited”,相信了解CSS的人都不陌生,这里不再举例; 动态伪类:在CSS2.1中包括三种:“:focus”、“:hover”和“:active”,在Web页面中常用的方式是与静态伪类结合: 复制代码代码如下: a:link {} a:visited {} a:hover {} a:active {} 伪类顺序很重要,个人的记忆方法为love-hate(爱与恨)。 动态伪类可以运用到任何元素,比如: 复制代码代码如下: input:focus {background:#DDD;}/* 突出显示一个有输入焦点的表单元素 */ *:hover {background:gray;}/* 从body元素继承的所有元素在指针停留时会显示灰色背景 */ 如果要选择元素的第一个子元素,可以用“:first-child”静态伪类: CSS样式: 复制代码代码如下:p:first-child,li:first-child {background:#CCC;} HTML代码: 复制代码代码如下: <div> <p>p1</p><!-- 背景为灰色 --> <p>p2</p> <ul> <li>1</li><!-- 背景为灰色 --> <li>2</li> <li>3</li> </ul> </div> 注意:IE6不支持“:first-child”静态伪类。 下面是关于结合伪类的用法: 复制代码代码如下: a:link:hover {color:red;}/* 顺序可交换,即可以为a:hover:link,IE6中只会注意:hover而忽略:link部分 */ a:visited:hover {color:maroon;}/* 顺序可交换,IE6中只会注意:hover而忽略:link部分 */ 上面的样式可以实现鼠标指针停留在未访问链接上时,链接为红色,当停留在已访问过的链接上时,颜色为紫红色。 还可以根据语言来选择,即使用:lang为类: 复制代码代码如下: *:lang(fr) {font-style:italic;}/* 把法语元素变成斜体 */ 更多语言代码请查阅CSS手册。 此外,还有:first、:left:、right三种伪类,它们仅用于@page规则,例如: 复制代码代码如下: @page :right { margin: 4cm }/* 设置页面容器位于装订线右边的所有页面使用的样式 */ @page :first {}/* 设置页面容器第一页使用的样式 */ 8、伪元素:CSS2.1中有:first-letter、:first-line、:before、:after四种伪元素,实例: 复制代码代码如下: p {width:500px;}/* 使用:first-line前先设置元素宽度,如果未指定对象的width属性,首行的内容长度随窗口宽度而定 */ p:first-line {color:red;}/* 不管是否设置了p的宽度,p元素内第一段文字总是以红色显示 */ p:first-letter {font-size:2em;} h2:before {content:"{";color:green;}/* 在h2元素的内容前面添加了一个“{”符号,并且颜色为绿色 */ h2:after {content:"}";color:green;}/* 在h2元素的内容后面添加了一个“}”符号,并且颜色为绿色 */ h3:after {content:"END";color:red;}/* 非IE6浏览器中,h3元素最后会添加红色的的“END”单词 */ span:before {content:"s";color:red;}/* 非IE6浏览器中,span前面会添加一个红色的“s” */ span:first-letter {color:green;font-size:40px;}/* span元素的第一个单词不会变成绿色,大小为默认值 */ span {position:absolute;}/* 对span使用绝对定位后,第一个字母变为绿色,大小为40px */ 得出的结论是: 1)IE6支持:first-line和:first-letter伪元素,不支持:after和:before伪元素; 2):first-line和:first-letter只能用于块级元素,:after和:before适合块级和行内元素; 3)行内元素设置设定position属性为absolute,或者设定display属性为block后,:first-line和:first-letter有效。

本文源自: 环亚娱乐

上一篇:没有了
下一篇:通过W3C XHTML1.0标准验证的经验