html-css0（元素/类/ID/通配/后代/子元素选择器，伪元素）

木一叶liuyue

已于 2022-03-12 11:19:55 修改

阅读量434

点赞数

分类专栏：前段文章标签： html

于 2021-03-03 15:32:22 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/114316483

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

请添加图片描述

<!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>
</head>

<style>
    p{
        color: brown;
        font-size: larger;
    }
</style>

<body>
   
    <p style="color: aqua;font-size:50px;">落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>rtyjktvesxa</p>
    <p>rtuytbbfdsr</p>
    <p>regbjhg</p>
</body>

</html>

请添加图片描述

css设置方式

请添加图片描述

元素/类/ID/通配选择器

请添加图片描述

<!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>
</head>

<style>
/*将class为red的元素设置为红色（字体）*/
    .red{
        color: blue;
    }
    /*
    将class为red的div字体设置为30px
    需要用到交集选择器
            作用：选中同时符合多个条件的元素
            语法：选择器1选择器2选择器3选择器4
            注意点：选择器中如果有元素选择器，必须以元素选择器开头，
            也就是说必须是div.red{} .red是类选择器
    */
    div.red{
        font-size: 30px;
    }
    /*第三行文字包括这个三个字母，所以可以这么写*/
    .a.b.c{
        color:brown;
        font-size: large;
    }

    /*
    选择器分组（并集选择器）
    作用:同时选择多个选择器对应的分组
    语法:选择器1，选择器2，选择器3，选择器{}
    可以是 #b1,p1,h1,span,div,red{}
*/

h1,span{
    color: chartreuse;
}
</style>

<body>
    <div class="red">我是div 元素  </div>
    <p class="red">我是p元素</p>
    <div class="red2 a b c">我是第二个div元素</div>

    <h1>一级标题</h1>
    <span>哈哈哈</span>
</body>
</html>

请添加图片描述

关系选择器（子元素/后代元素选择器）

<!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>
</head>

<style>
    /*为div的子元素span设置一个字体颜色红色
    (为div直接包含的span设置一个字体颜色)
    
    子元素选择器
    作用：选中父元素指定子元素
    语法：父元素>子元素
    
    div.box>span {
        color: coral;
    }
    */

    /*
    后代元素选择器：
    作用：选中指定元素内的指定后代元素
    语法：祖先 后代
    
     div span{
         color: darkcyan;
     }
     
     div>p>span{
         color:red;
     }*/

    /*
    选择下一个兄弟
    语法：前一个+下一个（必须是紧挨着的下一个）

    选择下边所有兄弟
    语法：兄~弟
     */

    p~span {
        color: red;
    }
</style>

<body>
    <div class='box'>
        <!--
            父元素:直接包含子元素的元素叫做父元素
            子元素:直接被父元素包含的元素是子元素
            祖先元素:直接或间接包含后代元素的元素的叫做祖先元素
                        一个元素的父元素也是它的祖先元素
            后代元素：直接或间接被祖先元素包含的后代叫做后代元素
                      子元素也是后代元素
            兄弟元素:拥有相同父元素的元素是兄弟元素 

        -->
        我是一个div元素

        <p>我是div中的p元素
            <span>我是p元素中的span</span>
        </p>

        <span>我是div中的span元素</span>

    </div>
</body>

</html>

属性选择器

<!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>
        /*
        [属性名]选择含有指定属性的元素
        [属性名=属性值]选择含有指定属性和属性值的元素
        [属性名^=属性值]选择属性值以指定值开头的元素
        [属性名$=属性值]选择属性值以指定值结尾的元素
        [属性名*=属性值]选择属性值中含有某值的元素的元素

        */
        p[title$=abc]{
          color:brown;  
        }
    </style>
</head>
<body>
    <p title="abc">djfjkjgh</p>
    <p title="abcdef">sdsfhjgk</p>
    <p title="helloabc">ertyuioy</p>
    <p>zxvbnmmd</p>
    <p>llmmbdcb</p>
    <p>earjmvsa</p>
    
</body>
</html>

伪类选择器

<!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>
</head>
<style>
    /*将 ul里的第一个li设置为红色*/
    /*伪类（不存在的类，特殊的类）
     伪类用来描述一个元素的特殊状态
     比如：第一个子元素，被点击的元素，鼠标移入的元素
     伪类一般情况下都是使用：开头
     :first-child 第一个子元素
     :last-child 最后一个子元素
     :nth-child()选中第n个子元素
            在括号里面填写的特殊值:
            n  第n个 n的范围表示0到正无穷
            2n或even表示选中偶数位的元素
            2n+1或odd 表示选中奇数位的元素
如果填写具体的值，那么就是具体的第几个。
     */

    ul>li:first-child {
        color: brown;
    }

    ul>li:last-child {
        color: burlywood;
    }

    ul>li:nth-child(n) {
        color: chartreuse;
    }

    ul>li:nth-child(2n) {
        color: crimson;
    }

    ul>li:nth-child(2n+1) {
        color: cornflowerblue;
    }

    /*但是如果第一个元素变为span，以上就不正确了 
    以上这些伪类用法都是根据所有的子元素进行排序的
  
    ：first-of-type
    :last-of-type
    :nth-of-type()
    这几个伪类的功能和上述类似，不同点是他们是在同类型的元素中进行排序的
   
    :not()否定伪类
    将符合条件的元素从选择器中去除
    */
  ul>li:not(:nth-child(3)){
      color: darkgoldenrod;
  }
</style>

<body>
    <!-- 表示为ul>li*5  -->
    <ul>
        <span>这是一个span元素</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>

</html>

超链接的伪类：关于链接的点击和鼠标的点击

<!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>
</head>
<style>
    /*
    link 用来表示没访问过的链接（正常的链接）
    */
    a:link{
        color:red;
    }
    /*
    :visited 用来表示没访问过的链接
    由于隐私的原因，所以visited这个伪类只能修改链接的颜色
    */
    a:visited{
        color:orange;
    }

    /*
    :hover用来表示鼠标移入的状态
    */
    a:hover{
        color:orchid;
        font-size: 50px;
    }
    /*
    :active用来表示鼠标点击
    */
    a:active{
        color:pink;
    }
</style>

<body>
    <!--
        1.访问过的链接
        2.没访问过的链接
    -->
    <a href="https://www.baidu.com">访问过的链接</a>
    <br><br>
    <a href="https://www.baidu123.com">没访问过的链接</a>
</body>
</html>

伪元素第一个字母，第一行

<!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>
</head>
<style>
    /*伪元素:表示页面中一些特殊的并不真实存在的元素（特殊位置）
    伪元素的使用 ::开头
    ::first-letter表示第一个字母
    ::first-line表示第一行
    ::selection 表示选中的内容，就是鼠标选中谁，谁就变成绿色
    ::before 元素的开始 加上一些东西，并且鼠标无法选中  
    ::after 元素的最后  加上一些东西，并且鼠标无法选中  
    -before和after必须结合content属性来使用
    */
p::first-letter{
    font-size: 50px;

}

p::first-line{
    background-color: yellow;
}
p::selection{
    background-color: yellowgreen;
}
div::before{
    content:'abc';
    color: red;
}
div::after{
    content:'haha';
    color: teal;
}
</style>
<body>
    <div>
        hello hello how  are you
        <p>
            On the Importance of 
        </p>
    </div>
</body>
</html>