CSS选择器

最新推荐文章于 2024-05-23 22:59:55 发布

@小雨淅淅

最新推荐文章于 2024-05-23 22:59:55 发布

阅读量65

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/zylfsklysdq/article/details/120091105

版权

id选择器

语法格式：#S{…}，其中S为选择器名，id为name的标签，会匹配

<style>
#name{
	color:red;  
}
</style>
<p id="name">red text</p>  <!--红色-->

类选择器

语法格式：.S{…}，使用.标识，class属性为value的标签，会匹配

<style>
.value{
	text-align:center;
}
</style>
<p class="value">text center</p>  <!--居中-->

元素选择器（标签选择器）

语法格式：S{…}，所有P标签都会匹配以下格式

<style>
p{
	font-style:italic;
}
<p style="font-style:italic">itatic text</p>  <!--斜体-->
</style>

包含选择器

指定目标选择器必须处于某个选择器对应的内部元素，语法格式：A B{…} 或 .A B{…}

<style>
p{
	color:red;
}
div p{
	color:yellow;
}
</style>
<p>red text</p>  <!--红色-->
<div>
	<p>yellow text</p>  <!--黄色-->
</div>

<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

</body>

子选择器

语法格式：A>B{…}

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

兄弟选择器

语法格式：A~B{…},当A匹配A，B匹配B时，显示B

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的，显示P，不显示div-->
</div>

相邻选择器

语法格式：A+B{…}

<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
   div+p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>  // 就这一个是挨着的
<p>not red text</p>

@小雨淅淅

关注

0
点赞
踩
0

收藏

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

id选择器语法格式：#S{…}，其中S为选择器名，id为name的标签，会匹配<style>#name{ color:red;}</style><p id="name">red text</p>类选择器语法格式：.S{…}，使用.标识，class属性为value的标签，会匹配<style>.value{ text-align:center;}</style><p class="value">t
复制链接

扫一扫