#yyds干活盘点# 1 CSS3 高级选择器-CFANZ编程社区

1.CSS3高级选择器

选择器	描述
first-of-type	p:first-of-type 选择属性其父元素的首个<p>元素的每个<p>元素
last-of-type	p:last-of-type 选择属性其父元素的最后<p>元素的每个<p>元素
only-of-type	p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素
first-child	p:first-child 选择属性其父元素第一个子元素的每个<p>元素
last-child	p:last-child选择属性其父元素最后一个子元素的每个<p>元素
nth-child(n)	p:nth-child(n)选择属性其父元素的第n个元素的每个<p>元素
:before	p:before在每个<p>元素的内容之前插入内容
:after	p:after在每个<p>元素的内容之后插入内容

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CssSelector</title>
<style>
/*p:first-of-type{
 color: red;
 }
 p:last-of-type{ 
 color: blue;
 }
 p:nth-child(2){
 color: pink;
 }
 p:nth-child(3){
 color: skyblue;
 }
 p:only-of-type{
 color: red;
 }*/
  p:last-child{
  color: #f00;
  }
  p:first-child{
  color: #0f0;
  }
  p:nth-child(2):before{
  color: pink;
  content:"我是插入的内容";
  }
  p:nth-child(3):after{
  color: green;
  content: "我也是插入的内容";
  }
</style>
</head>
<body>
  <p>我是第一个p元素</p>
  <p>我是第二个p元素</p>
  <p>我是第三个p元素</p>
  <p>我是第四个p元素</p>
  <p>我是第五个p元素</p>
 <!--
  <div><p>我是div下的唯一一个p元素</p></div>
  <div><p>我是p元素</p><p>我也是p元素</p></div>
  -->
</body>
</html>

3.优先级算法

优先级就近原则，同权重的情况下样式定义最近者为准
载入样式以最后载入的定位为准
!important > id > class > tag
!important比内联优先级高，但内联比id要高

4.代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Priority</title>
  <link rel="stylesheet" href="../css/PriorityStyle2.css">
  <link rel="stylesheet" href="../css/PriorityStyle1.css">
<style>
  .myp{
    color: red;
  }
  .myp{
    color: blue;
  }

  /*!important>id>class>tag*/
  span{
    color: red;
  }
  .sc3{
    color: green;
  }
  #sp3{
    color: yellow;
  }
  span{
    color: skyblue!important;
  }
  
  /*  !important>内联*/
  div{
    color: lightgreen!important;
  }
    
  /*  内联>id*/
  #a1{
    color: black;
  }
</style>
</head>
<body>
  <p class="myp" id="p1">我是第一个p标签</p>
  <p id="p2">我是第二个p标签</p>
  <span class="sc3" id="sp3">我是span标签</span>
  <div style="color:green">我是第四个p标签</div>
  <a href="https://www.baidu.com" id="a1" style="color:red">我是a标签</a>
</body>
</html>