(18)0907_CSS选择器详解

选择器的优先级（决定那个样式生效）：

important； > 内联样式 > id选择器> 类和伪类 > 元素选择器 > 通配选择器> 继承样式无优先级

最大        >   1000     >    100    >     10       >        1        >        0        >      无

（内联样式，也叫 行内样式）

在 CSS 里面定义自增函数 counter-increment

• #list li {
      background-color: red;
  
      counter-increment: num;    // 定义自增函数
  }
      // 相当于
          // function counter(){ var num; num++; }
  
  #list li:nth-child(10n)::before {
      content: counter(num);    // 调用自增函数
  
      position: absolute;
      top: 30px;
      left: 0px;
  }

  
  

---

id选择器：

• #nav {
      background-color: yellow;
  }

类选择器：

• .article {
      background-color: skyblue;
  }

属性选择器：

• // 含 title 属性的元素
  p[title] { background-color: red; }
  
  // title="photos" 的元素
  p[title = "photos"] { background-color: red; }
  
  // title 的属性值以 "pho" 开头的元素
  p[title ^= "pho"] { background-color: red; }
  
  // title 的属性值以 "s" 结尾的元素
  p[title $= "s"] { background-color: red; }
  
  // title 的属性值含有 "pho" 的元素
  p[title *= "pho"] { background-color: red; }
  
  //  title 的属性值含有 "photos" 单词的元素
  p[title ~= "photos"] { background-color: red; }

伪类选择器：

• // 最佳顺序 
  :link {
      color: blue;
  }
  
  :visited {
      color: pink;
  }
  
  :hover {
      color: yellow;
  }
  
  :active {
      color: red;
  }

• :focus {
      background-color: #bfc;
  }

• 不使用 js 实现轮播图

  • bottom:target {
    /* 操作<a href="#bottom"> 超链接     点击 a元素，跳转到目标元素    */
    　　/* 给目标元素加样式 */
    　　border: 1px solid red;
    }

• 文不能内容选中样式

  • ::selection {
        color:yellow;
        background-color: black;
    }

子元素的伪类选择器（CSS3 结构类）：

• 选中没有任何子节点的元素

  • // <div id="test_box"></div>
    
    #test_box:empty { background-color: skyblue; }

• 根据索引

  • p:first-child { background-color: blue; }    // 第一个子元素
    p:last-child { background-color: blue; }    // 最后一个子元素
    p:only-child { background-color:red; }    // 唯一子元素
    
    // 第一个元素的索引为 1
    p:nth-child(1) { background-color: blue; }
    
    // 最后一个元素开始计算，索引为 1 的元素
    p:nth-last-child(1) { background-color: red; }
    
    // 实质上是从 0 开始计算，但是并没有第 0 个子元素
        // 之所以从 0 开始，是为了 使用表达式选择元素
    p:nth-child(2n){ background-color: blue; }    // 偶数索引的元素
    p:nth-child(2n+1){ background-color: blue; }    // 奇数索引的元素
    p:nth-child(3n+1){ background-color: blue; }    // 索引 1 4 7...的元素
    
    // 偶数索引的元素
    p:nth-child(even) { background-color: blue; }
    
    // 奇数索引的元素
    p:nth-child(odd) { background-color: blue; }

• 根据类型

  • // 1. 先找到 修饰元素 的类型  此处为 li
    // 2. 再找到所有此类型的同类同辈元素，根据表达式计算索引，选中元素
    // 3. n 从 0 开始，从顺数第一个特定类型的元素开始
    
    // 顺数，子元素为 li 的 偶数索引的 子元素
    li:nth-of-type(2n){ background-color: blue; }    
    
    li:first-of-type(){ background-color: blue; }     // 第一个 li
    li:last-of-type(){ background-color: blue; }     // 最后一个 li
    li:only-of-type(){ background-color: blue; }     // 唯一子元素 li
    
    // 1. 先找到 修饰元素 的类型  此处为 li
    // 2. 再找到所有此类型的同类同辈元素，根据表达式计算索引，选中元素
    // 3. n 从 0 开始，从倒数第一个特定类型的元素开始
    
    // 倒数，子元素为 li 的 奇数索引的 子元素
    li:nth-last-of-type(2n+1){ background-color: blue; } 

元素的伪类选择器（严格语法要求 ::） : 

• p::first-letter { background-color: red; }
  
  p::first-line { background-color: blue; }
  
  p::before {
      content: "段前的内容"        /* 段前行内伪元素 相当于 <p><span>段前的内容</span> 哈哈哈哈哈哈</p> */
  }
  
  p::after {
      content: "段后的内容"        /* 段后行内伪元素 相当于 <p>哈哈哈哈哈哈<span>段后的内容</span></p> */
  }
  // 伪元素 与 元素： 
      // 1. 无法通过 js 获取其 DOM对象
      // 2. 无法通过浏览器直接查看伪元素
      // 3. 无法被鼠标选中（unable to select）
      // 4. 伪元素的默认类型是 inline
  
  // 伪元素 与 伪类：
      // 1. 有两个冒号的 :: 一定是伪元素
      // 2. 伪类修饰元素的状态，而伪元素是一个特殊的元素（假行内元素，默认类型是 inline）
  
  // 使用伪元素注意事项：
      // 1. ::before 和 ::after 必须设置 content，否则不生效
      // 2. ::before 和 ::after 显示背景图，必须 display 设置为块元素
      // 3. ::before 和 ::after 设置为 display: inline-block; 时，必须额外设置 vertcal-align: middle;

否定伪类选择器：

• p:not(.white_boy) { background-color: blue; }
  
  ul :not(span){ background-color: red; }

元素选择器：

• div {}

统配选择器：

• * {}
  
  div > * {}

后代元素选择器：

• div span{} 

子元素选择器：

• div>span {}

紧接着的兄弟元素选择器：

• span + p {}

后所有的兄弟元素选择器：

• span ~ p {}