css选择器总结

最新推荐文章于 2023-05-19 18:25:52 发布

ohmorning

最新推荐文章于 2023-05-19 18:25:52 发布

阅读量80

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_41818857/article/details/104080151

版权

id选择器

  <style>
        #myDiv{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

<body>
    <div id="myDiv"></div>
</body>

class选择器

 <style>
       .myDiv{
           width: 100px;
           height: 100px;
           background-color: red;
       }
   </style>

<body>
    <div class="myDiv"></div>
</body>

标签选择器

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
<body>
    <div></div>
</body>

并集选择器

<style>
    .a,.b{
            width: 100px;
            height: 100px;
            background-color: red;
        }
       .b{
            margin-top: 10px;
        }
    </style> 
<body>
    <div class="a">aa</div>
    <div class="b">bb</div>
</body>

交集选择器

 <style>
        span.cheap {
            color: red;
        }

        span.expensive {
            color: green;
        }
  </style>
  <body>
    <ul>
        <li><span class="cheap">苹果</span></li>
        <li class="cheap">香蕉</li>
    </ul>
    <span class="expensive">榴莲</span>
</body>

后代选择器

 <style>
           .wrap div{
                color: red;
                margin-bottom: 15px;
                border: 1px solid black;
            }
  </style>

<body>
       <div class="wrap">
            <div>
                子元素1
                <div>孙元素1-1</div>
            </div>
            <div>
                子元素2
                <div>孙元素2-2</div>
            </div>
            <div>
                子元素3
                <div>孙元素3-3</div>
            </div>
        </div>
    </body>

在这里插入图片描述

子代选择器

 <style>
            .wrap>div{
                color: red;
                margin-bottom: 15px;
                border: 1px solid black;
            }
        </style>

<body>
        <div class="wrap">
            <div>
                子元素1
                <div>孙元素1-1</div>
            </div>
            <div>
                子元素2
                <div>孙元素2-2</div>
            </div>
            <div>
                子元素3
                <div>孙元素3-3</div>
            </div>
        </div>
    </body>

在这里插入图片描述

相邻兄弟选择器

 <style>
            .one+div{
                color: red;
                margin-bottom: 15px;
                border: 1px solid black;
            }
        </style>

<body>
        <div class="wrap">
            <div class="one">
                子元素1
                <div>孙元素1-1</div>
            </div>
            <div>
                子元素2
                <div>孙元素2-2</div>
            </div>
            <div>
                子元素3
                <div>孙元素3-3</div>
            </div>
        </div>
    </body>

在这里插入图片描述

通用兄弟选择器

<style>
            .one~div{
                color: red;
                margin-bottom: 15px;
                border: 1px solid black;
            }
        </style>

<body>
        <div class="wrap">
            <div class="one">
                子元素1
                <div>孙元素1-1</div>
            </div>
            <div>
                子元素2
                <div>孙元素2-2</div>
            </div>
            <div>
                子元素3
                <div>孙元素3-3</div>
            </div>
        </div>
    </body>

在这里插入图片描述

选择器root、not、empty和target
选择器first-child、last-child、nth-child和nth-last-child
nth-of-type和nth-last-of-type
only-child
伪类选择器E:link、E:visited、E:hover、E:active、E:focus
伪类选择器E:enabled与E:disabled
伪类选择器E:read-only与E:read-write
伪类选择器E:checked、E:default、E:inderterminate
伪类选择器E::selection
伪类选择器E:invalid与E:valid
伪类选择器：E:required与E:optional
伪类选择器E:in-range 与 E:out-of-range
伪元素选择器 E::after、E:before、first-line、first-letter

ohmorning

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器总结

id选择器 <style> #myDiv{ width: 100px; height: 100px; background-color: red; } </style><body> <div id="myDiv">&lt...
复制链接

扫一扫