前端之CSS选择器

一、前言

        从本期我们就来更新CSS的内容，往期的内容可以到前端专栏里去看，也可以点下面的链接

• HTML常用内容：https://blog.csdn.net/AWSDN/article/details/136112174?spm=1001.2014.3001.5501
• CSS前言：https://blog.csdn.net/AWSDN/article/details/136127534?spm=1001.2014.3001.5501

        我打算从4个部分来讲CSS的内容，分别是选择器、盒子模型、布局、style样式。那么本篇就来介绍CSS最基础的选择器部分。顾名思义，选择器就是对HTML中已经存在的标签进行选择，可以看做电脑的鼠标光标，选中才能对该标签进行调整装饰，下面我们就对各种选择器进行介绍。

二、内容

1、基本选择器

（1）元素选择器

div{background:yellow;}
*{background:yellow;} *代表所有元素（包括body，head等元素）

（2）属性选择器:E[ ]{ }

div[id]{
    background:yellow;
} div中含有id属性的标签(class以及自定义标签与id使用方式相同)
div[id=xx]{} 含有id属性且id为xx的div元素
div[id*=xx]{} 含有id属性且id包含xx的div元素
div[id^=xx]{} 含有id属性且id以xx为开头的div元素
div[id$=xx]{} 含有id属性且id为xx为结尾的div元素

（3）id/class选择器

id默认为唯一标识符，class为分组符，且两者开头最好为字母

#xx{
    background: yellow;
} 只包含id=xx的所有元素
div#xx{
    background:yellow;
} 只包含id=xx的div元素
简化[class=xx]功能
.xx{
    background:yellow;
} 只包含class=xx的所有元素
div.xx{
    background:yellow;
} 只包含class=xx的div元素

（4）包含选择器

selector1 selector2{} 空格代表包含关系,不一定父子关系，祖孙也可以

div p{
    background: yellow;
}
.aa .bb{
    background: yellow;
}

（5）子选择器

• 要求必须是父子
• selector1>selector2{}

div>p{
    background: yellow;
}
.aa>.bb{
    background: yellow;
}

（6）兄弟选择器

selector1~selector2{} 匹配selector1对应元素后面selector2对应元素（只向下找，找弟弟，不包括哥哥）

.php~.java{
    background: yellow;
}
.php~*{
    background: yellow;
} *代表所有弟弟元素
.java{
    background:yellow;
}
.php~.java{
    background:white;
} 要找哥哥先找所有在减去弟弟

（7）选择器组合

selector1,selector2,selector3{}

a,div,span,p{
    background: yellow;
}

2、伪元素选择器

（1）选择首字母

span元素不能用(div等块级元素可以用，span等内联级元素不能用）

div::first-letter{
    background: yellow;
    font-size: 30px;
}

（2）选择首行

• 应用于块级元素
• 不受缩进影响，不管页面大小只影响第一行

div::first-line{
    background: yellow;
    font-size: 30px;
}

（3）在前/后面加东西

content必须有，哪怕内容为

div::before{
    content: "hi"; 
    background: yellow; 
    只针对添加内容做修改
}
div::before{
    content: "";
    background-image: url("目录"); 背景图片（可调整图片大小）(要加display: block;转化为块
    级元素）
}
div::before{
    content: url("目录"); 背景图片（不可调整图片大小）
}
div::after{
    content: "hi"; 加文字
    background: yellow; 只针对添加内容做修改
}

3、伪类选择器

（1）结构型伪类选择器

• nth/first/last-child(数字/表达式（正负n)/odd/even)
• nth-last-child（） 倒数
• nth/first/last-of-type（） 在相应标签中查找

ul li:nth-child(1){ nth-child(n)找第n个位置的元素 （n大于等于1）
background: red;
}
ul li:first-child{ nth-child(1)=first-child
background: red;
}
ul li:last-child{ last-child找最后一个
background: red;
}
ul li:nth-child(2n+1){ nth-child(2n+1)或（-n+2）也可以写表达式n从0开始
background: red;
}
ul li:nth-child(odd){ odd找奇数，even找偶数（正向查找）
background: red;
}
ul li:nth-last-child(1){ nth-last-child(n)倒数第n个；nth-last-child(1)=last-child
background: red;
}
ul li:nth-child(1){ 要求同时满足正数第一个以及为li标签
background: red;
}
ul li:nth-of-type(1){ 表示在li标签中查找第一个
background: red;
}
ul li:first-of-type{ nth-of-type(1)=first-of-type
background: red;
}
ul li:last-of-type{ nth-last-of-type(1)=last-of-type倒着查找第一个
background: red;
}

（2）UI状态伪类选择器

①、:hover鼠标悬停状态

div:hover{
}

②、:focus焦点状态

输入框输入

input: focus{
}

③、:checked选中状态

单选复选框

input:checked{
box-shadow: 2px 3px 4px red; 阴影特效
}

（3）其它伪类选择器

:not()排除选择器

li:not(.q):not(#m){
background: red;
}

4、选择器优先级原则

1. 选择器写的越长越准确优先级越高
2. 优先级高低：id选择器>class选择器>元素选择器
3. 同级别同长度下：css代码按照顺序执行，后面的会覆盖前面的（同一样式覆盖，不同样式叠加）
4. 以上规则适用于绝大多数场景，自行测试不适用场景

三、总结

CSS选择器是最基础的东西了，一定要熟练掌握。如果有错误欢迎指正，另外如果本文对你有帮助的话，希望关注点赞支持，谢谢各位😘😘😘