CSS-伪类子代选择器

最新推荐文章于 2023-04-20 16:27:30 发布

z_Ever1

最新推荐文章于 2023-04-20 16:27:30 发布

阅读量929

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/z_Ever1/article/details/78353346

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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>

z_Ever1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-伪类子代选择器

伪类子代选择器 *{ margin: 0; /*外边距，盒子与盒子之间的距离*/ padding: 0; /*内间距，盒子内部的内容与盒子边框的距离*/ } .outer{ border: 1px solid red;/*边框线的宽度样式:实线颜色*/
复制链接

扫一扫

专栏目录