CSS选择器Selector

目录

一、DOM

二、类选择器

类选择器示例代码

类选择器Class Selector

*指定多个class

多个class选择器，后定义的优先级高

三、标签类型选择器

标签类型示例代码：

统一设定某种标签的样式

标签与类结合使用

四、ID选择器

元素的ID

ID选择器

ID选择器示例代码：

五、伪类选择器

伪类选择器示例代码：

 六、子选择器

子选择器示例代码：

---

一、DOM

DOM, Document Object Model

文档对象模型

在HTML页面里，浏览器根据和里面的所有标签，建立一个树状结构

下的每个节点，称为元素Element

例如：

元素的通用属性：

元素都有一些属性，例如

id	给改元素设置一个全局唯一的ID
name	给改元素设置一个名字
class	设置样式类名
style	设置临时样式
......	.......................

 

注：不要把显示的内容放在以外

二、类选择器

类选择器示例代码

	
		
		
		
	
	
		

			新建
			删除
			添加图片
			添加链接
		
		
		

			
		
		
		

			放弃编辑
			发布
		
	

类选择器Class Selector

示例：

.my-button

{

}

用于指定 所有class="my-button"的元素的样式。

 

*指定多个class

一个元素可以指定多个class

发布

规则：

-定义多个样式

-指定样式时，以空格分开

*优先级问题

当多个样式出现冲突时：

例如：

.my-button{}

.my-button-default{}

其中，.my-button-default{}的优先级更高，因为他是后出现的，

验证：打开谷歌开发者工具来验证：

1.2.3.4四部即可看出

多个class选择器，后定义的优先级高

三、标签类型选择器

标签类型示例代码：

	
		
		
		
	
	
		

			新建
			删除
			添加图片
			添加链接
		
		
		

			
		
		
		

			放弃编辑
			发布
		
	

统一设定某种标签的样式

例如：

button{

}

标签与类结合使用

button.my-default{

}  

标签类型为、并且class="my-default"的元素

四、ID选择器

元素的ID

每个元素都可以设计一个id属性

例如：

发布

由于ID应该是在页面内唯一的，为了避免重复，一般应该命名较长一些

例如：editor-ok-button     editor-cancel-button

ID选择器

ID Selector，ID选择器

指定某个元素的ID的元素的样式

注：

1、ID应该是在页面内唯一的，即通过一个id可以唯一定位一个元素

2、ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

 优先级

在Chrome里观察Type Selector和ID Selector的优先级顺序....ID Selector

优先级顺序：

内联样式	1000
ID选择器	100	发布
类选择器	10	发布
标签类型	1	......

ID选择器示例代码：

	
		
		
		
		

	
	
		
		

			新建
			删除
			添加图片
			添加链接
		
		
		

			
		
		
		

			放弃编辑
			发布
		
	

 

五、伪类选择器

伪类选择器Pseudo-Class-Selector

即：为元素的每一种状态定义一个样式

xxx	普通状态显示
xxx:hover	鼠标移上去的状态显示
xxx:active	鼠标按下去的状态显示
xxx:focus	焦点状态下的状态显示

 其中，xxx可以是ID/class/Type Selector

例如：

.my-button：focus{}

img：disabled{}

#ok:hover{}

伪类选择器示例代码：

	
		
		
		
	
	
		

			 新建 
			 删除 
			 添加图片  
			 添加链接   	
		
		
		
 
			 立即重启服务器 
		
	

 六、子选择器

子选择器 Descendant Selector

可以设定父元素下子元素的样式

子选择器示例代码：

	
		
		
		
	
	
		

			

				用户名
				

			
			
			

				密码
				
			
			
			

				登录
			
			
		
	

#login-panel label{}

在 id="login-panel"元素下所有的样式

.xxx.yyy.zzz{}

在class="xxx"下的子元素class="yyy"下的class="zzz"