CSS3中的子元素选择器

 目录：html5+css3网页设计与制作目录

1.子元素选择器>，用来选中某个元素的第一级子元素，也就是儿子元素

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 子代选择器,只对儿子元素有效 */
            p>strong
            {
                color: red;
            }
        </style>
    </head>
    <body>
        
        <p>这是p标签，<strong>表示一个段落</strong></p>
        <p>这是p标签，嵌套了<i>b标签和<strong>i标签</strong></p>    
    </body>
</html>
复制代码

2.兄弟选择器+，两个元素有同一个父元素，只对邻近的第一个元素起作用

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 兄弟选择器,只对相邻的一个元素起作用 */
            h3+p{
                color: #008000;
                font-size: 18px;
                font-family: "楷体";
            }
        </style>
    </head>
    <body>
        <h3>望庐山瀑布</h3>
        <p>日照香炉生紫烟，遥看瀑布挂前川。</p>
        <p>飞流直下三千尺，疑是银河落九天。</p>
    </body>
</html>
View Code
复制代码

3.普通兄弟选择器~，多个元素具有同一个父元素，不必邻近。

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 普通兄弟选择器,对所有相邻的元素都起作用，不用紧跟第一个元素 */
            h3~p{
                color: red;
            }
        </style>
    </head>
    <body>
        <h3>望庐山瀑布</h3>
        <h5>作者：李白</h5>
        <p>日照香炉生紫烟，遥看瀑布挂前川。</p>
        <p>飞流直下三千尺，疑是银河落九天。</p>
    </body>
</html>
View Code
复制代码

 

posted @   YorkShare  阅读(667)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛