CSS选择器


1、标签选择器

使用html标签筛选需要渲染的网页元素。

p{
	font-size: 30px;
	font-family: 楷体;
	color:blue;
}

对网页中所有的p标签都适用。

2、类选择器、id选择器

定义的样式由css声明,标签需要样式类渲染时,使用class属性选择样式类。

使用场景:用户自定义样式时通常的编写方式。

类选择器的特点:

多个标签可以引用同一个样式类,提高程序的公用性。

通过语义化的类名定义增加了程序可读性。

标签可以通过class引入多个样式类名,用空格分开。

类名区分大小写。

ID不能重复,因此每个元素都要编写一个id选择器,无法提炼公用样式。

文档内元素的ID是区分大小写的。

id命名规则是由字母、数字和下划线组成。但是数字不能开头。



	
		
		
	
	
	
		
		
	

一个元素可以设置多个类名,中间用空格隔开。但是我们在使用选择器的时候,不能直接写

.nav nav-top:这是不对的

.nav .nav-top:也是不对的

.nav.nav-top:这是对的,取交集

3、选择器分组

对一组选择器赋予同样的样式属性。一般用于对一组公用标签的相同属性进行赋值。

标题1

标题2

标题3

标题4

标题5
标题6

4、派生与子元素选择器

派生选择器:由多个选择器组合而成,按照html标签的层级关系(全部后代子孙)筛选要被渲染的标签。

当前标签的祖辈容器必须为li,且li的祖辈容器必须为ul。

子元素选择器:由多个选择器组合而成,按照html标签的层级关系(直接后代),筛选要被渲染的标签。

当前标签的父容器必须为li,且li的父容器必须为ul。

子元素选择器与派生选择器的区别子元素选择器筛选的是直接子元素,而派生选择器筛选全部后代。



	
		
		
		
	
	
		
  • 1
  • 2
    • 2.1
    • 2.2
    • 2.3
  • 3

.item li                                           .item>li

 

5、属性选择器

根据元素的html属性或属性值筛选要被渲染的元素。



	
		
		
		
	
	
		01-css入门
打开百度

6、伪类选择器

伪类选择符:按照用户操作状态筛选需要渲染的元素

E:link:筛选未被访问的链接。

E:visited :筛选已经被被访问的链接。

E:hover:筛选当前鼠标悬停时的任何元素。

E:active:筛选被用户激活(鼠标点击)时的任何元素。

E:focus:筛选获取焦点的任何元素。

E:first-child:筛选父元素的第一个子元素。

E:last-child:筛选父元素的最后一个子元素。



	
		
		
	
	
	
		
		

7、伪对象选择器

E::first-letter:设置符合E筛选条件的第一个字符的样式。

E::first-line:设置符合E筛选条件内的第一行的样式。

E::before:设置符合E筛选条件的前一个元素的样式。

E::after:设置符合E筛选条件的后一个元素的样式。

E::selection:设置符合E筛选条件的元素被选择时的样式。



	
		
		
		
	
	
		

中国是一个文明大国。
我爱你,中国!