前端学习 -- Css -- 兄弟元素选择器

简介: 为一个元素后边的元素设置css样式:语法:前一个 + 后一个。作用:可以选中一个元素后紧挨着的指定的兄弟元素。为一个元素后边的所有相同元素设置css样式:语法:前一个 ~ 后边所有。DOCTYPE html> ...

为一个元素后边的元素设置css样式:

语法:前一个 + 后一个。

作用:可以选中一个元素后紧挨着的指定的兄弟元素。

为一个元素后边的所有相同元素设置css样式:

语法:前一个 ~ 后边所有。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h1 + p{
                background-color: orange;
            }
            span ~ p{
                background-color: green;
                color: white;
                font: "courier new";
            }
            
        </style>
    </head>
    <body>
        <h1>我是一个h1标签</h1>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <span>我是一个span</span>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <a href="http://www.baidu.com">百度</a>
        <p>我是一个p标签</p>
    </body>
</html>

 

效果:

 

相关文章
|
21天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
|
21天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
41 4
|
6天前
|
XML 前端开发 数据格式
css元素
【4月更文挑战第20天】css元素
14 4
|
9天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
11 0
|
10天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
14天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
18 2
|
19天前
|
前端开发 JavaScript Java
通过学习mayfly,我学会了前端如何优雅设计字典值
`shigen`是一位擅长多种编程语言的博主,他在探索[mayfly-go](https://juejin.cn/post/7319365035552309248)项目后,发现了对枚举值管理的优雅设计。他分享了如何将字典和枚举值结构化,使用Vue+typescript实现更易维护的代码。通过创建`TagType`和`EnumValue`类,以及提供静态方法,实现了模块化和简洁的字典处理。示例展示了如何在页面中高效引用和显示字典数据,提高了代码的可读性和可维护性。
17 3
通过学习mayfly,我学会了前端如何优雅设计字典值
|
23天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
N..
|
1月前
|
前端开发 UED
CSS选择器
CSS选择器
N..
9 0