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{
    <!--声明-->
}