HTML中CSS引用——选择器的使用

一、元素选择器

    1、书写格式:标记名{/*生命块*/}

    2、所有与该标记匹配的元素,都将应用声明块中的规则

二、类选择器

    1、书写格式:.类名{/*声明块*/}

        类名为 class的值

    2、所有class属性为指定类名的元素,都将应用声明块中的规则

        eg:

<p class="color_blue size"> .color_blue{

color: skyblue;

}

.size{

font-size: 50px;

}

一个class标签可以写多个类名,放在class的值中,分隔符为空格

三、ID选择器

    1、书写格式:#id值{/*声明块*/}

    2、id选择器只会选择一个元素,属性id为指定值的元素,将应用声明块中的规则

    3、同一个html文档中,不同的id值不可重复。 即 元素中的id值必须唯一

四、通配符选择器

    1、书写格式:*{ }

    2、指页面内所有标签都适用的样式

    3、范围太广,不适用

五、属性选择器

    1、书写格式:input[type="text"]{ }

    【扩展】

        1、选种以xxx开头的元素

            书写格式 元素名[属性名^="属性名开头"]

            input[type^="t"]{}

        2、选种以xxx结尾的元素

            书写格式 元素名[属性名$=属性值结尾的内容]

            input[type$="d"]

        3、选中包含XXX的元素

            书写格式 元素名[属性名*=属性值包含的内容]

            input[type*="i"]

六、并集选择器/组合选择器

    1、书写格式:元素A+","+元素B+","+元素C

    2、适用于多个不同标签,应用相同的样式

    3、声明冲突需要计算层叠机制时,需将每一项分开单独计算

七、伪类选择器

    1、在html中不需要添加class属性,直接在CSS中书写

    【分类】

        1、动态伪类选择器

        将链接标签<a>设置样式,书写格式:标签:link{ }

(1)link和visited必须放在最前面(无先后顺序)

(2)link和visited只能用于<a>标签,属于静态伪类选择器

(3)link和visited后面是focus

                锁定,将自身的样式变化赋予指定的标签

                例:input:focus+span{corlor:deeppink},鼠标选种input,则span标签的内容变成deeppink

(4)focus后面是hover

(5)hover后面是active

            通常情况下,我们会用到1245

                {记忆方法:网络通用——爱恨原则:love hate}

                     l v h a

        2、结构伪类选择器

            书写格式:元素:nth-child(n){}

                eg:section>p:first-child{}

                解释:选种section下的第一个子元素,如果为p元素,则进行样式变化;若不是,则不变

            (1)要将奇数和偶数项分开添加样式

                    元素:nth-child(2n)

                        选偶数项元素

                            even

                    元素:nth-child(2n+1)

                        选种奇数项元素

                            odd

         (2)只选中前m个同样的元素

                    元素:nth-child(-n+m)

                    中间不能插入其他元素

             (3)选种A标签下的B元素中的第n个

                    A>B:nth-of-type(n){}

             (4)选种A标签下的B元素中的倒数第n个

                    A>B:nth-last-of-type(n){}

        3、否定伪类选择器

            选种除了第n个元素的其他同类元素

                元素:not(:nth-child(3)){}

七、伪元素选择器

    CSS创建的元素,都是选种元素的子元素

    分类

        元素::before{}

            选种元素的第一个子元素

        元素::after{}

            选种元素的最后一个子元素

        元素::first-line{}

            选种元素的第一行

        元素::first-letter{}

            选种元素的第一个字

            

            

猜你喜欢

转载自www.cnblogs.com/yuanjunjundebo/p/11828048.html
今日推荐