灵活运用css选择器开发

前端开发总是离不开写css，ui框架写的再好也不可能完全满足于企业的要求。而一个css的构成则是由选择器，属性，值组合而成，大概长这样

选择器 {
    属性：值    
    属性：值
    ...
}

css选择器顾名思义就是用于选择需要添加样式的元素，前端开发最常用到的选择器是ID选择器和类选择器，但css选择器远不仅如此包括但不限于派生选择器、后代选择器、子选择器，兄弟选择器，属性选择器、伪类选择器以及复杂的组合选择器。

一个好的选择器不仅能够帮助我们准确的匹配需要添加样式的元素，往往还能还能减少不必要的js代码，使得代码简洁优雅、事半功倍。反之则使得代码沉长，可能还因为达不到想要的效果而捉襟见肘求助于js代码。

举个例子先：比如现在有三个 <li> 元素，实现除了最后一个外每个<li>加一个下划线

// bad
li {
    border-bottom:1px
}
li:last-child {
    border-bottom:none
}

需要两行代码才能实现略显沉长

// good
li:not(:last-child){
    border-bottom:1px
}

一行代码就能实现,但表达过于复杂,晦涩难懂

// very good
li+li {
    border-top:1px
}

一行代码就能实现,简单明了直抒胸臆

css选择器也可以称之为css选择表达式，你想要选择谁总得要表达清楚，选择某些元素就像生活中的找女朋友一样，首先你得打听她有没有男朋友吧。就比如接下来要讲的这个选择器:empty选择器

:empty选择器选择每个没有任何子级的元素（包括文本节点）

<p></p>
<p>I had a boyfriend</p>
<p>I had a boyfriend</p>

// css
p:empty {
    ...
}
// 利用这个这个可以做背景色,边框或者其他你随意

好的系统已经为你匹配到了一个妹子,但你想确定她就是你的唯一,这个时候我们可以用到:only-of-type

:only-of-type  代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

<div><p>This is a paragraph.</p></div>
​
<div><p>This is a paragraph.</p><p>This is a paragraph.</p></div>

// css
p:only-of-type
{
    background:#ff0000;
}
// 利用这个选择器当我们动态删减到最后一个元素的时候可以很方便的做出某种响应

然而并不是每段感情都能做到 连理并蒂 比翼不理 你们分手后便产生了交集和并集选择器

交集选择器

<h2 class="text">我是段落</h2>
<div class="text">我也是段落</div>
<div class="text text2">我是段落</div>

// css
.text {
 color:#333
}
h2.text {
   color:#666
}
.text.text2{
   color:#999 
}

// 交集选择器权重高于类

并集选择器

<p class="text1">我是段落</p>
<p class="text2">我是段落</p>
<p class="text3">我是段落</p>

// css
.text1,
.text2,
.text3 {
    color:#333
}

// 并集选择器管理公共样式