伪类选择器

状态匹配

  • 默认 :link
  • 已经访问过的状态 :visited
  • 悬停的状态 :hover
  • 激活状态 :active

伪类状态匹配选择器 选择 表单 演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器:状态匹配</title>
    <style>
        /* 链接四种状态:顺序是固定的 */
        /* 1.默认,没有访问 点击 */
        a:link{
            color: aqua;
            text-decoration: none;
        }

        /* 2.已经访问过的状态 */
        a:visited{
            color: blueviolet;
        }

        /* 3.悬停的状态 */
        a:hover{
            color: brown;
            text-decoration: underline;
        }

        /* 4.激活状态,鼠标点击下去的时候 */
        a:active{
            color: #000;
        }


        /* ------------------------ */
        form p:first-of-type input:first-of-type{
            background-color: green;
        }

        /* input:read-only{
            background-color: #546;
        } */
        input[type=email]{
            background-color: #fff;
        }
        input:required{
            background-color: #457;
        }
        input:disabled{
            background-color: #879;
        }
        input:focus{
            background-color: #548;
        }

    </style>
</head>

<body>
    <!-- 1.链接 -->
    <a href="">城南花开</a>

    <!-- 2.表单 -->
    <form action="">
        <p>用户名<input type="text" name="" value="allen" readonly></p>
        <p>邮箱<input type="email" name="" value="" required></p>
        <p>密码<input type="password" name="" value="123456" disabled></p>
        <p><button>提交</button></p>
    </form>
</body>

</html>

选择器的优先级

1.当选择器相同时,与书写顺序有关,后面的样式覆盖前面的
2.当选择器类型不同时,与优先级相关 级别高的覆盖级别低的

id>class>tag

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的优先级</title>
    <style>
        /* 1.当选择器相同时,与书写顺序有关,后面的样式覆盖前面的 */
        h2{
            color:brown;
        }
        h2{
            color:#555;
        }

        /* -------- */
        /* 2.当选择器类型不同时,与优先级相关 级别高的覆盖级别低的 */
        .on {
            color: cadetblue;
        }

        /* h2无效,表示class的优先级要高于tag */
        h2{
            color:#555;
        }


        /* 如果仍想提升选择器的优先级,此时到了class级 我们应该用id级 */
        #one{
            color: chartreuse;
        }
        /* .on无效,因为级别低了 */
        .on {
            color: rgb(69, 76, 77);
        }


        /* 结论: id>class>tag */

        /* !important 不是选择器 */
    </style>
</head>
<body>
    <h2 class="on" id="one">hello world</h2>
</body>
</html>

选择器的优先级提权方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的优先级提权方式</title>
    <style>
        /* 1.申明的顺序对优先级的影响 */
        /* h2{
            color: chartreuse;
        } */

        /* 在后面有一个相同的声明,根据源码的顺序,后面有效 */
        /* h2{
            color: red;
        } */



        /* ================= */

        /* 2.选择器的类型对优先级的影响 */
        /* .on {
            color: chartreuse;
        }

        h2{
            color: red;
        } */

        /* 是否只能用选择器类型的提权来提升优先级? */
        /* 实际工作中,应该用一系列的选择器组合来灵活的设置优先级 */

        /* ============== */

       /* body h2 {
            color: chartreuse;
        }

        h2{
            color: red;
        } */

        /* 大家都是标签级,为什么写到后面的无效,一定有一个规则 */
        /* id>class>tag */
        /* 有一个计算公式:[id选择器的数量,class选择器的数量,tag标签选择器的数量] */
        /* body h2:[0,0,2] */
        /* h2[0,0,1] */
        /* tag级向calss级进位,class向id进位 */

        /* 如果想要继续提权,选择一个只要比body h2权重搞得选择器组合就可以了 */
        html body h2 {
            color: yellow;
        }

        body h2 {
            color: chartreuse;
        }
        /* 011 */
        h2.on{
            color:chartreuse;
        }
        /* 012 */
        body h2.on{
            color: chocolate;
        }

        /* 100 */
        #one{
            color: cyan;
        }
    </style>
</head>

<body>
    <h2 class="on" id="one">hello world</h2>
</body>

</html>

属性简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性简写</title>
    <style>
        .title{
            /* font-family: sans-serif;
            font-size: 24px;
            font-style: italic;
            font-weight:600; */

            /* 简写 */
            font: italic lighter 36px sans-serif;
        }
        body{
            /* background-color: #125;
            background-image: url("https://etax.guizhou.chinatax.gov.cn/xxmh/resources4/tax-images/login/foot.png");
            background-repeat: no-repeat;
            background-size: 5px;
            /* background-position: 50px 50px; */
            /* background-position: top; */
           /* background-position:  top; */

            /* 简写 */
            background: url(https://img.gzj2001.com/logo.jpg);
        }
    </style>
</head>
<body>
    <h2 class="title">helloworld</h2>
</body>
</html>

盒模型的简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型的简写</title>
    <style>
        .box{
           width: 200px;
           height: 200px; 
           background-color: yellow;
        }
        .box{
            /* 边框 */
            /* 每个边框可以设置三个属性:宽度,样式,颜色 */
            /* border-top-width: 3px;
            border-top-color: red;
            border-top-style: solid; */

            /* 简写
            border-top: 5px red solid;
            border-bottom:5px red solid ; */

            border: 5px red solid;
        }

        .box{
            /* 内边距 */
            /* padding: 上 右 下 左 顺时针方向 ; */
            padding: 5px 10px 5px 10px;
            /* 页面看不到是因为padding是透明的,且背景色会自动拓展到padding */
            /* 将背景色裁切到内容区 */
            background-clip: content-box;
            
            /* 当左右相等 上下不相等,用3个value */
            padding: 5px 10px 5px;
            /* 当左右相等,上下也相等,用2个value */
            padding: 5px 10px;
            /* 如果四个方向全相等,使用单值语法 */
            padding: 10px;

            /* 总结:当使用三值和两值时,只需要记住第二个永远表示左右就可以了 */
        }

        .box{
            /* 外边距 */
            /* 控制多个盒子之间的排列间距 */
            /* 四值 t r b l */
            margin: 5px 10px 15px 20px;
            /* 三值 l=r t不等b  */
            margin:10px 30px 15px;
            /* 两值 上下上等 左右相等 */
            margin: 10px 50px;
            /* 单值 四个都相等 */
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

作业

作业标题:1216作业
作业内容:
1.实例演示选择器组合实现优先级提权方式;
2.实例演示字体与字体图标;
3.实例演示盒模型常用属性的缩写方案

演示地址:
https://php.gzj2001.com/day6/index.html
image.png

作业代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1216作业</title>

    <style>
        a:link {
            color: aqua;
            text-decoration: none;
        }

        a:visited {
            color: blueviolet;
        }

        a:hover {
            color: brown;
            text-decoration: underline;
        }

        a:active {
            color: #000;
        }

        input:required {
            background-color: #555;
        }

        input:disabled {
            background-color: #666;
        }

        input:read-only {
            background-color: #777;
        }

        #beiid {
            background-color: #777;
        }

        html body span.bei {
            background-color: #666;
        }

        body span.bei {
            background-color: #555;
        }

        span.bei {
            background-color: #444;
        }

        .bei {
            background-color: #333;
        }

        html body span {
            background-color: #222;
        }

        body span {
            background-color: #111;
        }

        span {
            background-color: #000;
        }

        @font-face {
            font-family: 'iconfont';
            src: url('css/iconfont.eot');
            src: url('css/iconfont.eot?#iefix') format('embedded-opentype'),
                url('css/iconfont.woff2') format('woff2'),
                url('css/iconfont.woff') format('woff'),
                url('css/iconfont.ttf') format('truetype'),
                url('css/iconfont.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body .iconfont{
            background-color: #fff;
            font-size: 64px;
        }
        .test{
            width: 300px;
            height: 200px;
            /* 边框 */
            border: 5px rgb(0, 134, 116) solid;
            /* 背景裁切 */
            background-color: #999;
            background-clip: content-box;
            /* 内边距 */
            padding: 10px;
            /* 外边距 */
            margin: 5px;
        }
    </style>
</head>

<body>
    <a href="">状态匹配选择器</a>
    <form action="">
        <p>邮箱<input type="" required></p>
        <p>账号<input type="" required></p>
        <p>密码<input type="" disabled></p>
    </form>
    <hr>
    <span class="bei" id="beiid">我是要被提权的家伙</span>
    <hr>
    引用字体图标与提权
    <span class="iconfont">&#xe606;</span>
    <hr>
    盒模型简写
    <div class="test">

    </div>
</body>

</html>

其他信息

My Blog: https://www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html