前端学习笔记——CSS选择器

时间:2022-09-09 04:00:10

学习css选择器之前我们先了解下css规则:

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

前端学习笔记——CSS选择器

选择器通常是需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

1、id选择器、class选择器、标签选择器

/*id选择器*/
/* #代表通过id选择器查找*/ #i1{
height: 48px;
background-color: red;
} /* class选择器 最常用 */
/*. 代表通过class选择器查找*/ .div{
height: 48px;
background-color: aqua;
} /* 标签选择器 */
/*标签名 代表通过标签选择器查找*/ span{
color: red;
background-color: blue;
}

2、层级选择器(空格)

/* 标签层级选择器 */
span div{
color: aqua;
background-color: red;
} /* class 层级选择器*/
.c1 div{
background-color: #336699;
height: 48px;
} /* id 层级选择器*/
#i2 div{
background-color: black;
height: 48px;
}

3、组合选择器(逗号)

/* id组合选择器,z1 z2 z3 共用一套css样式*/
#z1,#z2,#z3{
background-color: chocolate;
height: 48px;
} /* class组合选择器,z1 z2 z3 共用一套css样式*/
.s1,.s2,.s3{
background-color: darkmagenta;
height:48px;
}

4、属性选择器(中括号)

/* 属性选择器,对选择到的标签再通过属性进行筛选,可以和层级选择器连用*/
div[s='dsx']{
background-color: darkred;
height: 48px;
}