CSS选择符总结(Selectors)_html/css_WEB-ITnose

一.通配选择符(Universal Selector):

语法：*

说明：1.*表示通配符,表示所有的
2.格式:*{样式列表}
3.用于整个页面或网站字体、边距、背景等

例子：

 1  2  3  4  5  6 19   20 21 普通文本22 
段落文本
23 span内联文本24 
div文本25       
div子div元素中的文本
26       
div中段落文本
27       div中span内联文本28 
29 30 

输出如下：

==============================================================================================================================================

二. 类型选择符（Type Selectors）：

语法：E1

说明：1.类型选择符用于设定特定HTML元素样式
2.元素名称不区分大小写
3.格式:HTML元素名{样式列表}

例子：

 1  2  3  4  5  6 19 20 21 
类型选择符
22 
类型选择符
23 24 

输出如下：

=================================================================================================================================

三.属性选择符（Attribute Selectors）：

语法：1. E1[attr]
2. E1[attr=value]
3. E1[attr~=value]
4. E1[attr|=value]

说明：用于定义特定属性值的HTML元素样式.

例子：

 1  2  3  4  5  6 18 19 20 28 29 

输出如下：

=================================================================================================================================

四.包含选择符（Descendant Selectors）：

语法： E1 E2

说明：1.用于子元素对父元素样式的扩展
2. 格式:父选择符子选择符{样式列表}

3.注意HTML元素包含关系

例子：

 1  2  3  4  5  6 18 19 20     
包含选择符
21     
22         
 包含选择符23          包含选择符24         
25     
26 27 

输出如下：

=================================================================================================================================

五.子对象选择符（Child Selectors）：

语法： E1>E2

说明：1.用于子对象元素对父对象元素样式扩展
2. 格式:父对象选择符>子对象HTML元素名称{样式列表}

3.注意和包含选择符的区别

4.使用情况较少,通常可以用包含选择符取代

例子：

 1  2  3  4  5 38 39 40 水果列表41 
42 
香蕉
43 
苹果
44 
桃子
45 
46  47   48   49   50   51 
单元格一
单元格一
52 三大球类运动53 
54  
足球
55  
全世界第一大球类运动
56  
篮球
57  
全世界第二大球类运动
58  
排球
59  
全世界第三大球类运动
60 
61 
第一层div
第二层div
62 65 66 67 

输出如下：

=================================================================================================================================

六.ID选择符（ID Selectors）：

语法： #sID
说明：1.用于定义唯一ID属性值元素样式

2. 格式:#选择符名称{样式列表}

3.选择符名称必须和元素ID属性值完成相同,且区分大小写

例子：

 1  2  3  4  5  6 14 15 16 22 23 

输出如下：

=================================================================================================================================

七.类选择符（Class Selectors）：

语法：E1.className
说明： 1.用于选择特定类选择符

2. 可以选择一个或以上的类选择符

3.区分大小写

例子：

 1  2  3  4  5  6 14 15 16 22 23 

输出如下：

=================================================================================================================================

八.（选择符混合使用）选择符分组（Grouping）：

语法：E1.E2.E3
说明： 1.常见的有类型选择符与类选择符 ；格式:html元素名.类选择符名称,中间不能有空格

2.其它选择与包含选择符；最常见使用方式

例子：

 1  2  3  4  5  6 22 23 24 
普通文字
11
25 
放大文字
26 
div放大文字
27 
彩色字体
28 
29 div中的span文字30 
31 
子DIV中的段落文字
32 33 

输出如下：

==============================================================================================================================================

常见的三种样式表：

一.内嵌样式表：内嵌样式表其实就是把样式放在,,,,内部。

例子：

 1  2  3  4  5  6  7  8 15 16 17 
静夜思
18 
作者李白
19 
床前明月光，
20 
疑是地上霜.
21 
我是郭德刚，
22 
低头思故乡.
23 24 

输出如下：

==============================================================================================================================================

二.行内样式表：其实就是把样式放在,,,,,,,,内部。

例子：

 1  2  3  4  5  6  7  8 
 9     
静夜思
10     
作者李白
11     
12         
床前明月光，
13         
疑是地上霜.
14         
我是郭德刚，
15         
低头思故乡.
16     
17 
18 19 

输出如下：

==============================================================================================================================================

三.链接外部样式表：样式放在链接的css/demo.css那个文档里，而链接放在,,,,,,,,,,,内部。

例子：

 1  2  3  4  5  6  7  8  9 
静夜思
10 
作者李白
11 
床前明月光，
12 
疑是地上霜.
13 
我是郭德刚，
14 
低头思故乡.
15 16 

输出如下：