css 中复合选择器的作用加html代码练习

最新推荐文章于 2024-08-30 15:32:58 发布

落花有意，树无情

最新推荐文章于 2024-08-30 15:32:58 发布

阅读量732

点赞数 2

CC 4.0 BY-SA版权

文章标签： web前端 css 层叠样式表选择器

本文链接：https://blog.youkuaiyun.com/q918922703_1/article/details/88960386

本文详细介绍了CSS中的复合选择器，包括交集选择器、并集选择器、后代选择器、子代选择器及伪类选择器等，并通过实例展示了它们的具体应用。

复合选择器的使用

交集选择器的使用

交集选择器主要是使标签既满足第一个选择器又满足第二个选择器；在数学中将两个区域的交集部分进行css的样式设置如图所示交集选择器的数学原理

两个标签直接相连
例子如下`
图片结果如下
在这里插入图片描述

并集选择器

并集选择器的作用是将不同的基础选择器并到一起使用，常用来统一样式的风格在每个选择器当中用逗号隔开其格式为
标签一，标签二｛属性和属性值｝
其原理如下：在这里插入图片描述
例子如下：

在这里插入图片描述
代码结果：

后代选择器

后代选择器就是找到一个表签下的所有的一个标签进行样式设置常用在列表之中
其格式为标签一标签二｛｝
其原理如下在这里插入图片描述
例子如下：
代码图
结果如下：在后代选择器中所有一样标记都要使用

子代选择器

子代选择器类似于后代选择器的作用子代选择器只作用于标签的直属子标签
其格式为标签一>标签二｛｝
代码图如下在这里插入图片描述
其结果如下：

伪类选择器

伪类也是用来修饰样式的超链接标签a的伪类 link visited active hover的类型分别代表
链接的最开始的状态链接被访问后的状态鼠标点击时的状态和鼠标悬停时的状态

<html>
 <head>
  <meta charset="utf-8">
  <title>伪类选择器</title>
  <style type="text/css">
   a:link{
    color: green;
   }
   a:visited{
    color: blue;
   }
   
   a:hover{
    color: red;
   }
   
   a:active{
    color: yellow;
   }/*伪类选择器必须按照顺序不按照顺序就失效
   a:link属性不针对锚点之类的超链接标签
   a{}属性针对所有的超链接标签
   */
  </style>
 </head>
 <body>
  <a href="#http://www.baidu.com" target="_blank">伪类选择器</a>
 </body>
</html>

其结果的颜色