1、基础选择器
-
标签(元素)选择器
-
类选择器(.)
-
id选择器(#)
-
通配符选择器(*)
-
表示选中页面中所有的元素
-
2、复合选择器
-
后代选择器(空格)
-
子代选择器(>)
-
兄弟选择器/并集选择器(,)
-
通常用于集体声明
-
-
伪类选择器(:状态),表示元素的一种状态
-
链接伪类选择器(:link/:visited/:hover/:active)
-
表单伪类选择器(input:focus {}选出获取光标的表单元素)
-
3、CSS3新增选择器
(1)属性选择器
-
E[att]:表示具有att属性的E元素
-
E[att="val"]:表示att属性值为val的E元素
-
E[att^="val"]:表示att属性以val属性值开头的E元素
-
E[att$="val"]:表示att属性以val属性值结尾的E元素
-
E[att*="val"]:表示att属性的属性值含有val的E元素
(2)子代伪类选择(结构伪类选择器)
-
E:first-child、匹配父元素中的第一个子元素E
-
E:last-child、匹配父元素中的最后一个子元素E
-
E:nth-child(n)、匹配父元素中的第n个子元素E
-
E:first-of-type、指定类型E的第一个
-
E:last-of-type、指定类型E的最后一个
-
E:nth-of-type(n)、指定类型E的第n个
-
注意:n可以为数字,关键字,公式
<ul> <li></li> <li></li> <li></li </ul> 可以用ul :first-child {} 也可以用ul li:first-child {} 关键字:odd\even 公式:2n\zn+1\5n\n+5\-n+5
(3)否定伪类选择器
-
E:not(选择器)
-
可以从已经选择的选择器中删除掉某些元素
(4)伪类元素选择器
-
E::after (在E元素的内部的最后面添加,相对于在后面添加子元素)
-
E::before (在E元素的内部的最前面添加,相当于在父元素里面最前面添加子元素)
-
以上创建的都是行内元素,且必须有content属性,表示标签里面的内容
-
E:first-letter(表示选中元素E的第一个字符)
-
E:first-line(表示选中元素E的第一行/首行)
(5)兄弟元素选中器
-
后一个兄弟选择器
-
span+p {写入样式},span后面的第一个p标签
-
-
后面所有的兄弟选择器
-
span~p{写入样式},span后面所有的p标签
-
4、选择器的权重优先fi级问题
-
选择器相同,则执行层叠性
-
选择器不同,则根据选择器权重来执行
-
没有设置选择器,则样式依据继承性(注意:大部分只有跟文字相关的样式才有继承性)
-
权重只有相加,没有进位
选择器 权重(优先级) 通配符/继承样式 0 标签选择器 1 类选择器/伪类选择器 10 id选择器 100 内联样式 1000 !important 无穷大,最高权重