html中加号用什么表示什么意思,CSS加号选择器你真的会用吗

`+`选择符手册给他的定义是相邻选择符

> E+F 相邻选择符(Adjacent sibling combinator) 选择紧贴在E元素之后F元素。

做一个示例

```php

li{

height:20px;

}

ul li.itemtwo+li{

//选取li类名为itemtwo的后一个为li元素

background: red;

}

  • 1
  • 2
  • 3
  • 4
  • 5

```

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200214165815199.png)

运行结果确实跟手册上描述的一致

但如果我们将样式代码修改成这样

```php

ul li+li{

background: red;

}

  • 1
  • 2
  • 3
  • 4
  • 5

```

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200214170017363.png)

除了第一个没有被选中外其他全部被选中,(不是相邻选择符吗?)对此我的理解是 当执行到 `ul li+li`选择器的时候

由于第一个`li`作为条件,但下面的每一个`li`都满足 `ul li`的元素,当选择第二个时,第二个`li`还是满足 `ul li +li`然后又继续选中第三个,,,以此类推,出现了上面这种情况。

**这种特性有什么用?**

先看下图

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200214170929599.png)

如上一个顶部区域 要实现每个板块的分隔符 ,要么设置前三个元素的右边框,要么设置后三个元素的左边框,或许你会这样做`li:nth-child(-n+3)`选中前三个元素,更笨一点的办法,一个一个的设置......

但今天引入了+选择符的特性之后,你还可以这样做如果你的布局是这样的话(其他标签类似)

```php

ul li+li{

border-left:1px solid #888;

}

```

该代码会直接选中后面几个`li`元素设置左边框。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值