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筛选条件的元素被选择时的样式。
中国是一个文明大国。
我爱你,中国!