相邻元素选择器

最新推荐文章于 2022-10-04 10:53:58 发布

weixin_34146986

最新推荐文章于 2022-10-04 10:53:58 发布

阅读量415

点赞数

原文链接：http://www.cnblogs.com/till-the-end/p/9967709.html

版权

简介

在写css样式布局的时候经常会遇到一种情况，在循环列表的时候统一有margin-top：10px,或者margin-right: 10px这样的情况，但是你并不想第一个元素添加上外边距；在不知道相邻兄弟选择器前通常是自定义class样式把第一个元素设置为margin-top:0;使用了相邻兄弟选择器后只需要一行代码就可以解决

html

<body>
    <div>
        <ul>
            <li>ABC</li>
            <li>ABC</li>
            <li>ABC</li>
            <li>ABC</li>
        </ul>
    </div>
</body>

css

　　<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            padding-left: 10px;
        }
        li {
            margin-top: 10px;
        }
　　</style>

解决方法和实现效果

即在元素后面添加+号，具体参考可以查看 http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

<style>
        li+li {
            margin-top: 10px;
        }
</style>

小结

能用css解决的问题就不要用js或者滥用css加大复杂度，本篇做个小记录，为以前的自己感到????！

转载于:https://www.cnblogs.com/till-the-end/p/9967709.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34146986

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法

weixin_34050005的博客

09-29

5518

CSS相邻元素选择器

weixin_34290000的博客

07-31

698

2019独角兽企业重金招聘Python工程师标准>>> ...

参与评论您还未登录，请先登录后发表或查看评论

css相邻兄弟元素选择器

前端菜鸟

02-04

5262

要选择紧接在另一个元素后的元素，并且二者有相同的父元素，可以使用相邻兄弟结合符，这表示为一个加号（+）。与子结合符一样，相邻兄弟结合符旁边可以有空白符。要去除紧接在一个h1元素后出现的段落的上边距h1 + p {margin-top: 0;}如果相邻元素之间多了一行文本，还是可以用+选择器来匹配第二个元素，这是因为中间的文本并不包含在兄弟元素中，而只是父元素的一部分

相邻选择器（CSS选择器）

dongbo2355的博客

09-10

2973

相邻选择器：首先要知道浏览器的一个特性，他是从上向下执行的。只选中他的兄弟类，所以也叫兄弟选择器。方式1：类名1 + 类名2{ } 只能选中类名2 方式2：类名1 ~ div { } 除了类名1不会选中，他所有兄弟类都会被选中。方式1：选中类b <!DOCTYPE html> <html> <head> ...

前端基础-CSS相邻元素选择器

逍遥云恋

03-30

1263

相邻元素选择器 哥哥+弟弟{} /*通过哥哥选择到弟弟 */ 例： <style> div+p{/* 兄弟选择器，哥哥标签+弟弟标签，，，，修饰的是弟弟 */ color:red; } </style> <div>第一个盒子</div> <p>第一个段落</p> <p>第二个段落</p> ...

CSS的相邻兄弟选择器用法简单讲解

09-24

CSS的相邻兄弟选择器是CSS选择器中用于定位和样式化具有相同父元素的相邻元素的工具。它的主要作用是选取紧接在另一个元素后的元素，且这两个元素必须拥有同一个父级元素。相邻兄弟选择器的用法相对简单，只需要理解...

css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法

得意小门生的博客

08-19

7310

前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相邻兄弟选择器（+）相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。器。 &lt.

html5相邻选择器,相邻选择器 - 无可奈何花落去似曾相识燕归来 - BlogJava

weixin_29378273的博客

06-07

878

这个选择器的正式名称(根据W3C)是临近同属组合器。我觉得这个名称既长又复杂，因此把它简称为相邻选择器。虽说是"相邻"，但相邻选择器选取的却是一个元素的下一个元素。基于图3-14中的标记，图3-24中的标记示范了相邻选择器的形式。注意：IE 6本身并不支持相邻选择器；请查阅本书的网址www.wrox.com/go/beginning_css2e以获取兼容性方面的帮助。图 3-24在图3-24中，...

相邻兄弟选择器（+）

bingkingboy的博客

03-31

7776

今天在做导航栏的时候，需求里面需要实现一个小的动画效果，需求：导航栏中，鼠标移入每个链接，链接字体颜色发生改变，同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故，动画使用JQuery的animation函数来实现的。当完成导航栏的制作后，我突发奇想如果不需要用到任何JS是否可以实现该动画。先看下测试中导航栏的代码 HTML <div class="nav"> <u

JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

11-22

本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法。分享给大家供大家参考，具体如下： /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型，上一个(1)or下一个(0) * @return 返回查找到的元素Dom对象，无则返回null */ function getNearEle(ele, type) { type = type == 1 ? "previousSibling" : "nextSibling"; var nearEle = ele[type]; while(nearEle) {

jQuery选择器

qi341500的博客

10-04

1210

一、jQuery基础选择器 1、标签选择器 2、类选择器 3、ID选择器 4、并集选择器 5、交集选择器 二、层次选择器 1、后代选择器 2、子选择器 3、相邻元素选择器 4、同辈元素选择器 5、属性选择器 6、过滤选择器 7、jQuery筛选方法

jquery兄弟选择器

热门推荐

心中有侠

08-03

1万+

function tranagleWhiteBlock(id){ $("#"+id).next().attr("style","display:block;"); } .next() 是指他下一个兄弟 .prev() 是指他上一个兄弟

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

weixin_33742618的博客

08-01

216

前几天遇到一个页面需求是这样的：一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。需求：没有文字，没有聚焦——点赞没有文字，聚焦——灰色发送有文字——红色发送如果用JS实现，需要监听输入框的change和focus事件，比较麻烦。但是用CSS中的伪类就可以实现相近效果。 ...

jquery选择相邻元素_从0到1~jQuery入门基础（t131t135）

weixin_35544512的博客

01-30

244

还是给大家继续分享代码！t131<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="../js/jquery-3.5.1.js">script> <script> ...

前端笔记22——CSS相邻选择器

裕博的博客

11-05

960

前言前面我有分享到学习到了3个选择器，这里给大家分享一下其他的选择器。相邻选择器 相邻选择器是指选择某个元素后面相邻的元素，运用到的符号是+。下面通过实例来演示一下： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-

相邻的下一个兄弟元素

weixin_34281477的博客

01-28

263

2019独角兽企业重金招聘Python工程师标准>>> ...

CSS3 元素选择器巧记方法

Zoy_Gong的博客

07-27

298

css 后代选择器有很多，乍一眼看上去都差不多，死记硬背不是长久之计，为此，我做了简单的总结，抽象了一个巧记的方法。父元素（XXX）下面第N个（YYY）元素注：XXX为父元素名字，YYY为目标后代元素描述条件例如： p:first-of-type 父元素（缺省）下面（缺省）第一个p元素 p:last-of-type ...

css3的相邻选择器,css + 相邻元素选择器介绍

weixin_36488954的博客

08-03

5015

css相邻选择器css相邻选择器用来“+”号表示，+号左右两个选择器，选择第一个选择器后面紧跟着的第二个选择器，两个选择器的元素必须是相邻关系才行。ul{margin:20px;padding:20px;border:1pxsolid#ccc;list-style:none;}ulli{background:#f1f1f1;border:1pxsolid#bababa;font-size...

jQuery选择器实战：高效定位与过滤DOM元素

3. 层叠选择器与子元素选择: - `$("form input")` 选取所有的 `form` 元素内的 `input` 子元素。 - `$("#main > *")` 选择id为 "main" 的元素的所有直接子元素。 4. 同胞选择器与过滤选择器: - `$("label + ...