CSS3：选择器

CSS3：选择器

1. 属性选择器

1.1. 包含指定属性的标签

<style>
    /* button标签并且存在disable属性的标签*/
    button[disabled] {
        color: red;
    }
</style>
<button disabled="disabled">按钮1</button>
<button>按钮2</button>

1.2. 属性值等于指定值标签

<style>
    /* button标签并且存在disable属性值为disable的标签*/
    button[disabled="disabled"] {
        color: red;
    }
</style>
<button disabled="disabled">按钮1</button>
<button disabled="">按钮2</button>

1.3. 属性值以指定值开头的标签

<style>
    /*button标签并且class属性值以btn开头的标签*/
    button[class^="btn"] {
        color: red;
    }
</style>
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>

1.4. 属性值以指定值结尾的标签

<style>
    /*button标签并且class属性值以btn结尾的标签*/
    button[class$="btn"] {
        color: red;
    }
</style>
<button class="1btn">按钮1</button>
<button class="2btn">按钮2</button>

1.5. 属性值包含指定值的标签

<style>
    /*button标签并且class属性值包含btn的标签*/
    button[class*="btn"] {
        color: red;
    }
</style>
<button class="1btn1">按钮1</button>
<button class="2btn2">按钮2</button>

2. 结构伪类选择器

2.1. 选择第1个

<style>
    /* 选择ul下第1个标签并且是li标签*/
    ul li:first-child {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.2. 选择最后1个

<style>
    /* 选择ul下最后1个标签并且是li标签*/
    ul li:last-child {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.3. nth-child

2.3.1. 选择指定序号

<style>
    /* 选择ul下第2个标签并且是li标签*/
    ul li:nth-child(2) {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.3.2. 选择偶数（even）

<style>
    /* 选择ul下偶数标签并且是li标签*/
    ul li:nth-child(even) {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.3.3. 选择奇数（odd）

<style>
    /* 选择ul下奇数标签并且是li标签*/
    ul li:nth-child(odd) {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.3.4. 按公式选择

n从0开始

2.3.4.1. 公式选择偶数标签

<style>
    /* 选择ul下偶数标签并且是li标签*/
    ul li:nth-child(2n) {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.3.4.2. 公式选择奇数标签

<style>
    /* 选择ul下奇数标签并且是li标签*/
    ul li:nth-child(2n+1) {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.3.4.3. 公式选择3的倍数标签

<style>
    /* 选择ul下序号是3倍数并且是li标签*/
    ul li:nth-child(3n) {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.3.4.4. 公式选择前面3个标签

<style>
    /* 选择ul下前3个并且是li标签*/
    ul li:nth-child(-n+3) {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.3.4.5. 公式选择后面3个标签

<style>
    /* 选择ul下后3个并且是li标签*/
    ul li:nth-child(n+3) {
        background-color: pink;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2.4. 选择指定类型第一个

<style>
    /* 选择div下第一个span标签*/
    div span:first-of-type {
        background-color: pink;
    }
</style>
<div>
    <p>p1</p>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
</div>

2.5. 选择指定类型最后一个

<style>
    /* 选择div下最后一个span标签*/
    div span:last-of-type {
        background-color: pink;
    }
</style>
<div>
    <p>p1</p>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
</div>

2.6. nth-of-type

n从0开始，nth-of-type功能和nth-child一样，只是先过滤类型在选择，而nth-child是先选择在检查类型
nth-of-type其他按例参考nth-child

<style>
    /* 选择div下第2个span标签*/
    div span:nth-of-type(2) {
        background-color: red;
    }
</style>
<div>
    <p>p1</p>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
</div>

3. 伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before和after必须有content属性
• before和after会创建一个元素，属于行内元素

3.1. ::before

<style>
    div {
        width: 400px;
        height: 100px;
        border: 1px solid red;
    }
    /* 在div内容前面添加一个行内元素,内容是'before内容'*/
    div::before {
        content: 'before内容'
    }
</style>
<div>
    div内容
</div>

3.2. ::after

<style>
    div {
        width: 400px;
        height: 100px;
        border: 1px solid red;
    }
    /* 在div内容前面添加一个行内元素,内容是'before内容'*/
    /*div::before {*/
    /*    content: 'before内容'*/
    /*}*/
    /* 在div内容后面添加一个行内元素,内容是'after内容'*/
    div::after {
        content: 'after内容'
    }
</style>
<div>
    div内容
</div>