前端学习笔记——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;
}