一些容易忽略的css选择器

基础选择器

• ID 选择器，用法如下：

#content{
    color: #fff;
    background: #000;
}

• 类选择器,用法如下：

    .list-item{
    border-bottom: 1px solid #ccc;
}

• 通配选择器，用法如下：

    *{
    margin: 0;
    padding: 0;
}

上面这个样式就是把所有元素的内外边距都归零。由于通配选择器要把样式覆盖到所有的元素上，可想而知它的效率并不会高，所以在实际开发中一般不建议使用通配选择器。

• 标签选择器

   h1{
    font-size: 20px;
}

• 属性选择器;属性选择器有如下几种形式：

1. [attr]，用来选择带有 attr 属性的元素，如刚提到的 a [href]。

       <!-- HTML： -->
   <a href="/">返回主页</a>
   
   // 下面的CSS会使所有带href的a标签字体变红色：
   a[href]{
       color: red;
   }
   

2. [attr=xxx]，用来选择有 attr 属性且属性值等于 xxx 的元素，如选择所有文本类型的输入框，可以用 input [type=text]。注：xxx 和 HTML 中的属性值必须完全相等才会生效

       <!-- HTML： -->
       <input class="input text" type="text" value="大花碗里扣个大花活蛤蟆"/>
       
       // CSS：
       input[type=text]{
           color: red;
       }
   

3. [attr~=xxx]，这个选择器中间用了～=，选择属性值中包含 xxx 的元素。

       <!-- HTML： -->
       <input class="input text" type="text" value="大花碗里扣个大花活蛤蟆"/>
       
       // CSS：
       input[class~=input]{
           color: red;
       }
   

4. [attr|=xxx]，这个选择器是用来选择属性值为 xxx 或 xxx- 开头的元素，比较常用的场景是选择某一类的属性。

       <!-- HTML： -->
       <div class="article">我是article</div>
       <div class="article-title">我是article-title</div>
       <div class="article-content">我是article-content</div>
       <div class="article_footer">我是article_footer，不是以artical-开头的</div>
       
       // CSS：
       div[class|=article]{
           color: red;
       }
   

5. [attr^=xxx]，这个选择器会匹配以 xxx 开头的元素，实际上就是用正则去匹配属性值，只要是以 xxx 开头都可以。跟上例的区别就是最后一个会被选中；

       <!-- HTML： -->
       <div class="article">我是article</div>
       <div class="article-title">我是article-title</div>
       <div class="article-content">我是article-content</div>
       <div class="article_footer">我是article_footer，不是以artical-开头的</div>
       
       // CSS：
       div[class^=article]{
           color: red;
       }
   

6. [attr$=xxx]，这个选择器和上一个相似，它是用正则匹配的方式来选择属性值以 xxx 结尾的元素。

   <!-- HTML： -->
   <button class="btn btn-disabled">禁用的按钮</button>
   <select class="select select-disabled city-select"></select>
   <input class="input input-disabled" value="禁用的输入框"/>
   
   // CSS：
   [class$=disabled]{
       display: none;
   }
   

7. [attr*=xxx]，最后一个，这个是用正则匹配的方式来选择属性值中包含 xxx 字符的所有元素。这个选择器的规则算是最宽泛的，只要 xxx 是元素属性值的子字符串，这个选择器就会生效。

       <!-- HTML： -->
       <button class="btn btn-disabled">禁用的按钮</button>
       <select class="select select-disabled city-select"></select>
       <input class="input input-disabled" value="禁用的输入框"/>
       
       // CSS：
       [class*=disabled]{
           display: none;
       }
   

• tips

1. 属性选择器要做文本的匹配，所以效率也不会高。
2. 在使用属性选择器时，尽量要给它设置上生效的范围，如果只用了个 [href] 相当于要在所有元素里找带 href 的元素，效率会很低。如果用 a [href] 会好的多，如果用 .link [href] 就更好了。这种组合方式我们在下一节讲解。
3. 属性选择器很灵活，如果能使用 CSS 代替 JS 解决一些需求，可以不用太纠结性能的问题，用 JS 实现也一样要耗费资源的。

组合选择器

• 后代选择器

    <!-- HTML -->
<div class="page">
    <div class="article">
        <h1>我是标题部分</h1>
        <p>黑化肥发灰，灰化肥发黑</p>
        <p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
        <p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
    </div>
    <p class="footer">版权 © tuituitech.com</p>
</div>

// CSS:
.page p{
    font-size: 18px;
}

• 子元素选择器

    <!-- HTML -->
<div class="page">
    <div class="article">
        <h1>我是标题部分</h1>
        <p>黑化肥发灰，灰化肥发黑</p>
        <p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
        <p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
    </div>
    <p class="footer">版权 © tuituitech.com</p>
</div>

// CSS:
.page > p{
    color: grey;
}

• 兄弟选择器

1. 相邻兄弟选择器 找相邻的下一个兄弟节点

    <!-- HTML -->
    <div class="article">
        <p>黑化肥与灰化肥</p>
        <h1>我是标题部分</h1>
        <p>黑化肥发灰，灰化肥发黑</p>
        <p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
        <p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
    </div>
    h1 + p{
margin-top: 10px;
color: red;
} 

2. 通用兄弟选择器 节点后的所有匹配兄弟节点

    <div class="article">
        <p>黑化肥与灰化肥</p>
        <h1>我是标题部分</h1>
        <p>黑化肥发灰，灰化肥发黑</p>
        <p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
        <p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
    </div>
    h1 ~ p{
color: red;
} 

• 交集选择器

<!-- HTML -->
<div class="menu">
    <a class="menu-item">菜单1</a>
    <a class="menu-item active">菜单2</a>
    <a class="menu-item">菜单3</a>
    <a class="menu-item">菜单4</a>
</div>
.menu-item{
    background: #ccc;
    color: #000;
}
.menu-item.active{
    background: #aaa;
    color: #fff;
}

• 并集选择器

h1, h2, h3{
    margin: 0;
    padding: 0;
}

伪类选择器

• 标记状态的伪类

1. :link，选取未访问过的超链接元素。如果我们注意过搜索引擎的结果的话，它里面的链接只要点过的就会变色，从而标记哪个链接是访问过的。:link 这个属性就是用来标识没访问过的链接。
2. :visited，选取访问过的超链接元素。和第一条相反，:visited 是用来标记哪个链接是已经访问过的，防止重复点击。
3. :hover，选取鼠标悬停的元素。，这个伪类经常用在 PC 端，当鼠标放在一个元素上时，可以用 :hover 来控制鼠标悬停的样式。因为在移动端里没有鼠标的概念，所以移动端里很少用这个伪类。
4. :active，选取点中的元素。这个伪类的作用在刚才提到过了，当我们希望按钮有操作反馈的时候，可以用它来标记操作反馈的样式。当然这个伪类也是可以通用的，并不是只能用在按钮上。
5. :focus，选取获得焦点的元素。这个伪类用来标识获得焦点的元素，比如搜索框在聚焦的时候有个比较明显的边框，方便用户知道当前在可输入的状态。

• 筛选功能的伪类

1. :empty，选取没有子元素的元素。比如选择空的 span，就可以用 span:empty 选择器来选择。这里要注意元素内有空格的话也不能算空，不会被这个伪类选中。
2. :checked，选取勾选状态的 input 元素， 只对 radio 和 checkbox 生效。
3. :disabled，选取禁用的表单元素。
4. :first-child，选取当前选择器下第一个元素。
5. :last-child，和 first-child 相反，选取当前选择器下最后一个元素。
6. :nth-child(an+b)，选取指定位置的元素。这个伪类是有参数的，参数可以支持 an+b 的形式，这里 a 和 b 都是可变的，n 从0起。使用这个伪类可以做到选择第几个，或者选择序号符合 an+b 的所有元素。比如使用 li:nth-child(2n+1)，就可以选中 li 元素中序号是2的整数倍加1的所有元素，也就是第1、3、5、7、9、2n+1个 li 元素。
7. :nth-last-child(an+b) ，这个伪类和 nth-child 相似，只不过在计数的时候，这个伪类是从后往前计数。
8. :only-child，选取唯一子元素。如果一个元素的父元素只有它一个子元素，这个伪类就会生效。如果一个元素还有兄弟元素，这个伪类就不会对它生效。
9. :only-of-type，选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素，这个伪类就会生效。这个伪类允许父元素里有其他元素，只要不和自己一样就可以。

伪元素选择器

1. ::first-line，为某个元素的第一行文字使用样式。
2. ::first-letter，为某个元素中的文字的首字母或第一个字使用样式。
3. ::before，在某个元素之前插入一些内容。
4. ::after，在某个元素之后插入一些内容。
5. ::selection，对光标选中的元素添加样式。