CSS选择器（入门基础教程）

@动感superman

于 2024-10-09 23:11:20 发布

阅读量309

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80208072/article/details/142738436

版权

    <style>
        ul li{
            color: #ff0000;
        }
    </style>
</head>
<body>
    <ul >
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
        <div>
            <ol>
                <li>第四节</li>
                <li>第五节</li>
            </ol>
        </div>
    </ul>
</body>

2.子代选择器

以下例子子代选择器选中的是div下的儿子p标签，所以只有 “大家好” 会生效

    <style>
        div>p{
        color: #f70000;
        }
    </style>
</head>
<body>
    
    <div>
        <p>大家好</p>
        <ul>
            <li>
                <p>我还好</p>
            </li>
        </ul>
    </div>
</body>

3.通用兄弟选择器

通用兄弟选择器后面的平级都生效，以下例子生效的是h3下的p标签。

    <style>
        h3~p{
            color: brown;
        }
    </style>
</head>
<body>
    <h3>我是标题</h3>
    <p>我是内容1</p>
    <div>我是内容2</div>
    <p>我是内容3</p>
    <p>我是内容4</p>
</body>

4.相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一个元素后的元素，所以以下代码只有我是内容1 生效。

    <style>
        h3+p{
            color: brown;}
    </style>
</head>
<body>
    
    <h3>我是标题</h3>
    <p>我是内容1</p>
    <p>我是内容2</p>
</body>

三、并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。如以下p标签跟h3标签可以同时定义相同的样式。

<style>
    p,h3{
        font-size: 30px;
        color: #e40000;}
</style>
</head>
<body>
    <p>我是p标签</p>
    <h3>我是标题标签</h3>
</body>
</html>

@动感superman

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

CSS选择器（入门基础教程）

目录

一.常用选择器

1.元素选择器

2.类选择器(class选择器)

3.ID选择器

二、关系选择器

1.后代选择器

2.子代选择器

3.通用兄弟选择器

4.相邻兄弟选择器

三、并集选择器