一、之前学过的选择器: div{} .box 类名选择器 #box id选择器 div p 后代选择器 div.box 交集选择器 div,p,span 并集选择器 div>p 子代选择器 * : 通配符 div+p: 选中div后面相邻的第一个p div~p: 选中的div后面所有的p
二、属性选择器:
id选择器 # 类名选择器:. 属性选择器:[] E[attr]:选中带有arrt 属性的E元素 E[attr="val"]:选中带有attr属性,且attr值为"val“的E元素 ^ :开头 $:结束 *:包含 E[attr^="val"]:选中带有attr属性,且attr值为以"val“开头的E元素 E[attr$="val"]:选中带有attr属性,且attr值为以"val“结尾的E元素 E[attr*="val"]:选中带有attr属性,且attr值为包含"val“的E元素
三、伪类选择器:
<div class="box"> <div></div> <div></div> <div></div> <div></div> </div> 选中 box 下面的div 第父盒子 中的第一个子元素 .box div:first-child{ background-color: red; } 选中 box 下面的div 第父盒子 中的最后一个子元素 .box div:last-child{ background-color: red; } 选中box下的第18个盒子 :nth-child(n) n是也给整数 从1开始 1,2,3,4,5.... 如果n小于等于0 无效 n :正整数+0 .box div:nth-child(28){ background-color: red; } 选中所有的box 下的div .box div:nth-child(n){ background-color: pink; } 2n 选中所有的偶数 .box div:nth-child(2n){ background-color: red; } 2n-1 奇数 .box div:nth-child(2n+1){ background-color: red; } 奇数:odd 偶数:even .box div:nth-child(odd){ background-color: red; } .box div:nth-child(even){ background-color: yellow; } 选中7的倍数+1 .box div:nth-child(7n+1){ background-color: red; } 选中前5个 .box div:nth-child(-n+5){ background-color: red; } 选中后5个 nth-last-child 从最后面开始选 .box div:nth-last-child(-n+5){ background-color: red; } 四、伪类选择器empty
选中页面中 内容为空的( 不能有标签 和文字) div
div:empty{ border:2px solid red; }
五、伪类选择器target
:target 配合 锚点使用,当锚点的连接被点击时,就会激活id所对应元素,从而可以 该元素添加样式
六、伪元素before和after
css2 没有 伪元素的概念,只有伪类 E:before E:after 是伪类 css3: 伪元素 E::before E::after 必须有 content:"";
七、伪元素选择器first-letter,first-line,selection
::first-letter: 选中第一个字母 ::first-line: 选中第一行 ::selection: 用于给选中的区域 设置样式:通常设置 color 和 background-color