子选择器的使用-CSS入门基础（004）

2020-12-09 22:30:44 阅读：215 来源： 互联网

标签：元素 100px height width 004 div 选择器 CSS

今天我们继续分享关于选择器的内容。

子元素选择器，就是选中某个或某一类元素的子元素。

语法：

#father #child {width:100px;height:100px}#父层 #子层 {属性1：属性值；属性2：属性值}

父元素与子元素必须用空格分隔开，表示在父元素包含下的子元素。

示例代码：

<html>  <head>    <title>子元素选择器</title>    <style type="text/css">      #father1      {        width:400px;        height:400px;        border:1px solid black;      }            #father1 div      {        background-color:green;      }            #father2      {        width:300px;        width:200px;        border:1px solid black;      }            #father2 #p1       {        color:blue;      }    </style>  </head>  <body>    <div id="father1">      <div>区域一子元素</div>      <div>区域二子元素</div>    </div>    <div id="father2">      <p id="p1">内容</p>      <p id="p2">内容</p>    </div>  </body></html>

预览浏览器后，我们会发现father1和father2都设置了宽度高度和边框，然后使用father1 div，表示第一个div区域下的全部div，都设置背景色为绿色；而father2 p1则表示，第二个div区域下只有p1元素，设置了字体蓝色，不影响其他的段落标签。

相邻选择器：

相邻选择器，就是选中元素的下一个兄弟元素。在这里注意一点，相邻选择器的操作对象是该元素的同级元素。

语法：

#friend+div {width:100px;height:100px;}#元素+相邻元素 {width:100px;height:100px;}

示例代码：

<html>  <head>    <title>相邻选择器</title>    <style type="text/css">      #friend      {        width:200px;        height:200px;        border:1px solid black;      }            #friend+div      {        width:200px;        height:200px;        border:1px solid black;        background-color:green;      }    </style>  </head>  <body>    <div>区域一</div>    <div id="friend">区域二</div>    <div>区域三</div>  </body></html>

使用#friend+div，表示与friend相邻的div，也就是下一个兄弟元素，起作用，与上面的不起作用。

群组选择器：

群组选择器，就是同时对好几个元素进行相同的操作。这个一般都是在对页面元素进行默认值设定时使用的，便于管理，也减少冗余代码。

语法：

h1,h3,div,p,span {margin:0;padding:0;}

示例代码：

<html>  <head>    <title>群组选择器</title>    <style>      h3,p,div,span      {        background-color:green;        color:white;      }    </style>  </head>  <body>    <h3>标题内容</h3>    <p>段落内容</p>    <div>分隔内容</div>    <span>行内容</span>  </body></html>

预览浏览器后，大家会发现以上几个元素，背景色均为绿色，字体色均为白色了，这个就是群组选择器的作用。另外插一句，大家看绿色的大小会发现，h3，p，div都是block块元素，而只有span是inline行元素。

以上分享的选择器内容，基本覆盖选择器90%以上的内容了，也够用了，其他那些更高级，更复杂的选择器，今后学习高级教程时，再给大家分享。

标签：元素,100px,height,width,004,div,选择器,CSS
来源： https://blog.csdn.net/modern358/article/details/110942299

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

子选择器的使用-CSS入门基础（004）