web前端的恐怖之旅（9）：结构性伪类选择器

一，结构性伪类

---

1. first-of-type ：父元素内的第一个p元素，无视其他元素

   p:first-of-type{color:red;}		/*选中父元素里的第一个p元素*/
   div p:first-of-type{color:red}	/*选中div标签下的第一个p标签*/
   

2. last-of-type ：父元素内的最后一个p元素，无视其他元素

   p:last-of-type{color:red;}		/*选中父元素里的最后一个p元素*/
   div p:last-of-type{color:red}	/*选中div标签下的最后一个p标签*/
   

3. nth-of-type(n) ：父元素内的第n个元素，无视其他元素

   p:nth-of-type(2){color:red;}		/*选中父元素里的第2个p元素*/
   div p:nth-of-type(2){color:red}		/*选中div标签下的第2个p标签*/
   

4. nth-last-of-type(n) ：父元素内倒数第n个元素，无视其他元素

   p:nth-last-of-type(2){color:red;}			/*选中父元素倒数第2个元素*/
   div p:nth-last-of-type(2){color:red}		/*选中div标签下的倒数第2个p标签*/
   

5. only-of-type ：父元素内里面的唯一标签

   p:only-of-type{color:red;}					/*选中父元素里的唯一p标签*/
   div p:only-of-type{color:red;}				/*选中div标签下的唯一p标签*/
   

6. first-child ：父元素内的第一个子元素p元素，不能无视其他元素

   p:first-child{color:red;}					/*选中父元素里的第一个子元素p*/
   div p:first-child{color:red;}				/*选中div下的第一个子元素p*/
   

7. last-child ：父元素内倒数第一个子元素p元素，不能无视其他元素

   p:last-child{color:red;}					/*选中父元素里的最后一个子元素p*/
   div p:first-child{color:red;}				/*选中div下的最后一个子元素p*/
   

8. nth-child(n) ：父元素内第n个子元素，不能无视其他元素

   p:nth-child(5){color:red;}					/*选中父元素里的第5子元素p*/
   div p:ntht-child(5){color:red;}				/*选中div下的第5子元素p*/
   

   若想选中有顺序的标签：nth-child(2n+1)奇数个 nth-child(2n)偶数个

9. nth-last-child(3) ：父元素内倒数第n子元素，不能无视其他元素

   p:nth-last-child(5){color:red;}					/*选中父元素里的倒数第5子元素p*/
   div p:ntht-last-child(5){color:red;}			/*选中div下的倒数第5子元素p*/
   

10. only-child ：父元素内唯一一个元素，不能无视其他元素

    p:only-child{color:red;}				/*选中父元素里唯一子元素p，不能有兄弟*/
    div	p:only-child{color:red;}			/*选中dix下的唯一子元素p，不能有兄弟*/
    

11. not(.类名) ：除了类名为（）里的，其余的标签都选中

    p:not(.warp){font-size:20px}			/*选中除了类名是warp的标签赋予样式*/
    p:not(:last-child){font-size}			/*选中除了最后一项子元素p*/
    

二，其他伪类

---

1. first-letter 选中第一个文字

   div:first-letter{
       font-size:30px;
       color:red;
   }							/*选中div下的第一个文字*/
   

2. first-line 选中第一行元素

   div:first-line{
       font-size:30px;
       background-color:red;
   }							/*选中div下的第一行文字*/
   

3. :selection 改变文字被选中的样式

   div::select{
       color:yellow
       background-color:red;
   }							/*用鼠标选中文字的时候改变的样式*/
   

三，属性选择器

---

1. [src] ：选中页面中所有具有src属性的标签

   [src = "6.jpg"]{
       border:1px solid red;
   }							
   ...
   <img src="6.jpg" />					/*会被选中*/
   

2. [class = "box"] ：选中页面中只有类名为box 的标签

   [class ~= "box"] ：选中页面类名中有box 的标签

   [class = "box"]{
       border:1px solid red;
   }
   ...
   <div class="box"></div>				/*会被属性选择器选择到*/
   <div class="box box1"></div>		/*不会被选到，box，box1是一个整体*/
   ---------------------------------------------------------------------------
   [class ~= "box"]{
       border:1px solid red;
   }
   ...
   <div class="box"></div>				/*会被属性选择器选择到*/
   <div class="box box1"></div>		/*会被属性选择器选择到*/
   

3. [src ^= '0'] ：选中具有src属性，并且以0开头的标签

   [src ^= '0']{
       border:1px solid red
   }
   ...
   <img src="01.jpg" />				/*会被选中*/
   

4. [src $= '0'] ：选中具有src属性，并且以0结尾的标签

   [src ^= 'jpg']{
       border:1px solid red
   }
   ...
   <img src="01.jpg" />				/*会被选中*/
   <img src="05.jpg" />				/*会被选中*/
   

5. [src *= '6.j'] ：选中具有src属性，并且属性内具有6.j的标签（模糊匹配）

四，伪元素选择器

---

1. :before ：在元素的内容之前插入内容

   :after ：在元素的内容之后插入内容

   li:before{
       position:absolute;
       top:6px;
       right:0px
       content:'';
       height:18px;
       width:1px;
       background-color:#000;
   }
   			/*在li的后面加上一个小竖杠*/
   若想去除掉最后一项li的竖杠
   .li-last{
       display:none;
   }
   

2. 不知道元素的高度的时候怎么让文字居中

   p{
       width:200px;
       height:50%;
       text-align:center;
       background-color:pink;
   }
   p:before{
       display:inline-block;		/*把这个伪元素变成行内块元素*/
       content:"";
       width:0;
       height:100%					/*创建一个宽度为0，不占据位置的行内块*/
       vertical-align:middle;		/*让这个伪元素进行middle对齐*/
   }
   

五，opacity，visiblity

---

1. display:none; ：使元素在页面中完全消失

2. opacity ：决定透明度（范围：0~1 0:完全透明 1:完全不透明），页面中存在，影响内容

   ie兼容filter:alpha(opacity = 0~100)

   p{
       width:100px;
       height:100px;
       background-color:blue;
       opacity:0.2;				/*透明度*/
   }
   

3. visiblity ：元素是否可见，元素存在

   ​ visible 可见的

   ​ hidden 隐藏（连同标签的功能一起隐藏了，但是还占据位置）