2：属性选择器 + 结构伪类选择器 + 伪元素
一 属性选择器
使用要点
属性选择器、标签选择器、伪类选择器权重都是10
1）直接写属性 [ 最基本的使用 ]
/*所有按钮改为小手*/ button { cursor: pointer; } /*给添加禁用的按钮修改为默认小箭头*/ 选择的是：既是 button 又有 disabled 属性的元素 button[disabled] { cursor: default; } <button>按钮1</button> <button>按钮2</button> <button disabled="disabled">按钮3</button> <button disabled="disabled">按钮4</button>
2）属性等于值
input[type="text"] { background: pink; } //选择出属性值是text的所以input <input type="text"> <input type="text"> <input type="password"> <input type="password">
3）属性值以某个值开头
div { width: 300px; height: 300px; border: 1px solid red; } /*所有类名为i开头的div被选中*/ div[class^="i"] { background: pink; } <div class="icon1"></div> <div class="icon2"></div> <div class="icon3"></div>
4）属性值以某个值结尾
div { width: 300px; height: 300px; border: 1px solid red; } /*所有类名为1结尾的div被选中*/ div[class$="1"] { background: pink; } <div class="icon1"></div> <div class="icon2"></div> <div class="icon3"></div>
5）属性值中包含某个值
div { width: 300px; height: 300px; border: 1px solid red; } /*所有类名为1结尾的div被选中*/ div[class*="icon"] { background: pink; } <div class="icon1"></div> <div class="icon2"></div> <div class="icon3"></div>
二 结构伪类选择器 child 和 of-type
1）选择第一个
div: first-child {} 选择第一个div
2）选择最后一个
div: last-chilc {} 选择最后一个
3）选择第 N 个
div: nth-child(N) {} N可以是数字、关键字、公式 //1 N是数字：数字是几就代表选择第几个 //2 N是关键字： even 偶数 odd 奇数 //3 N是公式 公式计算从0开始
偶数行 [ 2n ]
n 2 * 0 = 0 2 * 1 = 2 2 * 2 = 4 2 * 3 = 6 3 * 4 = 8 选中了 2 4 6 8 10 偶数行 [ 0和不存在的会自动忽略 ]
5n = 5 10 15 20
奇数行 [ 2n + 1 ]
n 2 * 0 = 0+1 = 1 2 * 1 = 2+1 = 3 2 * 2 = 4+1 = 5 2 * 3 = 6+1 = 7 3 * 4 = 8+1 = 9 选中了 1 3 5 7 9 11 奇数行
从某个值开始到最后 [ n + 5 ]
n+5 = 0+5 = 5 从第五个开始 后面的全选中
选择前5个 [ -n + 5 ]
-n + 5 选中前5个
-0 + 5 = 5
-1 + 5 = 4
-2 + 5 = 3
-3 + 5 = 2
-4 + 5 = 1
-5 + 5 = 0
nth-child() 只按照顺序选 它不管孩子类型是否一致 [ 重点 ]
三 选择指定类型的元素 [ of-type ]
选择第一个
div span:first-of-type {} 选择div下span元素的第一个 其他元素忽略掉
最后一个
div span:last-of-type {} 选择div下span元素的最后一个 其他元素忽略
第 N 个
div span: nth-of-type(2) 选择div下span元素的第二个 其他元素忽略
N的使用方法和 child 一样的
案例
<style>
/*选中了p元素*/
div :first-child {
background: pink;
}
/*选中了第一个span*/
div span:first-of-type {
background: #666666;
}
</style>
<div>
<p>p1</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<div>DFDF </div>
</div>
执行结果
三 伪元素选择器
//1 伪元素是两个冒号 伪类是一个冒号 //2 伪元素主要的两个 before 和 after
//3 在元素 内容的前面 或 后面 插入内容
使用注意点
//1 bafore 和 after 必须有 content属性 //2 before在内容之前 after在内容之后 //3 before 和 after 都创建了一个行内元素 [元素就是盒子 可以设置大小] //4 在dom中看不到创建的元素 所有称为 伪元素 //5 伪元素和标签选择器一样 权重是1
<style> div { width: 150px; height: 100px; border: sienna solid 1px; } div::before, div::after { display: inline-block; width: 60px; height: 60px; background: pink; text-align: center; content: "前"; } div::after { content: "后"; } </style>
<div>我</div>
执行结果
