可以参考:
1、https://blog.csdn.net/q1056843325/article/details/53189526?ref=myread
2、https://www.cnblogs.com/caoyc/p/5855426.html
CSS3选择器分为以下五类
1、基本选择器
2、层次选择器
3、伪类选择器(分为六种:动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器)
4、伪元素
5、属性选择器
详细介绍:
一、基本选择器
有以下几种: * 、 E 、#id、 .class、selector1,selectorN
*: 通配选择器,选择所有元素,也可以选择某个元素下的所有元素(例: .demo *{background: red;},此时元素类名为demo下的所有元素都将背景色设为红色)
E:元素选择器(html、body、p、div、ul、li等等)
id:ID选择器
.class:类选择器,这里介绍下多类选择器,通过两个或两个以上类选择器合并,来定义有别于一个类名的元素效果
(例:.item.important {background: red;} 只对同时包含这两个类名的标签作用,ul.block{background: red;}仅对ul元素类名为block的作用)
*IE6选择器并不支持多类名选择器,其将以末尾类名为准
selector1,selectorN: 群组选择器是将具有相同样式的元素分组在一起,每个选择器之间用(,)隔开
,省去(,)就成了后代选择器
二、层次选择器
主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系: E F、E>F、E+F、E~F
E F:后代选择器(或包含选择器)例如“E F”,E为祖先元素,F为后代元素,表达的意思就是选择器E元素的所有后代F元素,这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系,都将被选中
E>F:子选择器 只能选择某元素的子元素,其中E为父元素而F为子元素
E + F:相邻兄弟选择器,可以选择紧接在另一个元素后的元素,他们具有一个相同的父元素,换句话说,E和F是同辈元素,F元素在E元素的后面,并且相邻。
E~F通用兄弟选择器,是CSS3新增的,用于选择某元素后面的所有兄弟元素
三、动态伪类选择器
CSS3伪类选择器可以分为六种:动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。常见的“:link”、“:visited”、“:hover”、“:active”。
动态伪类选择器:
动态伪类早在CSS中就有,并不是CSS3才有的,动态伪类并不存在于HTML中,只有当用于和网站交互的时候才能体现出来。动态伪类包含两种,第一种是链接中常看到的锚点伪类,另一种为用户行为伪类
E:link 链接伪类选择器,
E:visited 链接伪类选择器
E:active 用户行为伪类选择器
E:hover 用户行为伪类选择器
E:focus 用户行为伪类选择器
锚点伪类的设置必须遵守一个“爱恨原则”LoVe/HAte,也就是“link-visited-hover-acticve”
四、目标伪类选择器
目标伪类选择器“:target”是众多使用的CSS3特性中的一个,用来匹配文档(页面)的URI中某个标志符的目标元素
五、语言伪类选择器
六、UI元素状态伪类选择器
主要用于form表单元素上,以提高网页的人机交互、操作逻辑以及页面的整体美观
UI元素的状态一般包括:启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机
七、结构伪类选择器
所有的结构伪类都是基于HTML文档树的也称作DOM
语法: E:first-child、E:last-child、E:root、E F:nth-child(n),其中n可以是整数(1、2、3)关键字(even、odd)可以是公式(2n+1) 、 E F:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:first-of-type、E:last-of-type、E:only-child、E:only-of-type、E:empty
线性渐变学习网址
https://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html
网友评论