CSS-基本选择器

最新推荐文章于 2022-11-17 22:00:35 发布

z_Ever1

最新推荐文章于 2022-11-17 22:00:35 发布

阅读量178

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/z_ever1/article/details/78353318

版权

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: 100px;
           border: 1px solid blue;
       }
       /*标签选择器*/
       span{
           /*background-color: green;*/
       }
       /*选择div并且id为two的后代的span*/
       div#two span{
           /*background-color: green;*/
       }
       /*选择所有的span标签和p标签给样式*/
       p,span{
           /*background-color: green;*/
           /*border: 1px solid green;*/
       }
       /*选择id为two的之后的兄弟并且class为spanOne的span标签*/
       div#two~span.spanOne{
           /*background-color: green;*/
       }
       /*选择id为two的下一个兄弟元素*/
       #two+*{
           background-color: green;
       }
   </style>
</head>
<body>
   <div class="outer">
       <div class="inner">
           <span>hello</span>
           <span>hello</span>
       </div>
       <div class="inner" id="two">
           <span>hello</span>
           <span>hello</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>
</body>
</html>

z_Ever1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-基本选择器

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

扫一扫