日度归档:2020年1月17日

css 如何对指定元素的相邻元素设置样式呢?


摘要:
下文讲述在css中对元素中的相邻元素进行样式设置的方法分享,如下所示:


实现思路:
相邻兄弟选择器 (以加号分隔)

例:
对当前div 标签同级的span标签设置样式,如下所示:

    <html>
<head>
<style>

.div{
   border:1px solid black;
   width:200px;
   height:100px;
}

.div+span
{
   background-color:black;
   color:white;
   width:40px;
   height:40px; 
  margin:auto;
} 
 
</style>
</head>
<body>
<h2>div中的span样式演示</h2>

<div  >

<span >
  div中span样式测试
</span>
   

</div>

<span >
 span相邻兄弟选择器 测试
</span>


</body>
</html>

css 如何对指定元素的子元素设置样式呢?


摘要:
下文讲述在css中对元素中的子元素进行样式设置的方法分享,如下所示:


实现思路:
1.使用后代选取器(以空格分隔)
2.使用子元素选择器(以大于号分隔)

例:
对当前div 标签内的span标签设置样式,如下所示:

    <html>
<head>
<style>

.div{
   border:1px solid black;
   width:200px;
   height:100px;
}

.div span
{
   background-color:black;
   color:white;
   width:40px;
   height:40px; 
  margin:auto;
} 
 
</style>
</head>
<body>
<h2>div中的span样式演示</h2>

<div  >

<span >
  div中span样式测试
</span>
   

</div>

<span >
 span单独样式测试
</span>


</body>
</html>