CSS的各种选择器

今天我们来聊一聊css的各种选择器。以前也挺迷的，今天特此扒拉扒拉。

id选择器

#div1 {
  width: 200px;
  height: 100px;
}

<div id="div1">我是一个div</div>

类选择器

.div1 {
  width: 200px;
  height: 100px;
}

<div class="div1">我是一个div</div>

通配符选择器

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

元素选择器

div {
  width: 200px;
  height: 100px;
}

<div>我是一个div</div>

分组选择器

#div1,p,span {
  color: red;  //div1和p和s1会受到影响
}

<div id="div1">div1</div>
<p>p1</p>
<span>s1</span>

派生选择器包含三个：后代选择器，子元素选择器，相邻兄弟选择器

后代选择器

//儿子，孙子，曾孙子。。。只要是后代，都受影响。
div p {
  color: 20px;  //p1,p2,s2,p3会受到影响。注：s2会受到影响是因为其包含在p2中
}

<div>
  <p>p1</p>
  <span>s1</span>
  <p>p2<span>s2</span></p>
  <span>s3<p>p3</p></span>
</div>

子元素选择器

//只有儿子受影响
div > p {
  color: 20px;  //p1,p2,s2会受到影响。注：s2会受到影响是因为其包含在p2中
}

<div>
  <p>p1</p>
  <span>s1</span>
  <p>p2<span>s2</span></p>
  <span>s3<p>p3</p></span>
</div>

相邻兄弟选择器

//必须相邻才会受到影响
#div1 + div {
  color: red;    //div2会受到影响。注：div3则不会，因其不相邻#div1
}

<div id="div1">
  <p>p1</p>
  <span>s1</span>
  <p>p2<span>s2</span></p>
  <span>s3<p>p3</p></span>
</div>
<div>div2</div>
<span>s4</span>
<div>div3</div>

属性选择器

   //#div1[title]也是可以的，不局限与id选择器，可与其他的选择器混用。
  // _ 代表空格，空格也算是一个字符
  [title]              //有title属性的元素
  [title = dd]     //有title属性，且title属性是dd：_dd 或 dd_ 或 _dd_ 都不符合；只有dd符合。
  [title ~= dd]   //有title属性，且值中包含用空格分割后含有dd。 in_array('dd', explode(' ', $str))为true则符合
  [title |= dd]    //有title属性，且值等于dd或以dd-开头的：开始的两个字符是dd或三个字符是dd- 则符合。
  [title ^= dd]   //有title属性，且值以dd开头：最开始的两个字符是dd
  [title $= dd]   //有title属性，且值以dd结束：最后两个字符是dd
  [title *= dd]    //有title属性，且值含有dd：strpos($str, 'dd') !== false 则符合，区分大小写。