CSS-伪类子代选择器

来源：互联网发布：汽车调色软件编辑：程序博客网时间：2024/06/08 15:51

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>伪类子代选择器</title>
   <style>
       *{
           margin: 0; /*外边距，盒子与盒子之间的距离*/
           padding: 0; /*内间距，盒子内部的内容与盒子边框的距离*/
       }
       .outer{
           border: 1px solid red;/*边框线的宽度样式:实线颜色*/
       }
       .inner{
           width: 100px;
           height: 150px;
           border: 1px solid blue;
       }
       /*使用:first-child选择第一个子元素*/
       div:first-child{
           /*border: 2px solid green;*/
       }
       /*使用:first-child选择最后一个子元素*/
       p:last-child{
           /*border: 2px solid green;*/
       }
       /*选择独生子*/
       :only-child{
           /*border: 2px solid green;*/
       }
       /*选择第几个孩子    odd奇数   even偶数*/
       div *:nth-child(3n+2){
           /*border: 2px solid green;*/
       }
       div#two *:nth-last-child(odd){
           /*border: 2px solid green;*/
       }
       /*选择每种类型中的第一个*/
       div#two *:first-of-type{
           /*border: 2px solid green;*/
       }
       /*选择每种类型中的最后一个*/
       div#two *:last-of-type{
           /*border: 2px solid green;*/
       }
       /*选择每种类型中的第几个*/
       div#two *:nth-of-type(4){
           /*border: 2px solid green;*/
       }
       /*选择每种类型中的倒数第几个*/
       div#two *:nth-last-of-type(4){
           border: 2px solid green;
       }
   </style>
</head>
<body>
   <div class="outer">
       <div class="inner">
           <span>hello</span>
           <span>hello</span>
       </div>
       <div class="inner" id="two">
           <span>hello1</span>
           <span>hello2</span>
           <span>hello3</span>
           <span>hello4</span>
           <span>hello5</span>
           <span>hello6</span>
           <span>hello7</span>
           <span>hello8</span>
           <p>你好<span>world</span></p>
           <p>你好<span>world</span></p>
       </div>
       <div class="inner">
           <p>你好</p>
       </div>
       <div class="inner"></div>
       <p>你好</p>
       <p>你好</p>
       <span class="spanOne">hello</span>
       <span>hello</span>
   </div>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
</body>
</html>

阅读全文

0 0