day65-CSS选择器和样式优先级

1. CSS
    CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
    当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

2.CSS语法
    每个CSS样式由两个组成部分：选择器和样式。样式又包括属性和属性值。每个样式之后用分号结束。
    选择器 {样式1;样式2}
        p { color:red ; font-size:18px }
3.CSS注释
    /*这是注释*/

4.CSS的3种引入方式
    4.1 行内样式
        <p style="color: red">Hello world.</p>

    4.2 内部样式: 写在网页的<head></head>标签对的<style></style>标签对中
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                    p{color: red}
            </style>
        </head>
    
    4.3 外部样式
        <link  rel="stylesheet"  href="mystyle.css"  type="text/css"/>

5.CSS选择器：元素选择器、ID选择器、类选择器比较常用
    5.1 基本选择器: 元素选择器、ID选择器、类选择器、通用选择器。
        
        5.1.1 元素选择器 ：适用于 批量的\统一\默认的样式
            html: <body>
                <p>迈腾2020</p>
                     </body>
            css:   p{color:red}

        5.1.2 ID选择器: id与#对应，适用于 给特定标签设置特定样式
            html: <body>
                <p id="i1">迈腾2020</p>
                     </body>
            css:   #i1{color:red}

        5.1.3 类选择器： class与.对应 。可以多条语句都写c1。适用于 给某一些标签设置相同的样式
            html: <body>
                <p class="c1">迈腾2020</p>
                <p class="c1">迈腾2019</p>
                <p class="c1">迈腾2018</p>
                     </body>
            css:   .c1{color:red} 或 p.c1{color:red}

        5.1.4 通用选择器：所有标签都使用同样的样式。
            css:  *{color:red}

    5.2 组合选择器：后代选择器、儿子选择器、毗邻选择器、弟弟选择器。都是往下找，不会往上找。

        5.2.1 后代选择器：
            html: <body>
                    <div id="d1">
                            <p>p儿子</p>
                            <span>span儿子</span>
                            <div>
                                    <p>p孙子</p>
                                   <span>span孙子</span>
                            </div>
                    </div>
                   </body>
            css:   #d1 p{color:red} 所有id为d1的p标签都是相同的样式:p儿子和p孙子都是红色。注意#d1和p中间是空格。

        5.2.2 儿子选择器：
            html: <body>
                    <div id="d1">
                            <p>p儿子</p>
                            <span>span儿子</span>
                            <div>
                                    <p>p孙子</p>
                                   <span>span孙子</span>
                            </div>
                    </div>
                   </body>
            css:   #d1 > p{color:red} id为d1的p儿子是红色，而p孙子默认黑色。注意#d1和p中间是>。

        5.2.3 毗邻选择器：div和p必须是同级。上面的p孙子和p儿子不同级。
            html: <body>
                    <div>111</div>
                    <p>222</p>
                <p>333</p>
                   </body>
            css:   div + p {color:red}。222变红色，而111和333还是默认黑色。注意div和p中间是+。
        
        5.2.4 弟弟选择器：div和下面的两个p必须是同级。div是两个p的哥哥。
            html: <body>
                    <div>111</div>
                    <p>222</p>
                <p>333</p>
                   </body>
            css:   div ~ p {color:red}。222和333都变红色，而111还是默认黑色。注意div和p中间是~。

    5.3 属性选择器：sdf为自定义属性，也可以是其他属性，[]中括号是属性的意思。
            html: <body>
                    <p sdf="good">poor</p>
                   <p sdf="1">smart</p>
                   <p sdf="2">desire</p>
                   <p sdf="3">focus</p>
                   </body>
            css:   [sdf]{color:red} 属性为sdf的样式都是红色。    
            css:   [sdf = "good"]{color:red} 仅仅属性为sdf = "good"的样式是红色。
            
            不怎么常用的属性选择器：
            /*找到所有title属性以hello开头的元素*/
            [title^="hello"] {color: red;}

            /*找到所有title属性以hello结尾的元素*/
            [title$="hello"] { color: yellow;}

            /*找到所有title属性中包含（字符串包含）hello的元素*/
                [title*="hello"] {color: red;}

            /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
                [title~="hello"] {color: green;}    

    5.4 分组选择器：
            html: <body>
                    <div>迈腾</div>
                    <p>psdf</p>
                   </body>
            css:   div,p{color:red} 把div和p分到一组，设置相同的样式。注意div和p中间是逗号，。

            html: <body>
                    <div id="d1">迈腾</div>
                    <p>psdf</p>
                   </body>
            css:   #d1,p{color:red} 把id为d1的标签和p分到一组，设置相同的样式。

    5.5 嵌套选择器：
            html: <body>
                    <div class="c1">
                            <p>111</p>
                            <p>222</p>
                            <span>333</span>
                    </div>
                   </body>
            css:   .c1 p{color:red} 类c1内部所有p标签都设置红色，这也是后代选择器。

            html: <body>
                    <div id="i1">
                            <p>111</p>
                            <p>222</p>
                            <span>333</span>
                    </div>
                   </body>
            css:   #i1 p{color:red} id为i1的标签内部所有p标签都设置红色，这也是后代选择器。

6. 样式文件优先级：内联样式--id选择器--类选择器--元素选择器
        1. 内联样式(直接在标签里面写style) 优先级最高
        2.选择器都一样的情况下,谁靠近标签谁就生效
        3. 选择器不同时 计算权重来判断
        除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
        万不得已可以使用!important
            css: p{color:red !important}只有我生效。
day65-CSS选择器和样式优先级

猜你喜欢
