伪元素、属性、通配符选择器及CSS三大特性

weixin_45753087

已于 2022-08-18 09:52:08 修改

阅读量86

点赞数

文章标签：前端 html javascript

于 2022-07-28 18:48:37 首次发布

本文链接：https://blog.csdn.net/weixin_45753087/article/details/126039102

版权

（承接上篇）

1.伪元素选择器

<head>
    <style>
        /* 伪元素选择器 */
        p::after{
            /* 内容在标签内容之后 内容不可选定 */
            content: '我是一个::after';
        }
        p::before{
            /* 内容在标签内容之前 内容不可选定 */
            content: '我是一个::before';
        }
        /* 首字符样式 设置第一个字符的样式 */
        p::first-letter{
            color: red;
            font-size: 28px;
        }
        /* 首行文字样式 设置第一行的样式 跟随窗口大小改变 */
        p::first-line{
            color: blue;
        }
    </style>
</head>
<body>
    <p>我是一个段落标签我是一个段落标签我是一个段落标签
        我是一个段落标签我是一个段落标签我是一个段落标签
        <br>
        我是一个段落标签我是一个段落标签我是一个段落标签我是一个段落标签
    </p>
</body>

2.属性选择器

<head>
    <style>
        /* 属性选择器 */
        /* 标签[属性:值] 只对type的值为text的做更改 */
        /* input[type="text"]{
            background-color: red;
        } */
    </style>
</head>
<body>
    <form action="">
        用户名: <input type="text" name="username">
        密码: <input type="password" name="user-name">
    </form>
</body>

CSS2

<head>
    <style>
        /* 以...开头 */
        /* 只更改name属性中以 user 开头的属性
            如果没有使用了 - 隔开，则不更改
            例如用户名的name为username,没有使用 - 隔开，
            那么不对密码进行更改 */
        input[name|='user']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <form action="">
        用户名: <input type="text" name="username">
        密码: <input type="password" name="user-name">
    </form>
</body>

CSS3

<head>
        /* 以...开头 */
        /* 只更改name属性中以 user 开头的属性
            与CSS2不同的是，CSS3的name属性不管有没有 - 隔开，
            都会更改其属性 */
        /* input[name^='user']{
            background-color: blue;
        } */
    </style>
</head>
<body>
    <form action="">
        用户名: <input type="text" name="username">
        密码: <input type="password" name="user-name">
    </form>
</body>

3.通配符选择器

由于通配符选择的是界面上所有的标签属性，企业开发中一般不用，就我个人而言，多用于清除表格样式

<head>
    <style>
        /* 通配符选择器 去除标签的默认样式 */
        *{
            /* 去除标签的下划线 */
            text-decoration: none;
            /* 去除无序列表样式 */
            list-style-type: none;
            /* 去除标签的外边距 */
            margin: 0;
        }
        /* 组合选择器 设置到一起共同设置样式 */
        .div1,.a1,#ul1{
            font-size: 28px;
        }
    </style>
</head>
<body>
    <div class="div1">我是一个div </div>
    <a href="" class="a1">百度一下</a>
    <ul id="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

4.CSS三大特性

1.继承性

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性注意点: 1.并不

<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>
        .div1{
            font-size: 28px;
            color: red;
            /* 文字水平对齐 */
            text-align: center;
            line-height: 30px;
        }
        #div2{
            background-color: blue;
            color: white;
        }
        #p2{
            color: pink;
        }
        .p1{
            color: red !important;
        }
        p{
            font-size: 28px;
            color: blue;
        }
        *{
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="div2" class="div1">我是父亲
        <div>我是儿子
            <div>
                我是孙子
            </div>
        </div>
        <a href="">百度一下</a>
        <h1>一级标题</h1>
    </div>
    <p id="p2" class="p1" style="color:yellow">我是一个段落标签</p>
    <!-- 3.优先级 -->
    <!-- 
        1.important 优先级最高
        2.style属性 特征值1000
        3.id标签选择器 特征值100
        4.class类选择器/伪类/属性选择器 特征值10
        5.标签选择器、伪元素选择器 特征值1
        6.通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，特征值0000
     -->
</body>

是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承 2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 3.继承性中的特殊性 3.1 a标签的文字颜色和下划线是不能继承的,当做子元素 3.2 h标签的文字大小是不能继承的，在做子元素

2.层叠性

作用: 层叠性就是CSS处理冲突的一种能力注意点: 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

3.优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定