css选择器的简述和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础学习</title>
    <!-- 
        css的引入方式二:内嵌式 
        通过style标签引入的css规则，仅适用于当前html页面
    -->
    <style>
        /* 标签选择器 */
        p{
            color:aqua;
        }
        #p{
            color: bisque;
        }
        /* 上下文选择器：1、空格：所有层级；2：>：父子级；3：+:相邻的兄弟；4：~：相邻后面所有的兄弟 */
        /* 后代选择器：所有层级 */
        ul li{
            background-color: red;
        }
        /* 子代选择器：仅父子层级 */
        body>ul>li{
            background-color: blue;
        }
        /* 同级相邻选择器：仅选中与之相邻的第一个兄弟元素 */
        /* .item1+*{ */
        .item1+li{
            background-color: green;
        }
        /* 同级所有选择器：选中与之相邻的后面所以兄弟元素 */
        .item2 ~li{
            background-color: black;
        }
        /* 伪类选择器 */
        /* 1.匹配任意位置的元素：`:nth-of-type(an+b)`
            an:起点；b：偏移量；a b=0,1,2,3... ;  
            0n+b可只写b，因为0乘任何数都是0，例如  ol li:nth-of-type(2)代表第二个元素
            1n代表全部元素，1可以省略，因为1乘以任何数都是本身，1n+b代表从第三个元素开始的全部元素，
            2n+3代表从第三个元素开始偏移，之后每再加2的元素都会被选中；就是3，5，7...
            3n+2跟上面一样类推。
        */
        /* ol li:nth-of-type(2n+3){
            background-color: red;
        } */
        /* 2.反向获取任意位置元素`:nth-last-of-type()`
            规律如正相匹配一致
        */
        /* ol li:nth-last-of-type(-1n+3){
            background-color: burlywood;
        } */
        /* 3.选择所有索引为奇数的元素 
        odd也可以
        ol li:nth-of-type(2n+1)也可以。
        */
        /* ol li:nth-of-type(2n-1){
            background-color: chocolate;
        } */
        /* 4.选择所有索引为偶数的元素 
        也可用2n+1*/
        ol li:nth-of-type(even){
            background-color: cornsilk;
        }
    </style>
    <!-- 
        css的引入方式三:外链式 
        使用link标签引入外部公共样式表
    -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 要求：1. 实例演示css规则的三种引入到html文档中的方式; 2. 实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器 -->
    <!-- 
        css的引入方式一：行内式 
        规则仅对当前行有效
    -->
    <h3>1.CSS的引入方式</h3>
    <p style="color:red;">css引入方式一</p>
    <p>css引入方式二</p>
    <p class="p">css引入方式三+class选择器</p>
    <p id="p">id选择器</p>
    <h3>2.上下文选择器</h3>
    <ul>
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <li>item3</li>
        <li>item4
            <ul>
                <li>item4-1</li>
                <li>item4-2</li>
                <li>item4-3</li>
            </ul>
        </li>
        <li>item5</li>
    </ul>
    <h3>3.伪类选择器：结构伪类相关；难点重点</h3>
    <ol>
        <li>itemo-1</li>
        <li>itemo-2</li>
        <li>itemo-3</li>
        <li>itemo-4</li>
        <li>itemo-5</li>
        <li>itemo-6</li>
        <li>itemo-7</li>
        <li>itemo-8</li>
    </ol>
    <ol>
        <li>ol2-li</li>
    </ol>
</body>
</html>
相关文章
