name选择器_这个笔记《CSS中层次、属性、结构伪类选择器》，轻松搞定选择器...

层次选择器

注意: 这些选择器最终的控制对象都是F!

实际应用中, 后代选择器和子元素选择器是使用得较多的!

属性选择器

结构伪类选择器

E:first-child 选择的是在同级元素中排第1位的E元素

E:last-child 选择的是在同级元素中排最后1位的E元素

E:nth-child(n) 选择的是在同级元素中排第n位的E元素

E:first-of-type 选择的是同级E元素中排第1位的E元素

E:last-of-type

E:nth-of-type

条纹状表格:

tr:nth-child(2n+1){

}

层次选择器代码案例：

层次选择器

.nav>p{

color: red;

}

a{

color: red;

}

a标签

p1

p2

• li1

• li1

• li1

结构伪类选择器代码案例：

结构伪类选择器

.div2 li:first-child{

color: red;

}

.div2 li:nth-child(2){

color: red;

}

.div2 li:last-child{

color: red;

}

/*这种方式是同级中找，不一定是指定的标签。*/

p:first-child{

color: red;

}

/*指定同级标签中找*/

p:first-of-type{

color: red;

}

p:last-of-type{

color: red;

}

span

p1

p2

p3

span2

p4

p5

span2

p6

p7

• li1
• li2
• li3
• li4

• li1
• li2
• li3
• li4

属性选择器代码案例：

属性选择器

p[name]{

color: red;

}

/*input[type=text]{

border: 1px solid red;

}*/

/*input[name^=user]{

border: 1px solid red;

}*/

/* 不要怎么做

* student[type=stu]{

color: red;

}*/

/*input[name$=Name]{

border: 1px solid red;

}*/

input[name*=r]{

border: 1px solid red;

}

段落

学生

用户名称：

用户密码：