web前端3.19

最新推荐文章于 2024-10-09 23:31:03 发布

Ajiang421

最新推荐文章于 2024-10-09 23:31:03 发布

阅读量324

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Ajiang421/article/details/137010743

版权

一、属性选择器与伪类选择器

属性选择器：匹配那些具有特定属性或属性值的元素

<style>
        /*  */
        input[type="password"] {
            background-color: aqua;
        }

        /* 具有某个属性的指定标签 */
        div[title] {
            background-color: pink;
        }

        /* 属性的值中包含某个值 */
        input[type*="e"] {
            background-color: blueviolet;
        }

        /* 属性值以什么开头 */
        input[type^="p"] {
            background-color: brown;
        }

        /* 属性值以什么结尾 */
        input[type$="t"] {
            background-color: red;
        }

        /* +表示的是下一个标签 */
        .box1+p {
            background-color: blue;
        }
    </style>

伪类选择器：添加到选择器的关键字，用于指定所选元素的特殊状态。

<style>
        /* 访问前 */
        a:link {
            color: red;
        }

        /* 访问后 */
        a:visited {
            color: chartreuse;

        }

        /* 鼠标悬停时 */
        a:hover {
            color: pink;
        }

        /* 鼠标点击时 */
        a:active {
            color: darkblue;
        }

        /* 需要按照lvha的顺序书写 */
    </style>

其他伪类：

    <style>
        ul li:nth-child(8) {
            background-color: pink;
        }

        li:nth-child(2n+1) {
            background-color: blue;
        }

        li:last-child {
            background-color: aqua;

        }

        ul li:first-child {
            background-color: aquamarine;

        }

        li:nth-of-type(3) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是一个li1</li>
        <li>我是一个li2</li>
        <p>我是一段文字</p>
        <li>我是一个li3</li>
        <li>我是一个li4</li>
        <li>我是一个li5</li>
        <li>我是一个li6</li>
        <li>我是一个li7</li>
        <li>我是一个li8</li>
        <li>我是一个li9</li>
        <li>我是一个li10</li>
        <li>我是一个li11</li>
        <p>我是一个段落</p>

    </ul>


</body>

伪元素选择器：伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

<style>
        ul li::before {
            content: "66666";
            width: 10px;
            height: 10px;
            background-color: pink;
        }


        ul li::after {
            content: "----------------zhangsan";

        }

        /* 文字被选中时 */
        ul li::selection {
            background-color: pink;
        }
    </style>

二、文本修饰：

font：

 font-size: 12px;
            /*  */
            font-weight: 700;
            text-align: center;
            font-style: italic;
            /* 字体族 */
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            /* 让行高等于容器的高度，来实现单行文本的垂直居中  */
            line-height: 300px;

            /* 默认400是正常粗细，700是加粗字体   bold*/
            /* font-weight: 400;    normal*/
            font-weight: bold;

            /* line-height: 40px; */

            /* font：style weight size/line-height family； */
            font: italic 700 30px/40px "微雅软黑";

文本缩进：text-indent: 2em;

文本装饰：

/* 主要用于去除a链接的默认样式 */

text-decoration: none;

颜色：

            /* background-color: aqua; */
            /* 关键字 */
            color: rgb(131, 13, 33);
            /* rgb函数（红、绿、蓝）三原色 */
            /* rgba函数（红、绿、蓝、透明度） */
            color: rgba(131, 13, 33, 0.3);

            /* 十六进制表示 */
            color: #00FFFF;

三、练习：五彩导航

本次选择用伪类选择器方法进行试验，则鼠标悬在上方时变色

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>五彩导航</title>
    <link rel="stylesheet" href="css1.css">
</head>
 
<body>
 
    <div class="five">
        <a href="#" class="five1">五彩导航</a>
        <a href="#" class="five2">五彩导航</a>
        <a href="#" class="five3">五彩导航</a>
        <a href="#" class="five4">五彩导航</a>
    </div>
 
</body>
 
</html>

css:

.five a {
 
    display:inline-block;
    width: 120px;
    height: 58px;
    background-color:pink;
    text-align: center;
    line-height: 50px;
    color:aqua;
}
.five .five1:hover {
    background-color: yellow;
}
.five .five2:hover {
    background-color: purple;
}
.five .five3:hover {
    background-color:red;
}
.five .five4:hover {
    background-color: blue;
}