- 属性选择器
- input[value] { }(input并且具有value属性)
- input[type=text] {} {input的属性的值为text的需要更改}
- div[class^=icon] { } (选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 )
- section[class$=data] {} ( 选择类名以data结尾的 )
- 结构伪类选择器
- ul li:first-child { } (选择ul里面的第一个孩子 小li)
- ul li:last-child { } (选择ul里面的最后一个孩子 小li)
- ul li:nth-child(2) { } (选择ul里面的第二个孩子 小li)
- ul li:nth-child(6) { } (选择ul里面的第六个孩子 小li)
- ul li:nth-child(even/2n) { } (把所有的偶数 even的孩子选出来 )
- ul li:nth-child(odd/2n+1) { } (把所有的奇数 odd的孩子选出来)
- ol li:nth-child(n) { } (从0开始 每次加1 往后面计算 必须是n 不能是其他的字母 选择了所有的孩子
- ul li:nth-child(n+5) { } (选择从第五个孩子开始)
- ul li:nth-child(-n+5) { } (选择从第五个孩子开始往前数)
- ul li:first-of-type { } (第一个孩子)
- ul li:last-of-type { } (最后一个孩子)
- ul li:nth-of-type(even) { } (偶数孩子)
- section div:nth-child(1) { } (nth-child 会把所有的盒子都排列序号执行的时候首先看 :nth-child(1) 之后回去看 前面 div )
- section div:nth-of-type(1) { } (nth-of-type 会把指定元素的盒子排列序号;执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 )
- 伪元素选择器(页面中找不到的,常用于字体标签)[和标签选择器一样,权重为1]
- ::before在元素的前面插入内容(父盒子的内部的前面)
- ::after在元素的后面插入内容(父盒子的内部的后面)
- 必须有content属性
- div::after { content: '我';}
- .tudou:hover::before { } (当我们鼠标经过了 土豆这个盒子,就让里面before遮罩层显示出来)
- 伪元素清除浮动