CSS选择器

公告

View Post

CSS选择器

1.基础选择器

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

　　1.通用元素选择器 *: 所有的标签都变色

　　2.标签选择器：匹配所有使用p标签的样式 p{color:red}

　　3.id选择器：匹配指定的标签 #p2{color:red}

　　4.class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}

实例

注意：

可以对块级标签设置长宽
不可以对内联标签设长宽（它只会根据他的文字大小来变）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*标签选择器*/
    /*所有标签是div的都变了*/
    div{
        font-family: 华文彩云;
    }

    /*id选择器*/
    /*给id='c2'的设置样式，id一般不常用。因为id是不能重复的。*/
    #c2{
        background-color: blueviolet;
        font-size: larger;
    }

    .a1{
        color: red;
    }
    或
    p.a1{
        color: blue;
    }

    /*通用元素选择器*/
    *{
        background-color: aquamarine;
        color: red;
    }
</style>
<body>
<div id="c1">
    <div id="c2">
        <p>hello haiyan</p>
        <div class="a1">哇啊卡卡</div>
    </div>
    <p>hi haiyan</p>
</div>
<span>啦啦啦</span>
<p>p2</p>
<div class="a1">
    <p class="a2">你好啊</p>
    <h1>我是h1标签</h1>
</div>
</body>
</html>

2.组合选择器

    1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red} 
    2.子代选择器（只在儿子层找） .c2>p{color:red}
    3.多元素选择器：同时匹配所有指定的元素  .div,p{color:red}
　　　　　　　　　　　　　　　　　　　　　　　或者

　　　　　　　　　　　　　　　　　　　　　　　　.c2 .c3,.c2~.c3{
　　　　　　　　　　　　　　　　　　　　　　　　　　　color: red;
　　　　　　　　　　　　　　　　　　　　　　　　　　 background-color: green;
　　　　　　　　　　　　　　　　　　　　　　　　　　　font-size: 15px;
　　　　　　　　　　　　　　　　}

    不常用

　　3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）.c2+p{color:red}
　　4.兄弟选择器：同一级别的，离得很近的.c2~p{color:red}

　  5.多元素选择器： .c2 .c3,.c2~ .c3{ color:red }

多元素选择器的说明

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器(部分层级)：选择所有类为a1的p标签*/
        .a1 p{
            background-color: blue;
        }

        /*子代选择器*/
        .c2>p{
            color: crimson;
        }

        /*毗邻选择器*/
        .a2+p{
            background-color: aquamarine;
        }

        /*兄弟选择器:同一级别的，离得很近的*/
        .a2~p{
            background-color: blueviolet;
        }

        /*多元素选择器：同时匹配所有指定的元素*/
        .div,p{
            background-color: aquamarine;
        }

        .a1 .a2, .a1~p{
            color: blue;
            font-size: 15px;
            background-color: red;
        }
        #下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用
        /*.a1 .a2{*/
            /*color: blue;*/
            /*font-size: 15px;*/
            /**/
        /*}*/
        /*.a1~p{*/
             /*color: blue;*/
             /*font-size: 15px;*/
             /**/
        /*}*/
    </style>
</head>
<body>
<p>hi say hello........</p>
<div class="a1">
    <div class="a2">
        <p id="s1">过去永远是画面</p>
        <div class="c2">
            <p>那片海</p>
        </div>

    </div>
    <p>huhhdhshsdfdfgfdgd</p>
    <h1 class="a3">第一章</h1>
    <h2>第二章</h2>
</div>
<div class="a1">
    <em>lalalalla啦啦啦啦案例</em>
    <div class="a2">
        <p>hohou后</p>
        <b>海燕&reg;</b>
    </div>
</div>
<h5>你好</h5>
<p>好好好</p>
</body>
</html>

3.属性选择器

index.css

/*1.匹配所有haiyan属性的，并且只是在div标签的*/
div[haiyan]{
    color: yellowgreen;
}


/*2.匹配所有haiyan=wawa的并且只是在div标签的*/
div[haiyan=wawa]{
        color: aqua;
    }

/*2.上面的优先级和下面的优先级本应该是一样的*/
/*应该显示下面的，但是，由于上面查找的范围
比下面的范围广，所以它会把上面的也显示了。*/



/*3.匹配所有属性为haiyan，并且具有多个空格分割的值，*/
/*其中一个只等于wawa的*/
 div[haiyan~=wawa]{
            color: blueviolet;
        }

 /*4.匹配属性值以指定值开头的每个元素，
 并且是在div标签里的*/
div[haiyan^=w]{
            background-color: aquamarine;
        }
div[egon^=w]{
            background-color: aquamarine;
        }

/*5.匹配属性值以指定值结尾的每个元素  */
div[haiyan$=a]{
            background-color: blueviolet;
        }

/*6.匹配属性值中包含指定值的每个元素 */
div[haiyan*=a]{
            background-color: blueviolet;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div>
    <div haiyan = "  wawa ">你好</div>
    <div haiyan = "wawa">哎呀呀啊</div>
    <div egon = "wawa">da大</div>
    <div haiyan="cccc">啊啊哈</div>
</div>
</body>
</html>

posted on 2021-12-22 15:10 lazy_j 阅读(39) 评论(0) 收藏举报

刷新页面返回顶部