css中常见的3个标点符号 ：“+” 、“>”、“ ,”都是干啥的？

　在打开一些框架查看源码的时候，我们经常会看到这三个标点符号：“+” 、“>”、“ ,”，别说你没见过，但这些东西都是干啥的有啥用，俺就来给大家说说。
css提供了很多的选择器供开发者更加方便的选择html的dom元素节点，下面我们就来列举一下，被很多初学者忽略的2种选择器和一个选择器分组；

1.,（英文逗号）
选择器分组，将有相同样式的不同dom元素赋值统一样式，可以范围精简代码，和统一页面上的部分控件的交互样式，目前比较流行的前端框架bootstrap就运用了大量的分组。
如：

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

可以合并为

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}

/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}

/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

2. +（加号）
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
PS：这个应该是被大家很容易忽略的东西，博主表示自己平时也没怎么用过。

下面的代码是让h1后面的紧跟的第1个p元素有一个距离顶部50像素的外边距；

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

运行效果如下：
dd1

另外这个元素在一些伪装自定义选择控件时也常常用到，比如：

input[type='radio']:checked+label{}

大家可以看一下ace框架里面的这个自定义多/单选按钮是怎么做的
dd0

解释：上面的意思就是给每个选中的单选后面紧跟的label一个样式，当然 label肯定是听过伪类添加的如“:after”，如果不知道伪类的同学可以百度一下“css伪类”！

3.>（小写右尖括号）
子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

为什么用？
答：我们平时都是敲一个空格，那个是后代选择器，后代选择器是遍历当前节点之后的所有元素，这时候就会有两个问题：
第一：如果当前节点的后代过于庞大，使用后代选择器很容易污染后代节点中的样式环境，造成样式冲突；
第二：即便是没有样式冲突，浏览器会逐层渲染样式，后代相对子代会增加几倍甚至几十倍的查找次数，影响页面的性能（当然一般不会，不过难免成为压死骆驼的最后一根稻草0.0）；

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

运行效果
dd2

    共有 0 条评论

    Top
    ×