web头歌 CSS组合选择器

最新推荐文章于 2024-03-21 00:25:15 发布

Yang enjoy

最新推荐文章于 2024-03-21 00:25:15 发布

阅读量620

点赞数 9

文章标签：前端 css

本文链接：https://blog.csdn.net/m0_74243656/article/details/135062639

版权

一、ACA

二、群组选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>群组选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
    h1,h2,h3{font-color:green;}
    </style>
    <!-- ********* End ********* -->
</head>
<body>
   <h1>一级标题</h1>
   <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>
</html>

三、后代选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>后代选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
    div p{
        font-color:blue;
        font-size:16px;
    }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <p>我的颜色是蓝色，我的字体大小是16px</p>
</div>
</body>
</html>

四、子元素选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>子元素选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
    div>p{
        font-color:green;
        font-size:20px;
    }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <p>我的颜色是绿色，我的字体大小是20px</p>
</div>
</body>
</html>

五、相邻兄弟选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>相邻兄弟选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
    h1+p{
        background-color:red;
    }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <h1>我是兄长</h1>
    <p>我是弟弟</p>
    <p>我是小弟</p>
</div>
</body>
</html>

六、普通兄弟选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>普通兄弟选择器</title>
    <!-- ********* Begin ********* -->
     <style type="text/css">
     h1~p{
         font-color:blue;
         font-size:36px;
     }  
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <h1>我是兄长</h1>
    <p>我是弟弟</p>
    <p>我是小弟</p>
</div>
</body>
</html>