基本CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布

hjjk888

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量73

点赞数

分类专栏：样式文章标签： CSS

本文链接：https://blog.csdn.net/hjjk888/article/details/83974358

版权

样式专栏收录该内容

20 篇文章 0 订阅

订阅专栏

基本CSS选择器,复合选择器,后代选择器基本CSS选择器有标记选择器、类别选择器、ID选择器3种
1。标记选择器
每一种HTML标记的名称都可以作为相应的标记选择器的名称，如h1,p,等等
2。类别选择器
类别选择器的名称可以由用户自定义
格式如下：.class{color:green;font-size:20px;}
3。ID选择器
与类别选择器相试
格式如下：#id{color:green;font-size:20px;}

复合选择器：就是两个或者多个基本选择器，通过不同方式连接而成的选择器
有两种情况：”交集“选择器、“并集”选择器
1。“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写
如：h3.class{color:red;font-size:23px;}

2。“并集”选择器：同时选中各个基本选择器所选择的范围，任何形式的选择器都可以，并集选择器是多个选择器通过逗号连接而成的，
格式如:h1,h2,h3{color:red;font-size:23px;}

后代选择器：
后代选择器书写方法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代了
举个列子

<html>
<head>
<title>后代选择器</title>
<style type="text/css">
p span{}{
   color:red
}
span
{}{
  color:blue;
}
</style>
</head>
<body>

嵌套用CSS标记的方法嵌套之外的标记不生效
</body>
</html>
效果是：“用CSS”的显示红色，其他用包围起来的是兰色
后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”
子选择器：也就是只有对直接后代有影响的选择器，而对“孙子”以及对个层的后代不产生作用。
格式如下：p>span{color:blue;}

hjjk888

关注

0
点赞
踩
0

收藏

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

基本CSS选择器,复合选择器,后代选择器基本CSS选择器有标记选择器、类别选择器、ID选择器3种1。标记选择器每一种HTML标记的名称都可以作为相应的标记选择器的名称，如h1,p,等等2。类别选择器类别选择器的名称可以由用户自定义格式如下：.class{color:green;font-size:20px;}3。ID选择器与类别选择器相试...
复制链接

扫一扫