# CSS常用selector选择器列举总结

CSS常用selector选择器列举总结

• 1.id选择器

• 2.class选择器

• 3.通配符选择器*，匹配所有元素。

• 4.tag标签选择器

• 5.空格 指的是子节点选择（也是后代选择器）

  • 例如.class1 .class2指的是具有类名为class1 的元素下有着类名为class2的子元素。

• 6.无空格并写指的是同时满足条件的元素

  • 例如.class1.class2指的是选择同时具有这两个类名的元素。

• 7.>大于符号，指的是子代选择器

  • 子代选择器的特点就是能选中满足父子关系的元素，但是不能选中满足爷孙关系的元素。如果需要选中爷孙关系的元素，通常使用空格，即上面第四点提到的后代选择器。后代选择器能选中一切满足后代关系的元素(爷孙、父子、曾曾...孙)。

• 8.+加号，指的是选择同一层级的相邻兄弟元素，因此又称作相邻兄弟选择器。使用兄弟选择器，需要注意的三点，分别是相邻、同级、向下：

  • css选择器，是向下选择的，也就是说，假如有这样三个元素：

    <div class="jay">SomeWordsHere</div>
    <div class="luby">SomeWordsHere</div>
    <div class="simon">SomeWordsHere</div>
    

    .jay + div只能选中.luby这一个元素，而.simon是选不中的，这里体现了相邻、同级；

    .luby + div只能选中.simon这个元素，但是.jay是选不中的（这里容易出错），这里体现了向下、同级；

    .simon +　div一个都将选不中向下。；

    div + div,如果你这样写：就能匹配到.jay和.simon这两个元素。这是由于，有两个匹配过程，第一个是通过.jay匹配.luby,第二个是通过.luby匹配.simon,所以下面两个都被匹配到了。

• 9.~波浪符号，该选择器为兄弟选择器，和第7个很像，唯一的区别是，可以不相邻。但是注意，也是需要满足同级和向下，

  • 同样的例子：

    <div class="jay">SomeWordsHere</div>
    <div class="faker">SomeWordsHere</div>
    <br>
    <div class="luby">SomeWordsHere</div>
    <hr>
    <div class="simon">SomeWordsHere</div>
    <div class="steven">SomeWordsHere</div>
    <div class="henry">SomeWordsHere</div>
    

    .faker ~ div将会选中luby,simon,steven,henry这四个元素同级元素。

• 10.:not()选择器，条件过滤不满足某特征的元素：

  • 示例：

    <div class="jay">SomeWordsHere</div>
    <div class="faker">SomeWordsHere</div>
    <div class="luby">SomeWordsHere</div>
    <div class="simon">SomeWordsHere</div>
    <div class="steven">SomeWordsHere</div>
    <div class="henry">SomeWordsHere</div>
    

    div:not(.luby)将会选中所有类名不是luby的div标签。包括.jay和.faker。

• 11.属性选择器tagName[attribute]

  • 该选择器是很强大的一种选择器，例如：
    • a[title]可以选择所有带有title属性的a链接元素；
    • a[title="jay"]可以选择title属性值为jay的a链接元素；
    • a[href="https://www.google.com"]可以选中谷歌的超链接元素；
  • 不仅如此，属性选择器还可以通过一些标识符进行搜索匹配：
    • a[href^="https"]可以匹配所有href属性值以https开头的超链接元素；
    • a[href$="cn"]将会选中所有以cn结尾的超链接元素；
    • a[href*="book"]还能匹配href值中含有book关键字的超链接，例如这将匹配href为'https://www.Facebook.com'的超链接元素；

• 12.伪类选择器

  • 伪类选择器有很多，这里提一个：

    Element:nth-child(n)将会匹配第n个子元素;

    Element:nth-child(even)将会匹配偶数间隔的元素，第2，4,6,8,10，...个子元素

    Element:nth-child(na+b)数学计算，将按照特定规则去间隔匹配：例如div.hello:nth-child(3n+0)将会匹三的倍数的元素，3,6,9，...

    以上列举了开发常用的一些css选择器，还有更多，可以参考这里：CSS 选择器参考手册