组团学-CSS3 选择器(zutuanxue.com)

1、属性选择器

• 说明

  选取标签带有某些特殊属性的选择器

• 常用

  选择符	描述
  E[attr]	选择具有attr属性的E元素
  E[attr=“val”]	选择具有attr属性且属性值等于val的E元素
  E[attr^=“val”]	选择具有attr属性且属性值以val开头的E元素
  E[attr$=“val”]	选择具有attr属性且属性值以val结尾的E元素
  E[attr*=“val”]	选择具有attr属性且属性值含有val的E元素

• E[attr] 选择器

  选择具有attr属性的E元素

  举例：

  <style>
      button{
          color: red;
      }
      button[disabled]{
          color: #cccccc;
      }    
  </style>
  
  
  <button>Button</button>
  <button>Button</button>
  <button disabled='disabled'>Button</button>
  <button disabled='disabled'>Button</button>
  

• E[attr="val"] 选择器

  选择具有attr属性且属性值等于val的E元素

  举例：

  <style>
  input[type='search']{
  	color: pink;
  }
  </style>
  
  <input type="text" value="文本框" />
  <input type="text" value="文本框" />
  <input type="search" value="搜索框" />    
  <input type="search" value="搜索框" />
  

• E[attr^="val"] 选择器

  选择具有attr属性且属性值以val开头的E元素

  举例：

  <style>
  div[cladd^='']{
  	color: pink;
  }
  </style>
  
  <div class="font12">属性选择器</div>
  <div class="font24">属性选择器</div>
  <div class="font24">属性选择器</div>
  

• E[attr$="val"] 选择器

  选择具有attr属性且属性值以val结尾的E元素

  举例：

  div[cladd$='4']{
  	color: pink;
  }
  

• E[attr*="val"] 选择器

  选择具有attr属性且属性值含有val的E元素

  举例：

  div[cladd*='2']{
  	color: pink;
  }
  

• 注意

  类选择器、属性选择器、伪类选择器权重都为10

2、结构伪类选择器

• 常用

  选择符	描述
  E:first-child	选择父元素中的第一个子元素E
  E:last-child	选择父元素中的最后一个子元素E
  E:nth-child(n)	选择父元素中的第n个子元素E
  E:first-of-type	选择指定类型E的第一个
  E:last-of-type	选择指定类型E的最后一个
  E:nth-of-type	指定类型E的第n个

• :first-child 选择器

  表示选择父元素的第一个子元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

  举例：

  ol > li:first-child{
    color: red;
  }
  

• :last-child 选择器

  选择的是元素的最后一个子元素。比如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器。

  举例：

  ol > li:last-child{
    color: red;
  }
  

• :nth-child(n) 选择器

  用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，不仅可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd 奇数、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

  举例：

  ol li:nth-child(even){
    background: orange;
  }
  

• 注意

  选择父元素里面的第n个孩子，不管父元素里面是否是同一种类型。

• :empty 选择器

  表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

  举例：

  p{
   background: orange;
   min-height: 30px;
  }
  p:empty {
    display: none;
  }
  

• :root 选择器

  从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。

  :root{
      background:pink;
  }
  /*等同于*/
  html {background:pink;}
  

• **:nth-last-child(n)**选择器

  从最后一个开始算索引。

  举例：

  ol > li:nth-last-child(1){
    color: blue;
  }
  

• **E:first-of-type**选择器

  匹配同级兄弟元素中的第一个E元素，of-type 选择指定类型的元素

  举例：

  div span:first-of-type{
      background-color: yellowgreen;
  }
  

   <div>
       <p>p标签</p>
       <span>span1</span>
       <span>span2</span>
       <span>span3</span>
       <span>span4</span>
  </div>
  

• **E:last-of-type**选择器

  匹配同级兄弟元素中的最后一个E元素，of-type 选择指定类型的元素

  举例：

  div span:last-of-type{
      background-color:rebeccapurple;
  }
  

   <div>
       <p>p标签</p>
       <span>span1</span>
       <span>span2</span>
       <span>span3</span>
       <span>span4</span>
  </div>
  

• **E:nth-of-type**选择器

  匹配同级兄弟元素中的最后一个E元素，of-type 选择指定类型的元素

  举例：

  div span:nth-of-type(2){
      background-color: blue;
  }
  

  <div>
       <p>p标签</p>
       <span>span1</span>
       <span>span2</span>
       <span>span3</span>
       <span>span4</span>
  </div>
  

• 注意

  1. ul 里面中允许放li，所以nth-child和nth-of -type是一样的

  2. 伪类选择器权重为10

3、伪元素选择器

• 常用

  选择符	描述
  ::before	在元素内容的前面插入内容
  ::after	在元素内容的后面插入内容
  ::first-letter	选择文本的第一个单词或字（如中文、日文、韩文等）
  ::first-line	选择文本第一行
  ::selection	选择可选中的文本添加样式

E::before和E::after

• 说明

  在E元素内部的开始位置和结束位创建一个元素，该元素为**行内元素**，且必须要结合content属性使用，因为在dom中看不见创建的元素，所以称为伪元素。

• 语法

  div::befor {
    content:"开始";
  }
  div::after {
    content:"结束";
  }
  

• 注意

  1. E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

  2. “:” 与 “::” 区别在于区分伪类和伪元素

  3. 伪元素和标签选择器一样，权重为1

E::first-letter

• 说明

  文本的第一个单词或字（如中文、日文、韩文等）

• 语法

  p::first-letter {
    font-size: 20px;
    color: hotpink;
  }
  

E::first-line

• 说明

  文本第一行

• 语法

  /* 首行特殊样式 */
  p::first-line {
    color: skyblue;
  }
  

E::selection

• 说明

  可改变选中文本的样式

• 语法

  p::selection {
    /* font-size: 50px; */
    color: orange;
  }