.checkbox+.checkbox, .radio+.radio { ... } 这都是什么写法啊？前端真是越来越复杂了。。。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2897 天前的主题，其中的信息可能已经有所发展或是发生改变。

.checkbox+.checkbox, .radio+.radio { margin: 20px 30px 20px }

这个 + 加号是什么意思？ checkbox 和 raidio 的样式写一行，有什么特别意义吗（对比分两行写）？前端真是越来越复杂了。。。

19 条回复 • 2016-12-18 16:43:51 +08:00

rupert

2016-12-18 09:58:02 +08:00 via iPhone

兄弟选择器。挺老的了

Tyanboot

2016-12-18 09:59:05 +08:00 via Android

看起来+号好像是 emmet 写法？表示同级元素。.号纯粹就是 class 吧

airyland

2016-12-18 09:59:59 +08:00 via iPhone

你这还没入门就别说复杂了

rogwan

2016-12-18 10:02:22 +08:00

@airyland 前端兄弟刚跑路啦，临时改东东。。。

watzds

2016-12-18 10:03:44 +08:00 via Android

这些一直有吧，这就叫复杂？

逗号表示都用这个样式
点是 class
加号忘了
还有>，空格，不加空格表示不同父子，兄弟关系吧

watzds

2016-12-18 10:07:44 +08:00 via Android

我一个后端，去了让我搞什么 angular ， webpack ， glup ， babel ，好累😂

holyghost

2016-12-18 10:10:20 +08:00

@watzds 中央已经决定了，就你来写前端了。

coffeedeveloper

2016-12-18 10:12:44 +08:00 via Android

现在黑前端成了一种潮流？完全不看情况来黑…😂

ericls

2016-12-18 10:20:35 +08:00 via iPhone

这叫前端吗？这叫 UI

rogwan

2016-12-18 10:26:37 +08:00

@coffeedeveloper 前端一直黑产品（唧唧歪歪），产品一直黑运营（瞎 jb 搞），运营黑销售（就知道坑蒙拐骗偷），销售一直黑行政（除了拍老板马屁整天都忙啥），行政一直黑财务（扣），财务一直保安（没次来催报销的你怎么不拦着），保安一直黑后端（熬夜加班，怎么不知道早点起来干）。。。

old9

2016-12-18 11:54:30 +08:00 via Android

这里的写法不超出 CSS 2 ，算是基础知识了。

Jakesoft

2016-12-18 12:05:23 +08:00

兄弟这就暴露出你的水平啦，我也是后端，但是我还知道~,:,>,[], *,等等选择器呢, jquery 的各种选择器就不说了(突然优越起来)

rogwan

2016-12-18 12:16:26 +08:00

@Jakesoft 你是不是知道的太多了，你老板知道吗？ *_*

IamJ

2016-12-18 12:24:14 +08:00 via iPhone

这都是 CSS 基础，不能这样乱黑。。

Jakesoft

2016-12-18 12:35:43 +08:00

@rogwan 可惜老板不知道， 555

rogwan

2016-12-18 12:45:37 +08:00

@IamJ 前端是真不熟啊，上次请教一个前端朋友关于弹层中下拉菜单的选项问题，扔了一句：你不懂的，就算了，搞的很尴尬...

ethanlu

2016-12-18 14:34:22 +08:00

通过 + 号选择同层级中，紧接在元素后面的指定元素
<!DOCTYPE html>
<html>
<head>
<style>
div + p + p{
background-color: yellow;
}
</style>
</head>
<body>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p> \\只有这一个<p>元素会改变背景颜色，因为它是<div>紧接然后再紧接着的<p>元素

</body>
</html>

bdbai

2016-12-18 16:32:35 +08:00 via Android

@ethanlu HTML 注释是这样用的？

ethanlu

2016-12-18 16:43:51 +08:00

@bdbai

这只是我记在 markdown 里面的