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 {
     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 {
     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 {
     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 {
             150px;
            height: 100px;
            border: sienna solid 1px;
        }
        div::before,
        div::after {
            display: inline-block;
             60px;
            height: 60px;
            background: pink;
            text-align: center;
            content: "前";
        }
        div::after {
            content: "后";
        }
</style>
<div>我</div>

 执行结果