CSS3新增选择器和属性_<div class="wrap" id="pjbox"> <div class="box1"> <-CSDN博客

本文链接：https://blog.csdn.net/are_gh/article/details/111566811

CSS3新增选择器

属性选择器

以box开头

<style>
    div[class^="box"] {
        background:red;
    }
</style>
<div class="box">box</div>
<div class="abox">abox</div>
<div class="boxa">boxa</div>
<div class="aboxa">aboxa</div>

以box结尾

<style>
    div[class$="box"] {
        background:red;
    }
</style>
<div class="box">box</div>
<div class="abox">abox</div>
<div class="boxa">boxa</div>
<div class="aboxa">aboxa</div>

包含box

<style>
    div[class*="box"] {
        background:red;
    }
</style>
<div class="box">box</div>
<div class="abox">abox</div>
<div class="boxa">boxa</div>
<div class="aboxa">aboxa</div>

结构性伪类选择器

:first-child 选择器：用于选取属于其父元素的首个子元素的指定选择器

<style>
    li:first-child {
        background:red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:last-child 选择器：用于选取属于其父元素的最后一个子元素的指定选择器

<style>
    li:last-child {
        background:red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-child(n)选择器：匹配属于其父元素的第n个子元素，n可以是数字、关键字或公式

<style>
    li:nth-child(2) {
        background:red;
    }
    li:nth-child(even) {
        background:red;
    }
    li:nth-child(odd) {
        background:red;
    }
    li:nth-child(2n) {
        background:red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-last-child()选择器：匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键字或公式

<style>
    li:nth-last-child(2) {
        background:red;
    }
    li:nth-last-child(even) {
        background:red;
    }
    li:nth-last-child(odd) {
        background:red;
    }
    li:nth-last-child(3n) {
        background:red;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5<