html学习总结（3）——选择器

最新推荐文章于 2023-03-28 23:28:33 发布

switee

最新推荐文章于 2023-03-28 23:28:33 发布

阅读量191

点赞数 2

分类专栏： # html

本文链接：https://blog.csdn.net/qq_35566468/article/details/90447080

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.通用、标签、id、类选择器

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通用选择器--*/
        *{
            color: red;
        }
        /*标签选择器*/
        div{
         color: yellow;
        }
        p{
            color: purple;
        }
        span{
            color: green;
        }
        /*类选择器*/
        .test{
            color: brown;
            background-color: darkgray  ;
        }
        .test2{
            border: 1px solid #000;
        }
        /*id选择器*/
        #big{
            font-size: 100px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="big">我是div1</div>
    <div class="test2">我是div2</div>
    <div class="test">我是div3</div>
    <p>我是段落1</p>
    <p class="test2">我是段落2</p>
    <p class="test test2">我是段落3</p>
    <span>我是span1</span>
    <span class="test2">我是span2</span>
    <span class="test">我是span3</span>
</body>
</html>

2.复合、群组选择器

效果图

代码

<style>
    /*复合选择器*/
    p.test1{
        color: red;
    }
    div#main{
        color: green;
    }
    /*群组选择器*/
    div,span,.test1{
        border-bottom: 2px solid purple;
    }
</style>
<body>
    <div id="main">我是div1</div>
    <div>我是div2</div>
    <div class="test1">我是div3</div>
    <p>我是段落1</p>
    <p class="test1">我是段落2</p>
    <p>我是段落3</p>
    <span class="test1">我是span1</span>
    <span>我是span2</span>
    <span >我是span3</span>
    </body>

3.后代选择器

效果图

代码

<style>
   /*后代选择器*/
 /*   #main p{
        color: red;
    }*/
   /*直接后代选择器*/
    #main > p{
        color: purple;
        font-size: 50px;
    }
    </style>
    <body>
    <div id="main">
        <p>div中在p标签</p>
        <span>
            <p>span中在p标签</p></span>
    </div>
    <p>外面在p标签</p>
    </body>

4.兄弟元素

<style>
    div{
        background-color: green;
    }
/*查找后面的一个兄弟元素：兄弟元素+兄弟元素{}*/
    div + p{
        color: red;
    }
    /*查找豁免所有的兄弟元素：兄弟元素~兄弟元素{}*/
    div ~ p{
        background-color: yellow;
        color: purple;
    }
</style>
    <body>
    <div id="main">
        <p>div中在p标签</p>
        <span>
            <p>span中在p标签</p></span>
    </div>
    <p>与div相邻的p标签</p>
    <p>与p相邻的p标签</p>
    <p>与p相邻的p标签</p>
    <p>与p相邻的p标签</p>
    <p>与p相邻的p标签</p>
    </body>

5伪类和伪元素

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类和伪元素</title>
</head>
<style>
    p{
        width: 300px;
        background-color: red;
    }
    /*伪元素*/
    p::first-letter{
        font-size: 30px;
        color: green;
    }
    p::first-line{
        color: yellow;
    }
    /*伪类*/
    p.test1:hover{
        width: 600px;
        background-color: deepskyblue;
    }
    input:focus{
        width: 500px;
       height: 50px;
    }
</style>
    <body>
    <p class="test1">我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
    <input type="text">
    </body>
</html>

6.not 选择器

<style>
    <!--/*:not(选择器){}*/-->
    div:not(.box){
        color: red;
    }
</style>
<body>
    <div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
    <div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
    <div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
    <div class="box">gjsdpjgferofjldsmcdsjfdsuhfhd</div>
    <div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
    <div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
    <div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
    <div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
</body>

6.选择器优先级

  <style>
        /*1.针对性越强，优先级越高
        2.权值
        *：0
        标签：1
        类：10
        伪类/伪元素：10
        id:100
        important:1000
        3.原则：选择器的权值加到一起，大的优先；若权值相同，后定义的优先
        4，important>内联>id>类，伪类，伪元素，属性>*>继承
        */

        p{
            color: red;
        }
        .test1{
            color: purple;
        }
    </style>
</head>
<body>
    <p class="test1">喜欢IT，就上聊客</p>
</body>

switee

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习总结（3）——选择器

1.通用、标签、id、类选择器效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*通用选择器--*/ ...
复制链接

扫一扫

专栏目录