CSS3新增选择器——属性选择器+结构伪类选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/linshi.css">
<title>Document</title>
</head>
<body>
<input type="text">
<div class="icon1">红儿</div>
<div class="icon2">橙儿</div>
<div class="icon3">黄儿</div>
<div class="icon4">绿儿</div>
<div class="icon5">青儿</div>
<div class="icon6-last">蓝儿</div>
<div class="icon7-last">紫儿</div>
</body>
</html>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text]{
color: red;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon]{
color: red;
}
div[class$=last]{
color: purple;
}
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
div.icon1{
color: red;
}
div.icon2{
color: orange;
}
div.icon3{
color: yellow;
}
div.icon4{
color: green;
}
div.icon5{
color: darkgreen;
}
div.icon6-last{
color: skyblue;
}
div.icon7-last{
color: purple;
}
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/linshi.css">
<title>Document</title>
</head>
<body>
<ul>
<li>我是红儿</li>
<li>我是橙儿</li>
<li>我是黄儿</li>
<li>我是绿儿</li>
<li>我是青儿</li>
<li>我是蓝儿</li>
<li>我是紫儿</li>
</ul>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/* 1. 选择ul里面的第一个孩子 小li */
ul li:first-child{
color: red;
}
/* 2. 选择ul里面的最后一个孩子 小li */
ul li:last-child{
color: purple;
}
*{
margin: 0;
padding: 0;
}
/* 1. 选择ul里面的第一个孩子 小li */
ul li:first-child{
color: red;
}
/* 2. 选择ul里面的最后一个孩子 小li */
ul li:last-child{
color: purple;
}
/* 3. 选择ul里面的第2个孩子 小li */
ul li:nth-child(2){
color: orange;
}
ul li:nth-child(3){
color: yellow;
}
ul li:nth-child(4){
color: green;
}
ul li:nth-child(5){
color: darkgreen;
}
ul li:nth-child(6){
color: skyblue;
}
选择器nth-type-of与nth-child()的区别：
nth-child()把所有盒子排好序后，再发现前面的是p不是div，便没有效果
nth-type-of先找到div的盒子，再次排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/linshi.css">
<title>Document</title>
</head>
<body>
<ul>
<li>我是红儿</li>
<li>我是橙儿</li>
<li>我是黄儿</li>
<li>我是绿儿</li>
<li>我是青儿</li>
<li>我是蓝儿</li>
<li>我是紫儿</li>
</ul>
<section>
<p>saobaxing</p>
<div>wangmu</div>
<div>heiying</div>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
