CSS几类选择器总结

MDN Web docs

https://developer.mozilla.org/zh-CN/docs/Web/CSS

 

一、常用选择器

/* 
    1、元素选择器 
    作用：根据标签名来选中指定元素
    语法：标签名：{}
    例子 p{}  h1{}  div{}
*/

/* 
    2、id选择器
    作用：根据元素id属性选择一个元素，不能重复使用
    语法：#id属性值{}
    例子： #abc{}
*/

/* 
    3、类选择器
    作用：根据元素的class属性选中一组元素，可重复使用；可以同时给一个元素制定多个class，空格隔开。
    语法：.class属性值{}
*/

/* 
    4、通配选择器
    作用：选择页面中所有元素
    语法：*{}
*/

二、复合选择器

/* 
    1、交集选择器
    作用：选中同时符合多种条件的元素
    语法：选择器1选择器2选择器3...{}
    例子：.a.b.c{}
    注意：交集选择其中如果有元素选择器，必须以它开头。如果有id选择器就不用符合。
*/

/* 
    2、并集选择器（选择器分组）
    作用：同时选择多个选择其对应的元素。
    语法：选择器1，选择器2，选择器3...{}
    例子：h1,span{}
*/

三、关系选择器

<div>
    我是一个div。
    <p>
        我是div里面的p元素。
        <span>我是p里面的span元素</span>
    </p>
    <span>我是div的span元素。</span>
    <span>我是div的span元素。</span>
    <span>我是div的span元素。</span>
</div>

/* 
    1、后代元素选择器
    作用：选指定元素的所有后代。
    语法：祖先 后代
*/
div span{
    color: green;
}

/* 
    2、兄弟元素选择器
    选择下一个(紧挨着)兄弟
    语法：前一个 + 下一个
    选择下面所有兄弟
    语法：前一个 ~ 后一个
*/
p + span{
    color:red;
}
p ~ span{
    color: yellow;
}

四、属性选择器

<p title="abc">我是一个粉刷匠</p>
<p title="abcdef">粉刷本领强</p>
<p title="hello">啦啦啦啦啦啦</p>
<p>我是卖报的小行家</p>

/* 
    [属性名]选择含有指定属性的元素。
    [属性名=属性值]选择含有指定属性和属性值的元素。
    [属性名^=属性值]选择属性值以指定值开头的元素。
    [属性名￥=属性值]选择属性值以指定值结尾的元素。
    [属性名*=属性值]选择属性值中含有某值的元素。
*/
p[title]{
    color: orange;
}
p[title=abc]{
    color:green;
}
p[title^=abc]{
    color: honeydew;
}
p[title*=e]{
    color: hotpink;
}

 五、伪类选择器

（不存在的类，特殊的类）

              -伪类用来描述一个元素的特殊状态，比如：第一个子元素，被点击的元素、鼠标移入的元素...

              -伪类一般用：开头

        /*
            伪类（不存在的类，特殊的类）
              -伪类用来描述一个元素的特殊状态，比如：第一个子元素，被点击的元素、鼠标移入的元素...
              1、:first child 例如 ul > li:first child{}
              2、:last-child
              3、:nth-child():选中第n个子元素（括号里如果是n，n取值为0到正无穷，所以全选。如果是2n，则为选择偶数位元素。even是偶数，odd是奇数）
              以上这些伪类都是按照所有元素排序，比如1中，li必须是所有子元素中第一个元素，而不是子元素中第一个li。
              4、同类型排序：:fist-of-type   :last-of-type  :nth-of-type() 
              5、:not()否定伪类：讲符合条件的元素从选择器中去除。
              如：  ul > li:not(:nth-child(3)){color:red;}
        */

        /*
              a元素(超链接)伪类
              1、:link 表示没访问过的链接（其实是表示正常的链接）
                 :visited 表示访问过的链接。但由于隐私原因，visited伪类只能修改链接颜色。
              2、:hover 表示鼠标移入的状态
              3、:active 表示鼠标点击的状态
        */

 六、伪元素选择器

        伪元素选择器

        --伪元素：表示页面中一些特殊的并不真实存在的元素（表示特殊的位置）。

        伪元素使用::开头

/*
     1、::first latter表示第一个字母，如：p::first-letter{}
     2、::first-line表示第一行
     3、::selection表示选中的内容
     4、::before  ::after表示元素开始和结束的位置，必须结合content（内容）属性
            div::before{
                content:'abc';
                color:red;
            }
*/