3.2关系选择器

最新推荐文章于 2024-07-19 15:20:42 发布

二十二644

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量282

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/qq_61783164/article/details/121910458

版权

【1】div和span

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
        /* 
         我们可以通俗的理解，吧div理解为一个“塑料袋”
         div属于块级元素-->换行
         span属于行内元素-->没有换行效果
         span:里面的内容多大，span包裹的区域就有多大
         */
            div{
                border: 1px red solid;
            }
            span{
                border: 1px greenyellow solid;
            }
        </style>
    </head>
    <body>
            <div>马士兵马士兵马士兵马士兵<br/>马士兵马士兵</div>
            <div>马士兵</div>
            <span>马士兵马士兵马士兵</span>
            <span>马士兵</span>
            <span>马士兵</span>
    </body>
</html>

div和span 结合css用于页面的布局。div+css用于页面布局。

【2】关系选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            /* 关系选择器: 
                后代选择器：只要是这个元素的后代，样式都会发生变化
                div下面的所有的h1标签样式都会改变
            */
            /* div h1{
                color: red;
            } */
            /* 关系选择器：子代选择器 
                只改变子标签的样式
            */
            div>h1{
                color: royalblue;
            }
            span>h1{
                color: yellow;
            }
        </style>
            
    </head>
    <body>
            <div>
                <h1>这是标题</h1>
                <h1>这是标题</h1>
                <h1>这是标题</h1>
                
                <span>
                    <h1>这是标题</h1>
                    <h1>这是标题</h1>
                </span>
            </div>
    </body>
</html>

二十二644

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.2关系选择器

【1】div和span<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css
复制链接

扫一扫