<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box1,.box2{ width: 200px; height: 100px; background-color: #ff0789; transition: 2s; } .box1:hover+.box2{ background-color: greenyellow; } .box2:active{ background-color: aqua; } ul li{ background-color: #ff0789; } ul :nth-child(odd){ background-color: aqua; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 后代选择器 .box1 .box2 选择.box1的后代元素.box2 子代选择器 .box1>.box2 选择.box1的子代元素.box2 并列选择器 .box1,.box2 选择.box1和.box2 相邻兄弟选择器 .box1+.box2 选择.box1的相邻兄弟.box2 普通兄弟选择器 .box1~.box2 选择.box1的普通兄弟.box2 动态伪类选择器 a:link 选择未被访问过的a标签 a:visited 选择已被访问过的a标签 :hover 选择鼠标经过时的元素 :active 选择鼠标点击时的元素 这两个元素可以给最初设置颜色(原始颜色)的地方给一个transition: 2s;渐变一下子 而且只能检测到数值到数值的变换,不能检测单词到单词 css3新增选择器 ul li:nth-child(值) 从上到下选择第几个子元素 简答写法 ul :nth-child 2 可以取任意整数 odd/even odd奇数even整数 3n+1 选择符合表达式的元素 n的取值[0,无穷大) :nth-last-child(值) 从下到上选择第几个子元素 取值一样 :nth-of-type(值) 从上到下选择每一类标签的第几个子元素 :nth-last-of-type(值) :empty 选择没有(子元素/文本)的元素 :not(选择器) 取反选择器 ul :not(.on)选择ul子代class名不为on的标签 :first-child 选择第一个子级元素 :last-child 选择最后一个子级元素 [属性名] 属性选择器 [class] 选择有class的标签 [class='box'] 选择有class并且值为box的标签 [class*='box'] 选择有class并且值中含有box的标签 [class^='box'] 选择有class并且值中含有以box开头的标签 [class$='box'] 选择有class并且值中含有以box结束的标签 伪元素选择器 :first-letter 选择元素的第一个文字 :first-line 选择元素的第一行文字 :before 在元素内容前插入内容 :later 在元素内容后面插入内容 before和after必须要用content激活 ::selection 选择被用户选择的元素 伪元素 相当于一个假的元素 元素选择器 伪类 相当于一个假的类名 类(class)选择器 真假选择器的权重是一样的 推荐代码顺序 1布局定位属性 content/display/position(对应方位值)/float/overflow/list-style 2自身属性 width/height/padding/margin/background/border 3文字属性 color/font/text-decoration/vertical-align 4其他/css3新增属性 cursor/border-radius/box-shadow/text-shadow --> </body> </html>
