CSS选择器的使用

最新推荐文章于 2023-03-06 09:00:00 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2023-03-06 09:00:00 发布

阅读量151

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/m0_47015897/article/details/111748204

版权

CSS3 专栏收录该内容

38 篇文章 16 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>常用选择器</title>
        <style>/*内部样式*/

        /* 1.元素选择器，又称为类型选择器 */
           h1{
                color:royalblue;
                font-size: 25px;
                font-family: 华文行楷,宋体,微软雅黑;
           }

        /*  2.类选择器,以“.”开头,通过“class”属性引用 */
           .Class1{
               color:red;
               font-size: 23px;
               font-family: 隶书;
           }
           .Class2{
               color:red;
               font-size: 23px;
               font-family: 幼圆;
           }

        /*  3.ID选择器，以“#”开头，通过“id”属性引用 */

           #id1{
               color: seagreen;
               font-size: 30px;
               font-family:Arial, Helvetica, sans-serif;
           }
        /*  4.后代选择器 */
           h4 p span{
               color:skyblue;
               font-size: 20;
               font-family: fantasy;
           }
        /*  5.组合选择器 */
           h5,h6{
               color:springgreen;
               font-size: 15px;
               font-family: cursive;
           }
        /*  6.父子选择器，父选择器包含子选择器，并且样式只能作用在子选择器
              上，而不能作用到父选择器上 */
           p>span{
               color: tomato;
               font-size: large;
               font-family: 微软雅黑;
           }
        /*  7.相邻选择器，选择紧接在某一个元素后的元素，并且二者
              有相同的父元素 */
           h2+h4{
                color: thistle;
                font-size: larger;
           }
        /*  8.属性选择器，对带有指定属性的HTML元素进行样式设置 */
           h1[align]{
               color:red;
           }
        /*  9.通用选择器，以“*”开头，即所有标记都使用该样式 */
           /* 
           *{
               color:thistle;
           } 
           */

        </style>
    </head>
    <body>
        <h1>一号标题</h1>
        <!--内嵌样式-->
        <h2 style="font-family: 仿宋; font-size: 20px; color: salmon;">二号标题</h2>
        <!--如果在两个类选择器中都同一个样式属性进行了样式定义，则后定义的样式起作用-->
        <h3 class="Class1 Class2">三号标题（类选择器）</h2>
        <h3 class="Class1">四号标题</h3>
        <h4 id="id1">The fourth title</h4>
        <span id="id1">The fourth tilte</span>
        <h4>
            <p>
                <span>The fifth title</span>
                <p>The fifth title</p>
            </p>
            <span>The fifth title</span>
        </h4>

        <h5>The sixth title</h5>
        <h6>The seventh title</h6>

        <p>
            <span>父选择器二号子</span>
            <p>父选择器一号子<span>Over</span></p>
        </p>

        <h2>
            <p>相邻选择器一号</p>
            <h2>相邻二号</h1>
            <h4>相邻三号</h4>
            <h4>相邻四号</h4>
        </h1>

        <h1 align="center">属性选择器</h1>


    </body>
</html>

运行结果：
在这里插入图片描述

Etui۹(･༥･´)و ̑̑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 将所
复制链接

扫一扫