学习CSS中,我们会学到很多中CSS选择器,那么我们如何记住,并区分,什么时候使用什么样的选择器呢,在这里我整理了CSS常见的选择器,以及知识点,方便大家使用
1.ID选择器
CSS: #elem{}
HTML:ID= ‘elem’
注意:1.在一个页面中,ID值是唯一的
2.命名范围,字母 _ -数字(命名的第一位不能是数字)
3.命名方式,驼峰式,下划线式,短线式
驼峰式:searchButton(小驼峰) 第二个字母大写(常用)
SearchButton(大驼峰) 两个单词的首字母都是大写
短线写法:Search-button(W3C 推荐写法)
下划线写法:search_button
快捷创建:div #div1 +tab键
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#div1{
width: 300px;
height: 300px;
background-color: red;
}
#div2{
background-color: blue;
}
#div3{
background-color: brown;
}
.dog{
background-color: antiquewhite;
}
p.dog{
background-color: black;
}
</style>
<body>
<div id="div1">
这是一个块
</div>
<div id="div2">
这又是一个块
</div>
<div id="div3">又有一个块</div>
<div class="dog">12351241</div>
</body>
</html>
2.CLASS选择器
css:.elem{}
HTML:class =“elem”
例子:
.dog{
background-color: antiquewhite;
}
.content{
font-size:30px
}
<div class="dog">12351241</div>
<div class="dog">sadbasdbsa</div>
<p class="dog content">sa12321</div>
全部都可以应用此类属性
注意:1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序
4.标签+类的写法: p.dog{background-color: black;}
3.标签选择器(元素选择器)
css:div{}
html:`<div>`
使用场景:
用法1:修改标签原有的属性
用法2:复杂的选择器中
4.群组选择器(分组选择器)
css: div,p,span{}
div,#text,.dog{background :red}
可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用
5.通配符选择器
*{} -> div,ul,li,p,h1
尽量避免使用通配符选择器,因为会给所有的标签添加样式。慎用
使用场景:
去掉所有标签的默认样式
6.层次选择器
后代:M N:只是寻找M后的N 以及M后的所有N 结构 包括父子的父子
父子:M > N:寻找M后的N 不包括父子的父子 只有一层关系,不关系后代
兄弟:M ~ N:当前M后的所有N标签,就是M~N 之间的标签
相邻:M + N:当前M相邻的N标签 只会选择后面相邻的一个标签
7.属性选择题
M[attr] M元素选择指定为attr属性的集合
完全匹配: M[attr=value] M元素选择指定为attr属性和value值的集合
部分匹配: M[attr*=value] M元素选择指定为attr属性并且包含值为value的集合
起始匹配: M[attr^=value] M元素选择指定为attr属性并且起始值为value的集合
结尾匹配: M[attr$=value] M元素选择指定为attr属性并且结束值为value的集合
组合匹配: M[attr1][attr2] M元素选择满足多个属性的集合
8.伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加
M(选择器):伪类{}
:link 访问前的样式(只能添加给a标签)
:visted 访问后的样式(只能添加给a标签)
:hover 鼠标移入时的样式(可以添加给所有的标签)
div{
width: 200px;
height: 200px;
background: red;
}
div:hover{
background: blue;
} 鼠标移入时由红色变为蓝色
:active 鼠标按下时的样式(可以添加给所有的标签)
注意:如果四个伪类都生效的,一定要注意顺序:L V H A
一般网址值这样设置:a{}a:hover
例子:a{color:gray;}
a:hover{color red}
:after 通过伪类的方式给元素添加一些文本内容 例:div:after{content: "world";} 在div中内容后面添加内容world
:before 通过伪类的方式给元素添加一些文本内容 例:div:before{content: "world";} 在前面添加内容
注:为了方便添加的文本进行单独的属性
例:div:after{content:"world"; color:red;}
:checked 用于选择框 选择过后改变属性
:disableed 只有不能操作是,才有次类样式
:focus 输入光标的样式
结构性伪类选择器
:nth-of-type()
例:li:nth-of-type(2){background: red;}
列表li中第2列应用样式 (1)第一项 (2)第二项 (n) 代表0~无穷大 (2n)(2n+1)更换换色
:nth-child()
:first-of-type 第一个
:lsat-of-type 最后一个
only-of-type 只有一个时的样式
:nth-of-type()和:nth-child()的区别
type:类型
child:孩子 在类型中的第几个应用数学