《 超全的 CSS - 选择器 》

  1. * 号

    `*` {
  margin: 0;
  padding: 0;
}

    星号将页面上所有每一个元素都选到。
    大都用它来清空 margin 和 padding。

它也可以用来选择某元素的所有子元素。

#container * {
  border: 1px solid black;
}

它会选中 #container 下的所有元素。
不建议使用。

  1. #X

    #container {
width: 960px;
margin: auto;
}

    在选择器中使用 # 可以用 id 来定位某个元素。

  2. .X

    .error {
  color: red;
}

    这是 class 选择器。
    它跟 id 选择器不同，它可以定位多个元素。
    当你想对多个元素进行样式修饰的时候就可以使用 class 。
    当你要对某个特定的元素进行修饰那就是用 id 来定位它。

  3. X Y

    li a {
  text-decoration: none;
}

    常用的 descendant 选择器。
    假如，你不需要定位所有的 a 元素，而只需要定位 li 标签下的 a 标签。
    这时候你就需要使用 descendant 选择器（后代选择器）了。

  4. X

    a { color: red; }
ul { margin-left: 0; }

    如果你想定位页面上所有的某标签，不是通过 id 或者是 class ，直接使用类型选择器。

  5. X:visited and X:link

    a:link {color:red;}
a:visited {color: purple;}

    我们使用 :link 这个伪类来定位所有还没有被访问过的链接。
    我们也使用 :visited 来定位所有已经被访问过的链接。

  6. X+Y

    ul + p {
color: red;
}

    相邻选择器，它只选中指定元素的直接后继元素。

  7. X>Y

    #container > ul {
  border: 1px solid black;
}

    X Y 和 X > Y 的差别就是后面这个只会选择它的直接子元素。

    <div id="container">
<ul>
   <li> List Item
     <ul>
        <li> Child </li>
     </ul>
   </li>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>
</div>

    container > ul 只会选中 id 为 container 的 div 下的所有直接 ul 元素。

    它不会定位到如第一个 li 下的 ul 元素。

  8. X ~ Y

    ul ~ p {
  color: red;
}

    兄弟节点组合选择器跟 X + Y 很相似，但它又不是那么的严格。
    ul + p 选择器只会选择紧挨跟着指定元素的那些元素。
    而这个选择器，会选择跟在目标元素后面的所有匹配的元素。

  9. X[title]

    a[title] {
  color: green;
}

    这个叫属性选择器，上面的这个例子中，只会选择有 title 属性的元素。

  10. X[href=”foo”]

    a[href="https://weich.ee/"] {
  color: #1f6053; /`*` nettuts green `*`/
}

    上面这片代码将会把 href 属性值为 https://weich.ee/ 的锚点标签设置为绿色，而其他标签则不受影响。

  11. X[href*=”weich”]

    a[href*="weich"] {
  color: #1f6053;
}

    指定了 h1me 这个值必须出现在锚点标签的 href 属性中。
    不管是 weich.ee 还是 weich.ee 还是 www.weich.ee 都可以被选中。

  12. X[href^=”href”]

    a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}

    大家肯定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信大家肯定见过这种情况。
    这样的设计会很明确的告诉你会跳转到别的网站。
    它通常使用在正则表达式中标识开头。
    如果我们想定位锚点属性 href 中以 http 开头的标签，那我们就可以用与上面相似的代码。
    注意我们没有搜索 http:// ，那是没必要的，因为它都不包含 https:// 。
    那如果我们想找到所有指向一张图片的锚点标签呢？那我们来使用下 & 字符。

  13. X[href$=”.jpg”]

    a[href$=".jpg"] {
  color: red;
}

    这次我们又使用了正则表达式 $ ，表示字符串的结尾处。
    这段代码的意思就是去搜索所有的图片链接，或者其它链接是以 .jpg 结尾的。
    但是这种写法是不会对 .gif 和 .png 起作用的。

  14. X[data-*=”foo”]

    a[data-filetype="image"] {
color: red;
}

    我们如何把所有的图片类型都选中呢 png , jpeg , jpg , gif 。
    可以使用多选择器，看下面。

    a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}

    但是这样写效率会很低。
    另外一个办法就是使用自定义属性。
    可以给每个锚点加个属性 data-filetype 指定这个链接指向的图片类型。

    <a href="path/to/image.jpg" data-filetype="image"> Image Link </a

    那有了这个钩子，就可以去用标准的办法只去选定文件类型为 image 的锚点了。

    a[data-filetype="image"] {
color: red;
}

  15. X[foo~=”bar”]

    a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}

    这个 ~ 符号可以定位那些某属性值是空格分隔多值的标签。
    我们可以设置一个 data-info 属性，它可以用来设置任何我们需要的空格分隔的值。
    这个例子我们将指示它们为外部连接和图片链接。

    <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

    给这些元素设置了这个标志之后，我们就可以使用 ~ 来定位这些标签了。

    /`*` Target data-info attr that contains the value "external" `*`/
a[data-info~="external"] {
color: red;
}
/`*` And which contain the value "image" `*`/
a[data-info~="image"] {
  border: 1px solid black;
}

  16. X:checked

    input[type=radio]:checked {
border: 1px solid black;
}

    上面这个伪类写法可以定位那些被选中的单选按钮。

  17. X:after
    before 和 after 这俩伪类。
    它们会在被选中的标签周围生成一些内容。

    .clearfix:after {
 content: "";
 display: block;
 clear: both;
 visibility: hidden;
 font-size: 0;
 height: 0;
  }
.clearfix {
*display: inline-block;
_height: 1%;
}

    IE6 识别 * 和 _ ， 不识别 !important
    IE7 识别 *, 不识别_，识别 !important
    而 firefox 两个都不识别， 识别 !important
    上面这段代码会在目标标签后面补上一段空白，然后将它清除。
    当 overflow:hidden 方法不顶用的时候，这招就管用了。
    根据 CSS3 标准规定，可以使用两个冒号 :: 。
    然后为了兼容性，浏览器也会接受一个双引号的写法。
    其实在这个情况下，用一个冒号还是比较明智的。

  18. X:hover

    div:hover {
  background: #e3e3e3;
}

    官方的说法是 user action pseudo class. 听起来有点儿迷糊。
    如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。
    注意旧版本的 IE 只会对加在锚点 a 标签上的 :hover 伪类起作用。
    通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。

    a:hover {
 border-bottom: 1px solid black;
}
border-bottom: 1px solid black; 比 text-decoration: underline;// 默认有下划线 要好看很多。

  19. X:not(selector)

    div:not(#container) {
color: blue;
}

    取反伪类是相当有用的。
    假设我们要把除 id 为 container 之外的所有 div 标签都选中。
    那上面那么代码就可以做到。
    或者说我想选中所有出段落标签之外的所有标签。

    *:not(p) {
  color: green;
}

  20. X::pseudoElement

    p::first-line {
  font-weight: bold;
  font-size:1.2em;
}

    我们可以使用 :: 来选中某标签的部分内容，如地一段，或者是第一个字。
    但是记得必须使用在块式标签上才起作用。
    伪标签是由两个冒号 :: 组成的。
    如下代码，定位第一个字。

    p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}

    上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。
    它通常在一些新闻报刊内容的重点突出会使用到。
    如下代码，定位某段的第一行。

    p::first-line {
font-weight: bold;
font-size: 1.2em;
}

    跟 ::first-line 相似，会选中段落的第一行 。
    为了兼容性，之前旧版浏览器也会兼容单冒号的写法。
    例如 :first-line , :first-letter , :before , :after .
    但是这个兼容对新介绍的特性不起作用。

  21. X:nth-child(n)

    li:nth-child(3) {
color: red;
}

    还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么。
    有了 nth-child 那日子就一去不复返了。
    请注意 nth-child 接受一个整形参数，然后它不是从 0 开始的。
    如果你想获取第二个元素那么你传的值就是 li:nth-child(2) .
    我们甚至可以获取到由变量名定义的个数个子标签。
    例如我们可以用 li:nth-child(4n) 去每隔 3 个元素获取一次标签。

  22. X:nth-last-child(n)

    li:nth-last-child(2) {
color: red;
}

    假设你在一个 ul 标签中有 N 多的元素，而你只想获取最后三个元素。
    甚至是这样 li:nth-child(397) ，你可以用 nth-last-child 伪类去代替它。

  23. X:nth-of-type(n)

    ul:nth-of-type(3) {
border: 1px solid black;
}

    曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。
    想象一下有 5 个 ul 标签。
    如果你只想对其中的第三个进行修饰，而且你也不想使用 id 属性。
    那你就可以使用 nth-of-type(n) 伪类来实现了。
    上面的那个代码，只有第三个 ul 标签会被设置边框。

  24. X:nth-last-of-type(n)

    ul:nth-last-of-type(3) {
border: 1px solid black;
}

    同样，也可以类似的使用 nth-last-of-type 来倒序的获取标签。

  25. X:first-child

    ul li:first-child {
border-top: none;
}

    这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。
    假设有个列表，没个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。
    这时候就可以使用这个伪类来处理这种情况了。

  26. X:last-child

    ul > li:last-child {
color: green;
}

    跟 first-child 相反， last-child 取的是父标签的最后一个标签。

  27. X:only-child

    div p:only-child {
color: red;
}

    说实话，你会发现你几乎都不会用到这个伪类。
    然而，它是可用的，有会需要它的。
    它允许你获取到那些只有一个子标签的父标签。
    就像上面那段代码，只有一个段落标签的 div 才被着色。

    <div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>

    上面例子中，第二个 div 不会被选中。
    一旦第一个 div 有了多个子段落，那这个就不再起作用了。

  28. X:only-of-type

    li:only-of-type {
font-weight: bold;
}

    结构性伪类可以用的很聪明。
    它会定位某标签只有一个子标签的目标。
    设想你想获取到只有一个子标签的 ul 标签。
    使用 ul li 会选中所有 li 标签。
    这时候就要使用 only-of-type 了。

    ul > li:only-of-type {
font-weight: bold;
}

  29. X:first-of-type
    first-of-type 伪类可以选择指定标签的第一个兄弟标签。

    <div>
<p> My paragraph here. </p>
<ul>
   <li> List Item 1 </li>
   <li> List Item 2 </li>
</ul>
<ul>
   <li> List Item 3 </li>
   <li> List Item 4 </li>
</ul>
</div>

    来把 List Item 2 取出来。

解决办法 1
使用 first-of-type 。

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

找到第一个 ul 标签。
然后找到直接子标签 li。
然后找到第二个子节点。

解决办法 2
使用邻近选择器。

p + ul li:last-child {
   font-weight: bold;
}

找到 p 下的直接 ul 标签，然后找到它的最后一个直接子标签。

解决办法 3
我们可以随便玩耍这些选择器。

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

先获取到页面上第一个 ul 标签，然后找到最后一个子标签。

结论
如果你想向旧版本浏览器妥协，比如 IE6 ，那你用这些新的选择器的时候还是得小心点。
但别让 IE6 阻止你去学这些新的技能。
记得多查查兼容性列表，或者使用 Dean Edward’s excellent IE9.js 来让你的浏览器具有这些特性。
第二个，使用 jQuery 的时候，尽量使用原生的 CSS3 选择器。
这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。