元素选择符
选择符 名称 描述 * 通配选择符 所有元素对象 E 类型选择符 匹配对应的标签 # id选择符 以唯一标识符id属性作为对象的选择符 . class选择符 以包含对应的class属性作为对象的选择符
一般我们在CSS样式表里面加入*{margin:0;padding:0},清除所有元素的内外边距
关系选择符
选择符 名称 描述 div p 包含(后代)选择符 选择div元素里面的所有p元素(儿子,包括孙子…) div>p 子选择符 选择p元素的父亲是div元素的所有p元素(儿子) div+p 相邻选择符 div元素之后的一个p元素,同级,只能从div元素的位置向后查找 div~p 兄弟选择符 div元素之后的所有p元素,同级,只能从div元素的位置向后查找
属性选择符
选择符 描述 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元素 E[att~=“val”] 选择具有att属性且属性值为用空格分隔的字词列表,其中一个等于val的E元素,或者只有一个值且该值就等于val E[att|=“val”] E拥有att属性,并且值为val,或者值是以val-开头的
div[ class ~ = 'a' ] { }
div[ class |= 'a' ] { }
< div class = "a" > 1 < / div>
< div class = "ab" > 2 < / div>
< div class = "a b" > 3 < / div>
< div class = "a-b" > 4 < / div>
< div class = "b-a-c" > 5 < / div>
伪类选择符
选择符 描述 a:link 设置超链接a在未被访问前的样式 a:visited 设置超链接a在其链接地址已被访问过时的样式 E:hover 设置元素在其鼠标悬停时的样式,基本上所有元素都有hover E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式 E:focus 设置元素成为焦点(该元素的onfocus事件发生)时的样式 E:not(s) 匹配不含有s选择符的元素E E:root 匹配E元素在文档的根元素 E:first-child 匹配父元素第一个子元素E E:last-child 匹配父元素最后一个子元素E E:only-child 匹配父元素仅有的一个子元素E E:nth-child(n) 匹配父元素的第n个子元素 E:nth-last-child(n) 匹配父元素的倒数第n个子元素 E:first-of-type(n) 匹配父元素下第一个类型为E的子元素 E:last-of-type 匹配父元素下所有类型为E的子元素倒数一个 E:only-of-type 匹配父元素所有子元素唯一一个类型为E的的子元素 E:nth-of-type(n) 匹配父元素的第n个子元素E E:nth-last-of-type(n) 匹配父元素的倒数第n个子元素E E:empty 匹配没有任何子元素(包括text节点)的元素E E:checked input元素type为radio与CheckBox为选中状态时选中 E:enabled 可用状态的元素 E:disabled 禁用状态的元素 E:target 匹配相关URL指向的元素
E : not ( s) 否定伪类选择符
假定有一个列表,每个列表项都有一个条底边线,但是最后一项不需要底边线
. demo li: not ( : last- child) {
border- bottom: 1 px solid #ddd;
}
p: not ( . abc) { color: #f00; } 除了第一个,其他的p字体样色都是红色
< p class = 'abc' > 1 < / p>
< p id= 'abc' > 2 < / p>
< p class = 'abcd' > 3 < / p>
nth-child(n) 关于参数n
n是数字,就是选择第几个 关键字,even偶数,odd奇数 公式,n是从0开始计算的
公式 呈现 2n 偶数 2n + 1 奇数 5n 5 10 15 … n + 5 从第五个开始(包含第五个)到最后 -n + 5 前5个(包含第五个)
伪对象选择符
选择符 描述 E::first-letter 设置对象内的第一个字符样式 E::first-line 设置对象内第一行的样式 E::before 设置对象前发生的内容 E::after 设置对象后发生的内容 E::placeholder 设置对象文字占位符的样式 E::selection 设置对象被选择时的颜色
CSS3将伪对象选择符(伪元素)前面的单冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效
E:first-letter、E::first-line此伪对象仅作用于块元素。内联元素需要设置为块元素才可以使用
CSS权重
权重决定了你的CSS样式最终的呈现效果,CSS样式我们会大量应用,给元素添加CSS样式的方式有很多,可以外部引入,可以写内部样式表,也可以写行内样式表,有时会发现自己写的CSS样式不生效。这里注意一点,CSS样式浏览器都会解析,但是最终呈现效果就是权重的影响了。
权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1
类型 权重 ! important 无穷 行间样式 1000 id 100 class/属性选择器/伪类:hover 10 标签选择器/伪元素:after 1 通配符 0
01. * { } === = 》0
02. li{ } === = 》1 ( 一个元素)
03. li: first- line{ } === = 》2 ( 一个元素,一个伪元素)
04. ul li { } === = 》2 (两个元素)
05. ul ol+ li{ } === = 》3 (三个元素)
06. h1+ * [ rel= up] { } === = 》11 (一个属性选择器,一个元素)
07. ul ol li. red{ } === = 》13 (一个类,三个元素)
08. li. red. level{ } === = 》21 (两个类,一个元素)
09. style= "" === = 》1000 ( 一个行内样式)
10. p { } === = 》1 (一个元素)
11. div p { } === = 》2 (两个元素)
12. . sith { } === = 》10 (一个类)
13. div p. sith{ } === = 》12 (一个类,两个元素)
14. #sith{ } === = 》100 (一个ID 选择器)
15. body #darkside . sith p { } === = 》112 ( 1 + 100 + 10 + 1 , 一个Id选择器,一个类,两个元素) < / pre>