您的位置:首页 > Web前端 > CSS

css语言基础--css的选择符语法

2013-02-27 09:47 337 查看
基本的选择符包括通用选择符、类选择符、属性选择符、ID选择符、伪类选择符等。

1简单选择符(类型选择符和通用选择符被统称为简单选择符)
1.1类型选择符
类型就是指HTML语言定义的各个元素,每一中元素名就是一个类型选择符名。如:p{color:red;}
1.2通用选择符
通用选择符使用(*)来表示,它对HTML文档中的每一个元素都会起作用,实际上就是定义了一个全局样式。

2派生选择符
派生选择符由两个或多个类型选择符组成,并以空白相分割。如:h1 em{color:red;}通过改h1元素中em元素来对文本颜色进行强调。

3子选择符
子选择符由两个或多个选择符构成,并以大括号分割,大括号两端空白可以被省掉。如body>em{}

4相邻同级选择符
相邻同级选择符的语法如下:E1+E1 如:h1+p{}表示当一个p元素紧跟在一个h1元素之后时,该规则应用于p元素。

5相邻同级连续选择符
语法格式如下:E~F 表示匹配E元素之后的F元素,直到出现另外一个E元素。
如:div~p{background-color:green;} 表示匹配div元素之后的一个或多个p元素,将p元素的背景设置为绿色。

6属性选择符和类选择符
6.1属性选择符
属性选择符用于为那些有特定属性的元素定义样式。
(1)E[att]:匹配任何的元素E,该元素必须有一个名为att的属性,而不论属性值是什么
(2)E[att="val"]匹配任何的元素E,该元素必须有一个名为att的属性,属性值等于val
(3)E[att~="val"]匹配任何的元素E,该元素必须有一个名为att的属性,该值可以包含空白字符,但字符窜两个空白之间必
须有一个是val
(4)E[att|="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]

6.2类选择符
语法如下:.元素class属性的名称{} 如:有一个html代码<div class="m">我学习css3</div>  对应的类选择符为 .m{}

7ID选择符
ID选择符包含一个"#",紧跟在后的事ID的值。如<div id="s">每天看美女</div> 对于的ID选择符为 #s{}

8群选择符
有时几个选择符的样式声明完全是相同的,这时候可以使用群选择符。
如 h1{color:red} h2{color:red} h3{color:red}此时可以简化成:h1,h2,h3{color:red}

9选择符的大小写规定
选择符是否区分大小写取决于所应用的语言,如在html中,元素名是不区分大小写的,所以当将元素名用作选择符时不区分大小写。

10css命名空间
10.1@namespace规则
@namespace规则声明一个xml命名空间,并将该命名空间与表示命名空间名称的字符串相关联。
如:@namespace book "http://book.ming.com" 表示为命名空间book提供命名空间的声明
10.2使用命名空间限定选择符
语法格式:(1)ns|E 表示匹配位于命名空间ns中的E元素
(2)|E   表示匹配没有在任何命名空间的E元素
(3)*|E  表示匹配位于任何命名空间中的E元素
(4)E    如果没有默认命名空间声明,那么就等同于*|E,否则等同于ns|E,ns就是默认的命名空间
如:@namespace book "http://book.ming.com"
@namespace note "http://note.ming.com"
p{color:red;} book|p{color:blue;} note|p{color:green;}
以上代码表示:首先,将任何命名空间的p元素着色为红色。然后,将book命名空间中的所有p元素重新着色为蓝色,将note
命名空间的p元素重新着色为绿色。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: