关于CSS3中的选择器

属性选择器

选择符语法	描述
E [att]	匹配具有att属性的所有元素
E [att = "value"]	匹配具有att属性且值为value的元素
E [att ^= "value"]	模糊匹配，以属性值为value打头的元素
E [value $= "value"]	模糊查询，以属性值为value结尾的元素
E [value *= "value"]	完全模糊匹配

结构伪类选择器

这里一共分为两个大类

选择符语法	描述
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

这个比上面的属性选择器稍微复杂一点，但是也很easy，这个我直接上代码或许更加简单明了一点

样式部分为：

    <style>
        /* :first-child为第一个元素 */ 
        ul :first-child {
            background-color: blue;
        }

        /* 有了第一个当然就会有最后一个 */
        ul :last-child {
            background-color: pink;
        }

        /* 指定匹配上的的元素中的某一个，下标从1开始 */
        ul :nth-child(5) {
            background-color: black;
        }

        /* 这个就是有意思的地方了，这个值可以是数字，如上般那样，也可以是公事，还可以是关键字 */

        /* even为偶数行 还可以选择odd，为奇数行 */
        ul li:nth-child(even) {
            background-color: orangered;
        }
        /* 这个为公式，n是从0开始，到匹配上的所有元素的个数为尾，递增+1，下面的意思就是选择前五个，因为我们的元素总共就10个 */
        ul :nth-child(-n + 5) {
            background-color: orange;
        }

        div {
            height: 100px;
            background-color: rgb(204, 204, 204);
        }

        /* 这个可以匹配父元素其下的第一个子元素,即使他不是span */
        div :nth-child(1) {
            background-color: orangered;
        }

        /* 这个只能匹配父元素下是span元素的第一个子元素 */
        div span:nth-of-type(1) {
            background-color: red;
        }
    </style>

body部分为

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div>
        <p>小伙子，你不要拽</p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

这里就有一个比较

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素

伪元素选择器

选择符语法	描述
::before	在元素的内部的前面插入内容
::after	在袁术的内部的后面插入内容

需要注意的就是:

两个选择器都要求必须有content属性
before和after创建的是一个行内元素，如需设置高宽等属性，需要转换为行内快
创建出来的元素在Dom中找不到的，所以称为伪元素，也不晓得是个啥？

......有错误望指正

关于CSS3中的选择器

关于CSS3中的选择器

属性选择器

结构伪类选择器

伪元素选择器

猜你喜欢