首页 > 开发 > CSS > 正文

CSS学习之二 选择器

2024-07-11 08:26:29
字体:
来源:转载
供稿:网友
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 class="p">This is a paragraph</p><!-- 类选择符 -->
<div class="p">This is a div element</div><!-- 类选择符 -->
<p class="urgent warning">This is a paragraph</p><!-- 多类选择符,一个class可以包含一个词列表,各个词之间用空格隔开 -->
<p class="urgent warning help">Those words's background-color is red too in all browser!</p><!-- 多类选择符,.waring.urgent选择器将不能匹配这里的p -->
<p class=" help ie6">Those words's background-color is red in browser ie6!</p><!-- 多类选择符,由于help在选择器中最后出现,所以在IE6中背景为红色的 -->
<p class="help">Those words's background-color is red in browser ie6!</p><!-- 类选择符,由于help在选择器中最后出现,所以在IE6中背景为红色的 -->
<p>This is a paragraph<span class="warning"> 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下却不同,这一点是很值得注意的。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表