CSS选择器的简单整理

.className{ ???//声明}

#id{ ???//声明}

*{ ???//声明}

div,.className,#id{ ???//声明}

//选择ul下所有li元素后代ul li{ ???//声明}

//只能选择ul子级的li元素ul>li{ ???//声明}

//选择紧接在div元素之后的所有p元素div+p{ ???//声明}<!--选择前面有div元素的每个p元素-->div~p{ ???<!--声明-->}

<!--选择input元素中type="text"的所有元素-->input[type="text"]{ ???<!--声明-->}<!--选择title属性包含单词“flower”的所有元素-->[title~=flower]{ ???<!--声明-->}<!--选择lang属性值以“en”开头的所有元素-->[lang|=en]{ ???<!--声明-->}<!--选择其src属性值以“https”开头的每个a元素-->a[src^="https"]{ ???<!--声明-->}<!--选择其src属性值以“.pdf”结尾的每个a元素-->a[src$=".pdf"]{ ???<!--声明-->}<!--选择其src属性值中包含“abc”子串的每个a元素-->a[src*="abc"]{ ???<!--声明-->}

<!--以下4个需按顺序设置，1、2、4一般用在a标签上--> ???<!--选择所有未被访问的链接-->a:link{ ???<!--声明-->} ???<!--选择所有已被访问的链接-->a:visited{ ???<!--声明-->} ???<!--选择鼠标指针位于其上的链接-->a:hover{ ???<!--声明-->} ???<!--选择活动链接（鼠标点中未松开时）-->a:active{ ???<!--声明-->}<!--选择属于其父元素的第二个子元素的每个p元素-->p:nth-child(2){ ???<!--声明-->}<!--选择属于其父元素第奇数项的子元素的每个p元素-->p:nth-child(odd){ ???<!--声明-->}<!--选择属于其父元素第偶数项的子元素的每个p元素-->p:nth-child(even){ ???<!--声明-->}<!--选择属于其父元素第3n+1项（n从0开始，公式可根据需求书写）的子元素的每个p元素-->p:nth-child(3n+1){ ???<!--声明-->}<!--选择属于其父元素的倒数第二个子元素的每个p元素-->p:nth-last-child(2){ ???<!--声明-->}<!--选择每个p元素的首字母-->p:frist-letter{ ???<!--声明-->}<!--选择每个p元素的首行-->p:frist-line{ ???<!--声明-->}

<!--前两个单冒号和双冒号都支持，低版本浏览器可能不识别双冒号--><!--在p元素之前插入一些内容-->p:before{ ???<!--声明-->}p::before{ ???<!--声明-->}<!--在p元素之后插入一些内容-->p:after{ ???<!--声明-->}p::after{ ???<!--声明-->}<!--应用于被用户选中的内容-->::selection{ ???<!--声明-->}