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){
}
层次选择器代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
.nav>p{
color: red;
}
a{
color: red;
}
</style>
</head>
<body style="color: red;">
<a href="#">a标签</a>
<div class="nav">
<p>p1</p>
<p>p2
<ul>
<li>
<p>li1</p>
</li>
<li>
<p>li1</p>
</li>
<li>
<p>li1</p>
</li>
</ul>
</p>
</div>
</body>
</html>
结构伪类选择器代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<!---->
<span>span</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>
<span>span2</span>
<p>p4</p>
<p>p5</p>
<span>span2</span>
<p>p6</p>
</div>
<p>p7</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
<div class="div2">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</div>
</body>
</html>
属性选择器代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
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;
}
</style>
</head>
<body>
<p id="user" name="p1">段落</p>
<student type="stu">学生</student>
<form action="" method="get">
用户名称：<input type="text" placeholder="请输入userName" name="userName" value=""><br />
用户密码：<input type="password" placeholder="请输入密码" name="userPwd"><br />
<input type="submit" value="提交">
</form>
</body>
</html>