HTML选择器
三大基础选择器
标签选择器 html{属性:属性值} id选择器 #id{属性:属性值} class选择器 .id{属性:属性值}权重 标签的权重最低 按照通常说法分数为1分 id选择器的权重最高 一般为100分 class的选择器权重最低 一般为10分 //这里的分数仅仅为了方便判断,实际当中并不存在具体的看文尾
高级选择器
并集 “并集”选择器:同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,并集选择器是多个选择器通过逗号连接而成的。例如h1,h2,h3{color:red;font-size:23px;} 交集 “交集”选择器:由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第一必须是标记选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写.div. d1选中一个div标签类名叫d1 后代 选择它里面的后代元素 例如.box .d1 p 选中类名为.box下面的.d1 的p标签 子元素选择器 .d1>a 选择类名为.d1下面的a标签 相邻兄弟选择器 div+p div后面的p标签被选中 普通兄弟选择器 div~p div后面额p标签全部被选中 通配符 *{ color :red}星号代表所有,让颜色为红色 超链接伪类选择器 :link超链接的初始状态 :visited超链接被访问后的状态 :hover鼠标悬停超链接的状态 :active超连接被激活,按下没有松开的状态
CSS3选择器
属性选择器
E[attr] attr指的是是class的属性 E[attr = value] class属性为value E[attr^=value] class值是value开头的 E[attr$=value] class值是value结尾 E[attr*=value] 子主题 1 E[attr~=value ] class~class属性是value 用空格隔开 E[attr|=value] class属性值是value或者是value-开头的类
结构伪类选择器
nth-child() nth-child(1)第几个子元素 odd奇数 第奇数的元素 even偶数 第偶数的元素 3n散的倍数 三的倍数的元素 first-child 第一个孩子元素 last-child 最后一个孩子元素 only-child 只有一个孩子元素 nth-of-type() 选择器匹配父元素中的第n个子元素 first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。 nth-last-child() 择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数 nth-last-of-type() 择器选取父元素的第 N 个子元素,与类型无关,从最后一个子元素开始计数 :root 唯一的根元素 :empty 选用没有子元素的标签 only-of-type 代表了任意一个元素,这个元素没有其他相同类型的兄弟元素,也叫只有一个子元素。
目标伪类选择器
:target 选择器可用于当前活动的target元素的样式。
ui状态伪类选择器
disabled 禁用一个input属性disabled:disabled;input=disabled; enabled input:enabled 标签可用 focus input:focus让input获取焦点 checked input:checked; 默认选项。多选单选框使用 ::selection 选中内容
否定伪类选择器
:not 取反类名不是所选中的 取反
动态伪类选择器
:link 点击前的状态 :visited 被访问后的状态 :hover 悬停状态 :active 点击松手前的状态
权重比较
id、class、html标签选择器的数量 权重不同看权重 权重相同看位置 继承 看谁近 一样近,比较权重 不一样,谁的权重大听谁的 权重一样,听后面的
本次整理只是常用的整理,并不全面仅供参考。有问题可以留言指正。