CSS选择器
选择器基本格式
selector{
属性:值;
属性1:值1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 定义一个给谁用的样式,即内部样式
<style>
div{
color: hotpink;
background-color: lightblue;
}
</style>
-->
<!-- 链接一个css的文件——外部样式 -->
<link rel="stylesheet" href="css/css选择器.css">
</head>
<body>
<ul>
<li>hello01</li>
<li>hello02</li>
<li>hello03</li>
<li>hello04</li>
<li>hello05</li>
</ul>
</body>
</html>
一、基本选择器
1.元素选择器:用元素名称直接选择
div{
color: hotpink;
background-color: lightblue;
}
特例:选择所有元素 *
*{
color: hotpink;
background-color: lightblue;
}
2.属性选择器
div[id]有id属性的div元素
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元素
div{
color: rgb(105, 188, 255);
background-color: rgb(89, 131, 32);
}
div[id*=aaxx]{
color: rgb(105, 188, 255);
background-color: rgb(89, 131, 32);
}
div[id^=aaxx]{
color: rgb(105, 188, 255);
background-color: rgb(89, 131, 32);
}
div[id$=aaxx]{
color: rgb(105, 188, 255);
background-color: rgb(89, 131, 32);
}
3.id选择器
//xx是类名
div#xx {
color: rgb(105, 188, 255); background-color: rgb(89, 131, 32);}
4.class选择器
.xx{
color: rgb(105, 188, 255);
background-color: rgb(89, 131, 32);
}
特例:结合选择器
p.xx{
color: rgb(105, 188, 255);
background-color: rgb(89, 131, 32);
}
5.包含选择器 or后代选择器 selector1 selector2 空格强调包含
div p{
color: rgb(105, 188, 255);
background-color: rgb(89, 131, 32);
}
6.子选择器 selector1>selector2 >强调父子
css复盘以及常见问题总结_后代和子代选择器的区别是什么-CSDN博客
div>p{
color: rgb(105, 188, 255);
background-color: rgb(89, 131, 32);
}
7.兄弟选择器 只招弟弟,不找哥哥,找所有弟弟用
/*第一个div之后的所有div*/
div+div{
}
/*第一个类名为axx的div后的相邻div弟弟 */
.axx+div{
}
/*以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素*/
div+p
{
background-color:yellow;
}
特例:找所有弟弟
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
.cc~*{
div~p
{
background-color:yellow;
}
8.选择器组合 selector1,selector2,selector3...
表示或者
p,
div a,
span{
}
二、伪元素选择器
1.首字母加样式 ::first-letter 只能用于竖着布局的元素,不能横着,比如span
div::first-letter{
color:hotpink;
background-color: lightblue;
}
2.首行加样式 ::first-line 只能用于竖着布局的元素,不能横着,比如span
div::first-line{
color:hotpink;
background-color: lightblue;
}
让每一个英文单词裂开【英语无法自动分词,如果是全部打aaaa的话】
div{
word-break:break-all;
}
3.在前边插入 ::before
必须要写content,需要借此开辟空间
div::before{
content:"aaa";
color:hotpink;
background-color: lightblue;
}
4.在后边插入 ::after
div::after{
content:"aaa";
color:hotpink;
background-color: lightblue;
}
三、伪类选择器
1.结构性伪类选择器
$表示一个数字位
:nth-child()
只认数字,如果类型刚好符合,则被选中
括号里可以是数字n,n从1开始
也可以是英文单词odd 奇数 even偶数
还可以是表达式 ,比如2n+1,n从0开始
找第一个:nth-child(1)=first-child
找最后一个:last-child
倒着数 :nth-last-child()
ul li:nth-child(even){
}
ul li:nth-child(2n+1){
}
:nth-of-type()
既认数字也认类型,找同类型下的第n个元素
li:first-of-type=nth-of-type(1)
li:last-of-type
倒着:li:nth-last-of-type(){
ul li:nth-of-type(3n+2){
color:
background:
}
2.ui状态伪类选择器
:hover 鼠标悬停状态
ul li:hover{
}
:focus 焦点状态
ul li:focus{
}
:checked选中状态
input:checked{
box-shadow:3px 3px 3px red
}
其他伪类选择器
:not(.类名)
ul li:not(.java){
}
ul li:not(.java):not(.php){
}
四、选择器的优先级规则
1.选择器写得越长(越准确),优先级越高
2.优先级高低 id选择器>class选择器>元素选择器
3.同级别长度下,css代码按照顺序执行,不同效果会叠加,后边的效果会把前面的覆盖掉
4.终极规则:以上规则使用大部分场景,特殊场景不适用,自行测试