忙里偷闲的学习

在切页面的时候，我们免不了要和css打交道，甚至说是颇深，在HTML中，想要快速的定位元素，除了广为人知的.class、#id、通配符*、element元素等选择器，css还为我们提供了更多在某些场景下，效率更高的选择器。所以，最好自己也尝试一下，不然就算你看过这篇随手记，也几乎没太大用处。即便不太容易记住，但是会留个印象，是吧~
PS：星星表示此选择器在本文中的强调程度。和常见度无关

CSS3选择器 —— 元素选择器 [element] （★★）

1. element{}。这个会选择所有能匹配到的element；如div{}，则所有的div都会被选中。
2. element1,element2,....{}。这个会选择所有能匹配到element；如div, a, p{} ，则所有的div，a，p都会被选中。
3. element1 element2{} 这个会选择父元素为element1的所有的element2子元素；如div a{}，则div下所有的a都会被选中。
4. element1>element2{}。这个会选择紧跟着element1的element2元素；如<div><p></p><p></p></div> div+p{} ，则div中的第一个p会被选中。

CSS3选择器 — — 属性选择器 [attribute]（★★★★）

<a target="_blank" href="https://petergooo.github.io" title="a b c a-hello">这是一个demo1</a>
<a target="_self" href="http://petergooo.github.io" title="hey hi hello a">这是一个demo2</a>

选择器前面也可以添加元素，如：a[src^='https']{ … }， .info[title*='info']。

1. [target]{}。这个会选择带所有带target属性的元素。在这里，上面两个a标签都会被选中。
2. [target=_blank]{}。这个会选择所有带target属性且值为_blank的元素。在这里，上面两个a标签只有第一个被选中。
3. [title~=hi]{}。这个会选择所有带title属性且值包含 hi 的元素。在这里，上面两个a标签第二个会被选中。
4. [title|=a]{}。这个会选择所有带title属性且值是以a开头的元素。在这里，上面两个a标签只有第一个被选中。
5. PS：上面2、3、4三个规则，属性的值是一个单词。而下面三个则是字符串。注意字符串和单词是不一样的
6. [src^="https"]{}。这个会选择所有带src属性且值是以"https"开头的元素。在这里，上面两个a标签只有第一个被选中。
7. [title$="hello"]{}。这个会选择所有带title属性且值是以"hello"结尾的元素。在这里，上面两个a标签第一个会被选中。
8. [title*="hi"]{}。这个会选择所有带title属性且值包含 "hi" 的元素。在这里，上面两个a标签第二个会被选中。

CSS3选择器—— 伪 类/元素选择器 [:...]（★★★★★）

前言

这个是本文中的重点所在了，说实话，很多伪类/元素选择器，真的很不错，但也真的很难在实际运用中见到，我想大概是因为繁琐吧，毕竟大家都习惯了class统治样式，其他的都是不入流的小招式，233333.

就拿我举例来说，在某个页面的样式中，需要将后端给的数据渲染到页面中，但是这个数量是一直增加的。每当第三个元素，就与其他的有所区别。我得知需求后，第一个想法就是js判断。。。可是这样违背了样式的控制权给了js

还好旁边的前端小哥经验颇深，且说我有什么不知道的或者觉得可以再优化的地方，就找他。滴~好人卡。。。

他看到这个问题，抢过我的键盘，啪啪啪啪，哦不，哒哒哒几行css代码完美的解决！

握草，这么吊。。。厉害了我的哥。

这时我也看到了 :nth-child(n)；这个css选择器。对不起，请收下我的膝盖，我保证我之前看过这个选择器，但我也确定我只是看过而没有用，就忘记了。GG。遂在午休时候，认真的补了一遍css选择器，咋补？当然是选择原谅她啊，然后晚饭后写了这篇《那些被忽略但有时又很强的选择器》

在这个分类，选择器实在是太多了，详细说明我就不做搬运工了，我就挑几个我觉得不错的，写出来吧，在文末会给参考文档。

a标签相关选择器

1. :link 选择所有未被访问的链接。
2. :visited 选择所有已被访问的链接。
3. :active 选择活动链接。

input相关的选择器

1. :enabled 选择每个启用的input 元素。
2. :disabled 选择每个禁用的 input 元素
3. :checked 选择每个被选中的 input 元素。
4. :focus 获取焦点的input元素。 这个常见的应用场景是在表单时，对应的输入框样式

常见伪类/元素选择器

1. :hover 鼠标移动到上面的样式。 这个常见的应用场景是用作遮罩层
2. ::before, ::after 元素的前后样式。 这个常见的应用场景有：清除浮动、添加特定的样式、等等
   1. PS：这里是用了两个冒号，因为它们是伪元素，虽然说用单冒号也能生效，但是为了推动css3，我们还是统一用双冒号咯。
   2. 附上两篇文章总结伪类和伪元素 ———— ——— 详解 CSS 属性 - 伪类和伪元素的区别
3. :not(selector) 给非所选元素设定样式

这里有趣的几个有：

1. ::first-letter ： 给所选元素的首字母/中文 应用样式。这个选择器可以做首字母效果。很方便，代码如下：

   <p class="a">Oh my god</p><p class="a">我的天</p>
   <style>
     .a::first-letter{
       font-size:200%;
       color:#8a2be2;
   </style>
   

2. ::first-line： 给所选元素的首行应用样式。这个应用不太多吧。。

3. ::selection 选择被用户选取的部分。 这个应用场景有，当用户选择文本是，就可以使用这个选择器，让被选取的的文本更有趣。这个选择器支持的样式也有限。

4. :target 这个就很有趣了，不过不支持ie8及以下。 当前页面活动的锚点的样式。代码示例:

   <style>
     :target{
       border:2px solid #ccc;
       background-color: #e5eecc;
     }
   </style>
   <a href="#id1">jump target1</a>
   <a href="#id2">jump target2</a>
   <p id="id1">target1</p>
   <p id="id2">target2</p>
   

   效果体验如下。点击两个锚点，对应的id活跃时，就可以有背景。

   <a href="#id1">jump target1</a> ——— <a href="#id2">jump target2</a>
   <p id="id1">target1</p>
   <p id="id2">target2</p>

5. 最后一个当属 :nth-child(n) 啦

   就像我上面说的，这个选择器用来循环选择某个元素，简直不要太爽！

   <span>aaa</span>
   <span>bbb</span>
   <span>ccc</span>
   <style>
     span:nth-child(3n){
       background-color:green;  //原谅他啊
     }
   </style>
   

   <span class="c">aaa</span><span class="c">bbb</span><span class="c">ccc</span>

   <style>.c{display:inline-block;margin:0;border:1px solid #ccc; width:33%;text-align:center}.c:nth-child(3n){background-color:green;}</style>

写到最后写懵逼了。

这懵逼的排版。。。。原谅我吧

233333333333

参考文档

CSS 选择器参考手册

原文链接

那些被忽略但有时又很强的选择器