CSS选择器的简单整理

1. 标签选择器

直接选择标签

p{
    //声明
}

2. 类选择器

给元素设置一个className，通过.className选择到相同className的元素

• • className必须以字母开头
  • 区分大小写
  • 出现多次

.className{
    //声明
}

3. id选择器

给元素设置一个id，通过#id选择到相应id的元素

• • id必须以字母开头
  • 区分大小写
  • 只出现一次

#id{
    //声明
}

. 通配符选择器

• • 通过*{}选择页面中所有元素
  • 一般使用通配符选择器清除默认样式

*{
    //声明
}

5. 组合选择器

将不同的选择器组合起来（用逗号隔开）一起选中

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

6. 后代选择器

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

7. 子选择器

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

8. 兄弟选择器

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

9. 属性选择器

<!--选择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"]{
    <!--声明-->
}

10.伪类选择器

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

11.伪元素选择器

<!--前两个单冒号和双冒号都支持，低版本浏览器可能不识别双冒号-->

<!--在p元素之前插入一些内容-->
p:before{
    <!--声明-->
}
p::before{
    <!--声明-->
}
<!--在p元素之后插入一些内容-->
p:after{
    <!--声明-->
}
p::after{
    <!--声明-->
}
<!--应用于被用户选中的内容-->
::selection{
    <!--声明-->
}