初识CSS—选择器

2018-06-03 本文已影响0人 HDhandi

1. class与id的使用场景

一个页面中可以有多个同样的class，可以用于不同标签但是样式相同的元素上。
一个页面中只允许有一个id，id具有唯一性，多用于标记页面分级的块级标签上。

2.css选择器常见的有几种

基础选择器

通用选择器，选择页面上的所有元素
（# id id选择器，选择对应id的元素）
.class class选择器，选择对应class的一个或多个元素
element 标签选择器，选择对应标签名的一个或多个元素

组合选择器

E,F,... 多元素选择器，用逗号隔开的表示选择多个元素，E,F或更多都是并列关系，他们同时被选取
E F 后代选择器，用空格隔开的表示选取E的后代中的F元素
E>F 子元素选择器，表示选取E的直接后代中所有F元素，与上一条的区别在于是不是子元素。

eg：div>p 此例中只会选择class为p1的p元素，p2不会被选取

<div>
    <p class="p1"></p>
    <div>
      <p class="p2"></p>   
    </div>
</div>

E+F 直接相邻选择器，表示选取E元素之后相邻的同级F元素
E~F 普通相邻选择器，表示选取E元素后面的同级F元素，不论相邻与否。

属性选择器

E[attr] 选取具有该属性的元素。eg.p[name] 选取所有有name属性的p元素。
E[attr=value] 选取所有attr属性的属性值为value的元素 eg.p[name="p1"] * 会选取所有name属性为 p1 的p元素

4.伪类选择器

E:first-child 选取作为父元素第一个子元素的E元素（实际形式是F E:first-child 区别于 E>:first-child）
E:last-child 选取作为父元素最后一个个子元素的E元素
E:nth-child() 选取作为父元素第n个子元素的E元素，n从1开始取，n为1的时候等价于first-child 选择器
E:hover/link/active/visited 选取E元素的某一状态，给对应状态添加样式

伪元素选择器

E:first-letter 选取E元素的第一个字母。eg.

 p:first-letter{color:red}  //n的颜色是红色
<p>nihao</p>

E:before/after E元素的前面或后面的元素，一般用于在E元素的前面或后面插入元素，可用来清除浮动，或添加元素。

3. 选择器的优先级，复杂场景如何计算优先级

它们之间的顺序排列如下：

@import > 内联样式 > id选择器 > 类选择器、伪类选择器、属性选择器 > 标签选择器、伪元素选择器
在复杂的场景（即在应用了各种的css选择器的组合两条或更多的css规则冲突时），会先比较优先级较高的选择器个数，如果还相同则继续向下，比较优先级较低的选择器的个数，以此类推。

4. a:link, a:hover, a:active, a:visited 的顺序

他们的顺序是 a:link, a:visited,a:hover,a:active（鼠标按下去时的状态）
至于为什么这么拍，首先，他们都是伪类选择器，相同的选择器优先级别当然相同，所以自然而然会排在后面的覆盖前面的样式。a:hover如果在a:visited后面的话，那么当该链接访问过后，就会一直保持访问后的样式，鼠标滑上去即hover样式怎么也不会生效，因为被覆盖了。至于a:active,放在前面的话那么样式不会生效，active生效的场景，hover也会生效，hover就会覆盖active。

5. 常见选择器实例

  header  //选择id为header的元素
  .header  //选择class为header的所有元素
  .header .logo //选择class为header的所有元素后代中class为logo的所有元素
  .header.mobile // 选择class为header和mobile的所有元素 eg. <p 
   class="header mobile"></p>
  .header p,.header h3 //选取class为header的所有元素的后代中 p 元素和 h3 元素
  #header .nav>li //id为header元素中后代中class为nav的元素的所有 li 子元素
  #header a:hover  //id为header元素中的所有a标签的hover状态
  #header .logo~p //id为header的元素后代中class为logo的元素的所有同级的p元素
  #header input[type="text"] //id为header的元素后代中有属性type且其值为text的所有input元素

6.伪类选择器

E:first-child 选取作为父元素第一个子元素的E元素
E:last-child 选取作为父元素最后一个个子元素的E元素
E:nth-child() 选取作为父元素第n个子元素的E元素，n从1开始取，n为1的时候等价于first-child 选择器
E:hover/link/active/visited 选取E元素的某一状态，给对应状态添加样式
E:enabled 选取表单中可用的元素
E:disabled 选取表单中禁用的元素

7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别

div:first-child 选取作为父元素第一个子元素的div元素
div:first-of-type 选取父元素中第一个出现的div元素（后面的div就不选取了）
div :first-child 选取所有div元素中第一个子元素

div :first-of-type 选取所有div元素中第一个出现的各类元素 eg.

<div>
  <h3></h3>  //选中
  <p></p>     //选中
  <div></div>  //选中
  <div></div>
  <p></p>
  <p></p>
</div>
div :first-of-type //选取的如标示

8. 代码实践

  <style>
  .item1:first-child{
    color: red;
  }
  .item1:first-of-type{
    background: blue;
  }
  </style>
   <div class="ct">
     <p class="item1">aa</p>
     <h3 class="item1">bb</h3>
     <h3 class="item1">ccc</h3>
   </div>

.item1:first-child 选取作为父元素第一个子元素的class为item1的元素，自然aa的颜色要变红
.item1:first-of-type 选取作为父元素第一个出现的各类class为item1的元素，aa所在的p元素第一次出现，bb所在的h3元素第一次出现，都被选中，cc所在的h3在bb后面，因为h3标签出现过一次，所以不再被选中。