css选择器

id选择器

    <style>
        #box{
            width: 200px;
            height: 200px;
            background: #f00;            
        }
    </style>
    <div id="box"></div>

类选择器

    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #f00;            
        }
    </style>
    <div id="box"></div>

标签选择器

    <style>
        div{
            width: 200px;
            height: 200px;
            background: #f00;            
        }
    </style>
    <div id="box"></div>

后代选择器

后代选择器是可以选择某个元素的所有后代，包括儿子，孙子，重孙子,比如下面的代码中box2中的p标签是box1的孙子元素，用后代选择器也可以选中。

    <style>
        #box1 p {
            color: #f00;
        }
    </style>
    <div id="box1">
        <div id="box2">
            <p>文字</p>
            <p>文字</p>
        </div>
        <p>文字</p>
        <p>文字</p>
    </div>

子选择器

子选择器是选择某个元素的直接后代，就是儿子元素。子选择器通过 > 来表示元素的关系。下面的代码中box2中的两个p标签不会被选中

    <style>
        #box1>p {
            color: #f00;
        }
    </style>
    <div id="box1">
        <div id="box2">
            <p>文字</p>
            <p>文字</p>
        </div>
        <p>文字</p>
        <p>文字</p>
    </div>

相邻兄弟选择器

相邻兄弟选择器是选择某个元素的紧跟在后面的兄弟元素。下面的代码中 只有文字4所在的这个p标签会被选中。文字1的p标签不会被选中。

    <style>
        #box2+p {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p>文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
        </div>
        <p>文字4</p>
        <p>文字5</p>
    </div>

下面这段代码中文字4所在的p标签和box2之间隔了一个div元素。则文字4所在的p标签不是box2的相邻兄弟元素了。所以文字4所在的p标签不会被选中

    <style>
        #box2+p {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p>文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
        </div>
        <div></div>
        <p>文字4</p>
        <p>文字5</p>
    </div>

通用兄弟选择器

通用兄弟选择器 选择某个元素后面的所有的具有某个特征的兄弟元素。下面的代码是选择box2后面的兄弟元素中的p标签元素。

    <style>
        #box2~p {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p>文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
        </div>
        <div></div>
        <p>文字4</p>
        <p>文字5</p>
    </div>

序号选择器

:first-child 第一个子元素

:first-child 要和 id选择器、类选择器、标签选择器合起来使用。下面的代码选择了p标签，同时这个p标签还要是它自己的父元素的第一个子元素。下面的文字1所在的p标签是box1的第一个子元素，所以会被选中。文字2所在的p标签虽然它是box2的第一个p标签子元素，但不是box2的第一个子元素，所以文字2所在的p标签不会被选中

    <style>
        p:first-child {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p>文字1</p>
        <div id="box2">
            <div></div>
            <p>文字2</p>
            <p>文字3</p>
        </div>

        <p>文字4</p>
        <p>文字5</p>
    </div>

:last-child 最后一个子元素

通:first-child一样 文字5所在的p标签会被选中，但是文字3所在的p元素不会被选中

    <style>
        p:last-child {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p class="p2">文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
            <div></div>
        </div>

        <p class="p1">文字4</p>
        <p class="p1">文字5</p>
    </div>

:nth-child(n) 第n个子元素。

n为数字或者计算结果为数字的表达式，如：2n+1,表达式中的n从0开始
下面的代码选择p标签，同时这个p标签还要是它父元素的第二个子元素。所以文字3所在的p标签会被选中

    <style>
        p:nth-child(2) {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p class="p2">文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
            <div></div>
        </div>

        <p class="p1">文字4</p>
        <p class="p1">文字5</p>
    </div>

下面的代码中表达式为2n+1,n从0开始 那就是选择p标签同时这个p标签还是它父元素的奇数子元素。所以文字1，文字2， 文字4所在的p标签会被选中。2n+1还可以写成odd。同理p:nth-child(2n)选择偶数子元素。所以文字3，文字5所在的p标签会被选中。2n还可以写成even

    <style>
        p:nth-child(2n+1) {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p class="p2">文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
            <div></div>
        </div>

        <p class="p1">文字4</p>
        <p class="p1">文字5</p>
    </div>

:nth-last-child(n) 倒数第n个子元素

:nth-last-child(n)和nth-child(n)类似，不过选择的是倒数第n个子元素。下面的代码会选择文字5所在的p标签

    <style>
        p:nth-last-child(1) {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p class="p2">文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
            <div></div>
        </div>

        <p class="p1">文字4</p>
        <p class="p1">文字5</p>
    </div>

:nth-of-type(n) 第n个某类子元素

下面的代码选择p标签 同时这个p标签是它父元素的第二个p标签。所以 文字4和文字3所在的p标签会被选中

    <style>
        p:nth-of-type(2) {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p class="p2">文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
            <div></div>
        </div>

        <p class="p1">文字4</p>
        <p class="p1">文字5</p>
    </div>

:nth-last-of-type(n) 倒数第n个某类子元素

下面的代码选择p标签 同时这个p标签是它父元素的倒数第二个p标签。所以 文字4和文字2所在的p标签会被选中

    <style>
        p:nth-last-of-type(2) {
            color: #f00;
        }
    </style>
    <div id="box1">
        <p class="p2">文字1</p>
        <div id="box2">
            <p>文字2</p>
            <p>文字3</p>
            <div></div>
        </div>

        <p class="p1">文字4</p>
        <p class="p1">文字5</p>
    </div>

属性选择器

举例	意义
img[alt]	选择有alt属性的img标签
img[alt=“故宫”]	选择alt属性是故宫的img标签
img[alt^="北京”]	选择alt届性以北京开头的img标签
img[alt$=“夜景”]	选择alt属性以夜景结尾的img标签
img[alt*=“美”]	选择有alt属性中含有美字的img标签
img[alt~="手机拍摄”]	选择有alt届性中有空格隔开的手机拍摄字样的img标签
img[alt="参赛作品”]	选择有alt届性以“参赛作品-”开头的img标签