day7 vertical-align 高级选择器

cpshow300

于 2021-07-30 09:49:45 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/cpshow300/article/details/118683083

版权

本文详细介绍了CSS中的垂直对齐方式，包括top、middle、bottom和baseline，强调了display属性的重要性。同时，文章探讨了多种CSS选择器的用法，如后代选择器、子代选择器、毗邻选择器、属性选择器和伪类选择器，通过实例展示了如何精准地定位和修改页面元素。此外，还涉及了伪元素选择器在添加内容前后的应用。

摘要由CSDN通过智能技术生成

vertical-align:垂直方向上中下

top

middle

bottom

baseline(基线对齐)默认值

一共四条线第一条是top 最后一条是bottom 基线是第三条线 middle是中间分

垂直对齐的条件：display必须是inline inline-block

多组合选择器

    <style>
        div,p {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        

        

    </style>

高级选择器可以用逗号隔开选择多个标签

后代选择器

        /* 后代选择器 */
        div p{
            color:red;
        }
        /* 子代选择器 只改变一代 */
        div>p{
            background-color: blue;

        }

毗邻选择器

p1

p2

p3

p2是p1的紧随

p3是p2的紧随

<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+p {
            color: red;
        }
    </style>
</head>

<body>
    <p>p1</p>
    <p>p2</p>



</body>

p + p结果是会向下查找紧挨着的p标签会改变其他标签不会不紧随的不会将每个p标签都作为第一个往后边找一个p进行修改

属性选择器

[class]{width:;height:;}可以将包含此属性的标签进行修改

[class^=div]选中class属性的div标签

[class$=mydiv]选中class属性中内容是mydiv的

伪类选择器

link匹配所有没有被点击的链接

visited匹配所有点击过的链接

hover匹配鼠标悬停其上的E元素

active匹配鼠标已经其上按下、还没有释放鼠标的E元素

<style>
    a:link{
        color:red;

    }
    a:visited{
        color:blue;

    }

    a:hover{
        color:aqua;

    }

    a:active{
        color:yellow;
    
    }
</style>

伪元素选择器

    <style>
        p::before {
            content: "《";
        }
        
        p::after {
            content: "》";
        }
    </style>
</head>

<body>
    <p>web从入门到入坟</p>
</body>

在文字前后加东西