CSS选择器详解-优快云博客

本文详细介绍了CSS中的属性选择器、伪类选择器及伪元素选择器的使用方法，并通过一个日历样例展示了如何利用这些选择器实现特定样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性选择器

1、E[attr] 表示存在attr属性即可；
2、E[attr=val] 表示属性值完全等于val
3、E[attr~=val] 表示的一个单独的属性值这个属性值是以空格分隔的
4、E[attr|=val] 表示的要么一个单独的属性值要么这个属性值是以“-”分隔的
5、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置
6、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
7、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置

伪类选择器

重点理解E是用来参考确定其父元素的，E:nth-child(n) 对应根据E元素确定的父元素的所有子元素，E:nth-of-type(n) 的不同之处在于其对应的是只有E元素，会忽略其子元素(只管同级兄弟元素,忽略同级中的孩子)
1、E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素(只是E，其他不同兄弟不管)
2、E:nth-of-type(n) 第n个子元素，计算方法只是E元素，会忽略其子元素的存在
3、E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。
4、E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。
5、E:only-child 表示当前以E确定的父元素，除E之外并无其它子元素（独生子）；
6、E:only-of-type表示当前以E确定的父元素，除E之外不能包含其它和E同类型的子元素；
7、E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
8、E:empty 选中没有任何子节点的E元素；
n遵循线性变化，其取值1、2、3、4、…

伪元素选择器

1.E::selection 可改变选中文本的样式
2.E::placeholder 可改变placeholder默认样式，这个存在明显的兼容问题，比如::-webkit-input-placeholder，具体参考手册进行对比。
3.E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待。

“:” 与 “::” 区别在于区分伪类和伪元素

关于n的取值范围：

 1.当n做为一个独立值时，n取值为n>=1，例如nth-child(n)
 2.当n做一个系数时，n取值为n>=0，例如nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器 - 日历</title>
    <style>
        body, ul, dl, dt, dd {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F7F7F7;
        }

        ul {
            list-style: none;
        }

        .calendar {
            width: 385px;
            height: 312px;
            padding: 48px 141px 10px 12px;
            margin: 100px auto;
            background: url(image/bg.jpg) 0 0 no-repeat;
        }

        .calendar dt, .calendar dd {
            overflow: hidden;
        }

        .calendar span {
            display: block;
            width: 48px;
            height: 48px;
            text-align: center;
            margin-right: 1px;
            border: 3px solid transparent;
            float: left;
        }

        .calendar dt {
            border-top: 1px solid #5CADFF;
        }

        .calendar dt span {
            height: 28px;
            line-height: 34px;
            font-size: 14px;
        }

        .calendar dd {
            border-top: 1px solid #c8cacc;
            cursor: pointer;
        }

        .calendar span > b,
        .calendar span > b {
            display: block;
            line-height: 1;
        }

        .calendar span > b {
            height: 26px;
            line-height: 30px;
            font-size: 18px;
            font-family: Arial;
            font-weight: normal;
        }

        .calendar span > i {
            color: #999;
            font-size: 12px;
            font-style: normal;
        }

        /* 以下为使用选择器部分 */
        /*:first-child 选中相对与父级标签的第一个孩子，若是dt:....则第一个元素时dt时才有效，其他无效 */
        dt:first-child {
            color: red;
        }
        /*dd:nth-of-type(2) 选中所有dd中的第二个dd (:nth-of-type()起始值为1 */
        dd:nth-of-type(n) {
            color: yellow;
        }
        /*选中最后一列*/
        span:last-child { color:pink; }
        /*只选中最后一列中的dd 权重大于上面的所以dd部分被替代*/
        dd span:last-child {color: #23527c}

        /*dd的全部兄弟元素只包括dd*/
        /*dd:nth-child(n) {*/
            /*color: red;*/
        /*}*/
    </style>
</head>
<body>
    <!-- 日历 -->
    <div class="calendar">
        <dl>
            <dt>
                <span>一</span>
                <span>二</span>
                <span>三</span>
                <span>四</span>
                <span>五</span>
                <span>六</span>
                <span>日</span>
            </dt>
            <dd>
                <span data-range="prev-month">
                    <b>30</b>
                    <i>十九</i>
                </span>
                <span class="today">
                    <b>1</b>
                    <i>艾滋病日</i>
                </span>
                <span>
                    <b>2</b>
                    <i>廿一</i>
                </span>
                <span>
                    <b>3</b>
                    <i>廿二</i>
                </span>
                <span>
                    <b>4</b>
                    <i>廿三</i>
                </span>
                <span>
                    <b>5</b>
                    <i>廿四</i>
                </span>
                <span>
                    <b>6</b>
                    <i>廿五</i>
                </span>
            </dd>
            <dd>
                <span data-flag="festival">
                    <b>7</b>
                    <i>廿六</i>
                </span>
                <span>
                    <b>8</b>
                    <i>廿七</i>
                </span>
                <span>
                    <b>9</b>
                    <i>廿八</i>
                </span>
                <span>
                    <b>10</b>
                    <i>廿九</i>
                </span>
                <span>
                    <b>11</b>
                    <i>初一</i>
                </span>
                <span>
                    <b>12</b>
                    <i>初二</i>
                    </span>
                <span>
                    <b>13</b>
                    <i>初三</i>
                </span>
            </dd>
            <dd>
                <span>
                    <b>14</b>
                    <i>初四</i>
                </span>
                <span>
                    <b>15</b>
                    <i>初五</i>
                </span>
                <span>
                    <b>16</b>
                    <i>初六</i>
                </span>
                <span>
                    <b>17</b>
                    <i>初七</i>
                </span>
                <span>
                    <b>18</b>
                    <i>初八</i>
                </span>
                <span>
                    <b>19</b>
                    <i>初九</i>
                </span>
                <span>

                    <b>20</b>
                    <i>初十</i></span>
            </dd>
            <dd>
                <span>
                    <b>21</b>
                    <i>十一</i>
                </span>
                <span data-flag="festival">
                    <b>22</b>
                    <i>十二</i>
                </span>
                <span>
                    <b>23</b>
                    <i>十三</i>
                </span>
                <span>
                    <b>24</b>
                    <i>十四</i>
                </span>
                <span>
                    <b>25</b>
                    <i>十五</i>
                </span>
                <span>
                    <b>26</b>
                    <i>十六</i>
                </span>
                <span>
                    <b>27</b>
                    <i>十七</i>
                </span>
            </dd>
            <dd>
                <span>
                    <b>28</b>
                    <i>十八</i>
                </span>
                <span>
                    <b>29</b>
                    <i>十九</i>
                </span>
                <span>
                    <b>30</b>
                    <i>二十</i>
                </span>
                <span>
                    <b>31</b>
                    <i>廿一</i>
                </span>
                <span data-range="next-month">
                    <b>1</b>
                    <i>元旦</i>
                </span>
                <span data-range="next-month">
                    <b>2</b>
                    <i>廿三</i>
                </span>
                <span data-range="next-month">
                    <b>3</b>
                    <i>廿四</i>
                </span>
            </dd>
        </dl>
    </div>
</body>
</html>