基本选择器
1.元素选择器
语法:元素名{属性:属性值;}
特点:选中页面上所有对应元素名元素
h1{
color:red;
}
2.类选择器
语法:类名{属性:属性值}
特点;选中页面上拥有该类名的元素,一个元素可以有多个类名。
.box{
width:200px;
height:200px;
}
命名规范
不可以纯数字或数字开头
区分大小写
包含数字、字母、下划线、连字符
望名知意
3.id选择器
语法:#id名{属性:属性值}
特点:一个元素只能有一个id,一个id名只能在页面上出现一次
#box1{
width:200px;
height:200px;
}
4.通配符
语法:*{属性:属性值;}
特点:选中页面上所有的元素
*{
padding:0;
margin:0;
}
5.属性选择器
语法:[属性=“属性值”]{属性:属性值;}
特点:方括号里可以只写属性,也可以写属性属性值
input[type="text"]{
outline: none;
}
6.伪类选择器
-
选中第一个元素
语法:h1:first-child{属性:属性值}
section>h1:first-child{
color: blue;
}
-
选中最后一个元素
语法:h1:last-child{属性:属性值}
section>h1:last-child{
background-color: aqua;
}
-
选中第n个元素 1
语法:h1:nth-child(){属性:属性值;}
特点:直接写数字关键字 odd 奇数 even 偶数an+b n从0开始
注意:如果兄弟元素名不同,则有可能选不中
section>h1:nth-child(3){
font-size: 30px;
}
section>h1:nth-child(odd){
font-size: 30px;
}
section>h1:nth-child(3n+1){
font-size: 30px;
}
选中前三个
section>h1:nth-child(-n+3){
font-size: 30px;
}
-
选中第n个元素2 使用场景:兄弟元素不同时
语法:h1:nth--of-type(){属性:属性值;}
特点:直接写数字,关键字 odd 奇数 even 偶数,an+b n从0开始
/* aside子元素section的第二个 */
aside>section:nth-of-type(2){
width: 200px;
height: 200px;
background-color: aqua;
}
-
否定选择器
语法:p:not(:nth-child(5)){属性:属性值}
特点:除了第五个其它都被选中
header>a:not(:nth-child(5)){
text-decoration: none;
color: blue;
}
-
a标签配套伪类选择器
爱恨原则 love hate lv
-
访问前 herf 属性要有值
a:link{
color: brown;
}
访问后
a:visited{
color: blueviolet;
}
鼠标悬停 移入
a:hover{
color: blue;
}
鼠标点击时
a:active{
color: aquamarine;
}
7.伪元素选择器
-
在元素之前添加内容
特点:如果要设置宽高,需要先display:block;是作为h3的子元素添加
语法:h3::before{content:属性:属性值;}
h3::before{
content: '在之前';
color: blue;
font-size: 30px;
}
-
在元素之后添加内容
语法:h3::after{content:属性:属性值;}
h3::after{ content: '在之后'; color: azure; font-size: 30px;}
-
选中第一行
语法h4::first-line{属性:属性值;}
h4::first-line{
color: blanchedalmond;
}
-
选中第一个字
语法h4::first-letter{属性:属性值;}
h4::first-letter{
font-size: 40px;
}
-
选中用户选择部分
语法:h4::selection{属性:属性值;}
h4::selection{
background-color: blue;
}
组合型选择器
1.子级选择器
语法:父元素>子元素{属性:属性值;}
特点:只能一层一层选
div>section>p{
font-size: 20px;
color: azure;
}
2.后代选择器
语法:祖先元素 后代元素{属性:属性值;}
footer a{
font-size: 29px;
}
3.兄弟选择器1
语法:p+div{属性:属性值;}
特点:选中p标签后的第一个元素div
p+div{
width: 200px;
height: 200px;
background-color: blueviolet;
}
4.兄弟选择器2
语法:p~div{属性:属性值;}
特点:选中p标签后的所有兄弟元素div
p~div{
width: 200px;
height: 200px;
background-color: blueviolet;
}
5.并集选择器
语法:h1,div>p,.box{属性:属性值;}
特点:逗号前后是独立的选择器
.box>p,h6{
font-size: 40px;
color: black;
}