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;
}

![(https://gitee.com/ann-quiet-kerr/drawing-bed/raw/master/img/202202110950964.png)

*{
    margin: 0;
    padding: 0;
}
ul li:nth-child(n+3) {
    background-color: green;
} 
ul li:nth-child(-n+2){
    background-color: red;
}

选择器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;
}

posted on 2022-02-11 10:12 cookie的笔记簿阅读(74) 评论(0) 收藏举报