重识CSS---基础知识---css结构伪类选择器(2)

伪类选择器

:超链接伪类:

定义链接的不同状态

/*未访问过的连接*/
a:link { color: red }
/*访问过后的连接*/
a:visited { color: red }

/*当有鼠标悬停在链接上*/
a:hover { color: red }
/*发生点击的时候*/
a:active { color: red }

不只是链接可以使用伪类，其他元素也可以使用。下面是表单的点击与获取焦点状态的样式设置

  /* 鼠标悬停时 */
  input:hover {
     background: green;
  }
  /* 点击发生 */
  input:active {
      background: yellow
  }
  /* 获取焦点的时候 */
  input:focus{
    background: red;
    /* outline: none; */
  }

:target

用于控制具有锚点目标元素的样式，（特定场景使用，一般不用）

:root

根元素选择伪类，既选择html，（特定场景使用，一般不用）

:empty

没有内容和空白的元素。下面第一个p标签会产生样式，第二个不会因为有空白内容

<div></div>
<div> </div>
<div>121</div>
<style>
:empty{  border: solid 2px red;}
</style>

结构伪类

:first-child ：选择元素标签并且是第一个 。

// 选择article里面的，所有后代里的第一个元素
article :first-child {
    color: red;
}
// 选择article里面的，所有第一个子级元素（包括这个子级的后代）
article >:first-child {
    color: red;
}
// 选择article里面的，所有后代并且第一个元素为span元素的元素
article span:first-child {
    color: red;
}
...
<article>
  <span>muxi1</span>  // 有  有   有
  <span>muxi2</span>  // 无  以下全无
  <aside>
    <div>muxi_1</div> // 有  - -
    <span>muxi_2</span> // 无 - -
    <span>muxi_3</span> // 无 - -
    <div>
      <div>1</div> // 有 - -
      <div>2</div> // 无 - -
    </div>
    <div>
      <span>1</span> // 有 - 有 
      <div>2</div> // 无 - -
    </div>
  </aside>
  <div>muxi3</div> //无
</article>>

article span:first-of-type : 选择article所有后代里第一个span标签

------------------------------这里是分割上面

article span:last-child :选择article所有后代并且最后第一个元素为span元素的元素

article span:last-of-type :选择article所有后代里最后一个span标签（如果只有一个，那么第一个也是最后一个）

article>span:last-of-type: 选择子级集里当中最后一个span标签

------------------------------这里是分割上面

  article :only-child : // 选择article里面所有后代是唯一子元素的标签。

注释： article后面有个空格，代表的是后代, 这里唯一子元素是指后代里，某父级里面只包含一个子级的元素标签。

article h1:only-child：选择article里面的，所有后代是唯一子元素为h1的标签。

注释：同上注释，父级里面只包含h1为子元素的标签。

article>h1:only-of-type：选择article里子级里h1为唯一子元素的标签。

注释：所有article的子级集里，取h1为唯一子元素的元素标签，然后设置样式，然后article子级集里有多个h1，那么不生效，

------------------------------这里是分割上面

article :nth-child(1) :选择article里面，所有后代里的第一个元素，

注释：()里面的变量，代表选择的索引值。n为所有，2n为偶数（even），2n-1为奇数(odd)，前两个 -n+2,

article>:nth-child(1) :选择article里面子级集里的第一个元素，

article span:nth-of-child(2)： 选择article所有子级集里第二个span元素