CSS基本选择器笔记

最新推荐文章于 2023-07-22 19:15:57 发布

胡先生的博客

最新推荐文章于 2023-07-22 19:15:57 发布

阅读量196

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_47683287/article/details/109321485

版权

CSS基本选择器

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #a{
                width: 50px;
                height: 50px;
                background-color: aqua;
            }
            .a1{
                width: 60px;
                height: 50px;
                background-color: black;
            }
            p[title]{
                color: chartreuse;
                font-size: 15px;
            }
            span{
                font-size: 20px;
                color: crimson;
            }
            h1.name{
                color: darkblue;
                font-size: 15px;
            }
            p.name{
                color: darkgreen;
                font-size: 16px;
            }
            ul li{
                color: darkkhaki;
                font-size: 16px;
            }
            .a2 > span{
                font-size: 16px;
                color: fuchsia;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- id选择器 : #id名 -->
        <div id="a"></div>

        <!-- class选择器 : .class名 -->
        <div class="a1"></div>

        <!-- 全选选择器：*{} -->

        <!-- 属性选择器：[属性名 / 属性名=属性值 / 属性名=^属性值(以什么开头) / 属性名$=属性值(以什么结束) / 属性名=*属性值(包含什么)]{} -->
        <p title="uname">你们好啊 </p>
        <p>你真好</p>

        <!-- 元素(标签)选择器 -->
        <span>我真的很帅</span>

        <!-- class选择器与元素选择器的结合使用:元素名.class名 -->
        <h1 class="name">很好啊</h1>
        <p class="name"> 我不是很好啊</p>

        <!-- 选择器分组 ：选中多个选择器，一起设置相应内容样式(选择器1，选择器2，....{}) -->

        <!-- 后代选择器：祖先 后代(根据上下结构找) -->
        <ul>
            <li>我很痛苦，但是很帅</li>
        </ul>

        <!-- 子代选择器(只能选择元素的子元素)：父元素 > 子元素 {} -->
        <div id="a2">
            <span>我不好</span>
        </div>

        <!-- 兄弟选择器(相同父元素)：前一个 + 后一个{}(选择前一个紧挨着的后一个兄弟元素)
                                   前一个 ~ 后一个{}(选择前一个紧挨着的后面所有兄弟元素)
        
        -->
        
        <script src="" async defer></script>
    </body>
</html>

胡先生的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基本选择器笔记

CSS基本选择器<!DOCTYPE html><!--[if IE 8]> <html cl
复制链接

扫一扫