前端学习22 CSS 伪类和伪元素

1. 伪类

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。

伪类由冒号（:）后跟着伪类名称组成（例如，:active）,函数式伪类还包含一对括号来定义参数（例如，:dir（））。

1.1 表示状态的伪类

:link 所有为访问的链接
:visited 所有访问过的链接
:hover 鼠标点击标签的状态
:activate 鼠标点击标签的状态
:focus 标签获得焦点时的样式

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意：在CSS定义中，a:active 必须至于 a:hover 之后，才是有效的。

 <a href="www.cctv.com">www.cctv.com</a>
 
 <style>
     /*超链接点击之前是黑色*/
     a:link {
         color: black;
     }
     /*超链接点击之后是蓝色*/
     a:visited {
         color: blue;
     }
     /*鼠标悬停，放到标签上的时候是绿色*/
     a:hover {
         color: green;
     }
     /*鼠标点击链接，但是不松手的时候*/
     a:active {
         color: red;
     }
 </style>

1.2 树结构的伪类

这些伪类与文档树中的元素位置有关。

:root 表示文档的根元素。在HTML中这通常是<html>元素。
:empty 表示除空白字符外没有子元素的元素。用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令不会影响元素是否被认定为空。

  div:empty {
             border:2px solid lightblue; ;
             height: 1em;
             width: 8em;
         }
		 
     <p>1.div下没有子元素</p>
     <div></div>
     <p>2.div下有注释内容</p>
     <div><!-- 注释内容 --></div>
     <p>3.div嵌套了空元素</p>
     <div><p></p></div>  //看这里

1.3 语言的伪类

这类伪类根据文档语言而反应，可以基于语言或书写方向来选择元素。

:dir 方向性伪类基于由文档语言所确定的其方向性来选择元素

//dir 是 HTML 的标准属性，用来控制文本书写方向
.dir :dir(ltr) {
  color: blue;
}
.dir :dir(rtl) {
  color: green;
}

:lang 给予其内容语言来选择元素。

// lang 是 HTML 的标准属性，用来告诉浏览器该元素的文本属于哪种语言。
 *:lang(en-US) {
             border: 2px solid orangered;
         }
 
     <p lang="en-US"> //看这里
     Spring will come when spring goes.Flowers fade and flowers will bloom again.as long as you want.Let the dream row to your heart sea.
     </p>
     <p lang="pl-PL">
     Gdy widzimy znak z narysowaną czaszką i napisem <strong lang="en-US">DANGER</strong> to lepiej nie wchodzić dośrodka.
     </p>

1.4 否定伪类

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。

 p:not(.irrelevant) {
   font-weight: bold;
 }
 //p > 是一个父子选择器，表示：选择 <p> 标签的直接子元素
 p > :not(strong, b.important) {
   color: darkmagenta;
 }

1.5 子元素的伪类

:first-child 选择第一个子元素。
:last-child 选择最后一个子元素。
:nth-child() 选择指定位置的子元素。该选择器后边可以指定一个参数，指定要选中第几个子元素。
:nth-last-child（）从后往前选择指定位置的子元素。
:first-of-type 在同一个父元素下，选择第一个特定类型的元素。
:last-of-type 在同一个父元素下，选择最后一个特定类型的元素。
:nth-of-type（）在同一个父元素下，选择指定位置的特定类型的元素。
:nth-last-of-type（）在同一个父元素下，选择从后往前选中指定类型指定位置的子元素。
:only-child 只有一个子元素才有作用。
:target 表示一个唯一的元素（目标元素），其 id 与当前 URL 片段匹配。

:target{
 border:2px solid black;
 background-color:lightblue;
 } 
 //点击链接,:target选择器会突出显示当前活动的HTML锚.Internet Explore 8 以及更早的版本不支持 :target 选择器
 <a href="#news1"><a>
 <a href="#news2"><a>
 <p id="news1">内容1..</p>
 <p id="news2">内容2..</p>