CSS的相邻兄弟选择器用法示例讲解-css教程-PHP中文网

首页

web前端

css教程

CSS的相邻兄弟选择器用法示例讲解

高洛峰

Mar 07, 2017 pm 02:36 PM

css选择器

对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:

可选择紧接在另一个元素后的元素，且二者有相同的父级元素下面代码中，item2和item3会有效果，而item1不会有
HTML代码：

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

CSS代码：

li+li { font-size: 50px; }

1、如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
2、相邻兄弟选择器使用加号“+”做为连接符。

示例

<html>

<head>
    <style type="text/css">
        #p1 + p {   
            margin-top: 50px;   
        }   
    </style>
</head>

<body>
    <p id=&#39;p1&#39;>This is paragraph 1.</p>
    <p id=&#39;p2&#39;>This is paragraph 2.</p>
    <p id=&#39;p3&#39;>This is paragraph 3.</p>
    <p id=&#39;p4&#39;>This is paragraph 4.</p>
</body>

</html>

CSS的相邻兄弟选择器用法示例讲解

更多CSS的相邻兄弟选择器用法示例讲解相关文章请关注PHP中文网！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

什么是CSS网格？Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂，响应式Web布局的强大工具。它简化了设计，提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架

CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画？Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS，关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗？Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换，关键属性，浏览器兼容性和性能注意事项的讨论。（角色计数：159）

我们如何在CSS中添加梯度？Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度（线性，径向，重复）来增强网站视觉效果，添加深度，焦点和现代美学。

CSS中的伪元素是什么？Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素，它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

热工具

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

记事本++7.3.1

好用且免费的代码编辑器

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。