选择器进阶

层级选择器：selector1 selector2

用于嵌套关系，没有严格的规范，可以越级，爷爷父亲儿子，可以写成爷爷儿子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    <!--box1容器里边的所有p标签变红色-->
        .box1 p{
            color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    <h1>hello world1</h1>
    <p>hello world1.1</p>
</div>

<div class="box2">
    <h1>hello world2</h1>
</div>
</body>
</html>

子选择器：selector1 >selector2

选择所有父级为seletor1的selector2

<style>
        div >span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>hello child</span>
        </p>
        <span>hello span</span>
    </div>
</body>

hello child的span元素的父级是p而非div

兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*兄弟选择器，a+b{}
            a和b是兄弟关系，都有一个相同的父元素
            选择a的下面与a紧贴着的一个b
            */
        h2 + p{
          /*h2和p都是相同的父元素body*/  
            color: red;/*p2*/
        }

       /* h2+p+ul li{
            color: blue;/*li没有变成蓝色，因为有p3和span挡住了p和ul，使得p和ul不是相邻的的
        }*/

       
        h2+p+p+span+ul li{
            /*h2+p定位到p2，p2+p定位到p3，p3+span定位到span，span+ul定位到ul
            h2+p+span+ul定位到ul*/
            color: blue;/*li变成了蓝色*/
        }

    </style>
</head>
<body>
    <p>hello p1</p>
    <h2>hello h2</h2>
    <p>hello p2</p>
    <p>hello p3</p>
    <span>hello span</span>
    <ul>
        <li>
            hello li
        </li>
    </ul>
    <p>hello p4</p>
</body>
</html>

组合选择器：selector1,selector2

同时设置多个选择器的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    <!--所有的h1h2变红色-->
        h1,h2{
            color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    <h1>hello world1.1</h1>
    <h2>hello world1.2</h2>
</div>

<div class="box2">
    <h1>hello h2.1</h1>
</div>
</body>
</html>

搭配用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box1 h1,.box1 h2{
            /*这里是两个层级选择器构成的组合选择器*/
            color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    <h1>hello world1.1</h1>
    <h2>hello world1.2</h2>
</div>

<div class="box2">
    <h1>hello h2.1</h1>
</div>
</body>
</html>

伪类选择器：selector:hover

伪类选择器用于增加行为，例如鼠标移动到一个按钮上面，按钮就会变成绿色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .btn:hover{
            background-color: green;
        }
    </style>
</head>
<body>
<input class="btn" type="button" value="按钮">
</body>
</html>

移动前后对比

伪元素选择器

用于添加新的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .test::before{
            content:"----"/*content是要加的内容*/
        }
        .test::after{
            content:"----"
        }
    </style>
</head>
<body>
<h1 class="test">hello world</h1>
<h2 class="test">hello title</h2>
</body>
</html>

稍微用组合选择器改进下

.test::before,.test::after{
            content:"----"
        }

选择器权重（优先级）

相同权重的选择器：后面的会覆盖前面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .a{
            color: red;
        }
        .b{
            color: blue;
        }
/*选择器都能定位到同一个标签h1，都是类选择器所以权重相同，后面覆盖前面的代码*/
    </style>
</head>
<body>
<h1 class="a b">hello</h1>
</body>
</html>

不同选择器：id(100)>class(10)>element(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .mode2{
            color: red;
        }
        #mode1{
            color: blue;
        }
/*id选择器比类选择器权重高，所以执行id选择器的语句*/
    </style>
</head>
<body>
<h1 id="mode1" class="mode2">hello</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .mode2{
            color: red;
        }
        h1{
            color: blue;
        }
/*类选择器权重比元素高，优先执行类选择器*/
    </style>
</head>
<body>
<h1 class="mode2">hello</h1>
</body>
</html>

层级选择器：按权重累加计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box1 h1{
            color: red;
        }
        #box2 h1{
            color: blue;
        }
/*层级选择器由多个选择器组成，优先级由权重之和比较决定*/
/*.box权重为10，h1权重为1，所以.box1 h1权重和=11*/
/*#box权重为100，h1权重为1，所以.box1 h1权重和=101*/
/*所以hello为蓝色*/
    </style>
</head>
<body>
<div class="box1" id="box2">
    <h1 class="box3" id="box4">hello</h1>
</div>
</body>
</html>

如果改成这样，权重上面的更高，hello为红色

.box1 #box4{
            color: red;
        }
        #box2 h1{
            color: blue;
        }

设置最高权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box1 #box4{
            color: red;
        }
        #box2 h1{
            color: blue;
        }
        h1{
            color: green !important;/*尽管权重最低，但有!important就会变成最高权重，优先执行*/
        }
    </style>
</head>
<body>
<div class="box1" id="box2">
    <h1 class="box3" id="box4">hello</h1>
</div>
</body>
</html>

CSS的引入方法

嵌入方式
写在里
内联方式
写在html具体语句中
外部方式
css文件
权重：内联>嵌入
实际开发更多用外部方式，尽量不用内联方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!--嵌入样式-->
    <style>
        h1{
            font-size: 16px;
        }
    </style>
    <!--外部方式-->
    <link rel="stylesheet" href="democ.css">
</head>
<body>
<!--内联样式-->
<h1 style="color: white">hello world</h1>
</body>
</html>

posted @ 2022-10-09 21:41 ben10044 阅读(42) 评论(0) 收藏举报

刷新页面返回顶部

ben10044