CSS学习中|CSS复合选择器（初学者：代码+样例）

最新推荐文章于 2023-12-11 21:32:42 发布

美女变成老太婆✿

最新推荐文章于 2023-12-11 21:32:42 发布

阅读量352

点赞数 1

分类专栏： CSS基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47788265/article/details/106971778

版权

CSS基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

学习目的：复合选择器可以选择更准确更精细的目标元素标签，是由两个或多个基础选择器，通过不同方式组合而成的

1.后代选择器（重点）

概念：后代选择器又称为包含选择器

作用：用来选择元素或元素的子孙后代

写法：

把外层的标签写在前面，内层标签写在后面，中间用空格分开

父级子级 {

属性：属性值；

...

}

html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后代选择器</title>
    <link type="text/css" rel="stylesheet" href="0626.css" />
  </head>
  <body>
    <div class="nav">
      <a href="#">内部链接</a>
      <a href="#">内部链接</a>
      <a href="#">内部链接</a>
    </div>
      <a href="#">外部链接</a>
      <a href="#">外部链接</a>
      <a href="#">外部链接</a>
      <ul>
          <li>hello</li>
          <li>hello</li>
          <li>hello</li>
      </ul>
      <div class="hello">
          <ul>
              <li>hi</li>
              <li>hi</li>
              <li>hi</li>
          </ul>
      </div>
  </body>
</html>

css代码：

.nav a {
  color: blueviolet;
}
.hello li {
    color: brown;
}

样例：

2.子元素选择器

作用：子元素选择器只是选择作为某元素子元素（亲生儿子）的元素

写法：

父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子元素选择器</title>
    <link type="text/css" rel="stylesheet" href="0626.css" />
  </head>
    <div>
        <strong>儿子</strong>
        <strong>儿子</strong>
        <strong>儿子</strong>
    </div>
    <div>
        <p>
          <strong>孙子</strong>
          <strong>孙子</strong>
          <strong>孙子</strong>
        </p>
    </div>
  </body>
</html>

css代码：

/* 子元素选择器 */
div>strong {
  color: aquamarine;
}

样例：

3.交集选择器

条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也要有标签二的特点

html代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>交集选择器</title>
    <link type="text/css" rel="stylesheet" href="0626.css" />
  </head>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <p class="blue">蓝色</p>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <div class="red">红色</div>
  </body>
</html>

css代码：

/* 交集选择器 既是p标签又是.red类选择器 的关系 */
p.red {
    color: red;
}

样例：

4.并集选择器（重点）

作用：如果某些选择器定义的样式相同的样式，就可以利用并集选择器，可以让代码更清晰简洁

注意：并集选择器通常用于集体声明，逗号隔开，所有的选择器都会执行后面的样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>并集选择器</title>
  <style>
   /* 让 p 和 span 的颜色都是红色 */
  /* p {
    color: red;
  }
  span {
    color: red;
  } */
  /* 逗号就是和的意思 用逗号隔开 */
  p,
  span,
  .red {
    color: red;
  }
  </style>
</head>
<body>
  <p>早上好</p>
  <p>早上好</p>
  <span>早上好</span>
  <span>早上好</span>
  <div class="red">早上好</div>
  <div>早上好</div>
  <h1>中午好</h1>
  <h1>中午好</h1>
</body>
</html>

样例：

5.链接伪类选择器（重点）：

伪类选择器：类选择器是一个点举例 .nav{ }

伪类选择器是两个点，即冒号举例：link{ }

作用：用于向某些选择器添加特殊的效果，如给链接添加特殊效果，比如可以选择第1个，第n个元素

1) a:link 未访问的链接

2) a:visited 已访问的链接（比如浏览网页时已看过的文章，再次浏览时颜色不同）

3) a:hover 鼠标移动到链接上

4) a:active 选定的链接

重点：顺序一定要注意，如上排列(l v h a)，不能错乱，避免问题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>链接伪类选择器</title>
	<style>
		/*未访问过链接的状态 正常状态*/
		/*p.one 交集选择器*/
		a:link {
			color: #333;
			/*取消下划线*/
			text-decoration: none;
		}
		/*已经访问的链接  我们点击过*/
		a:visited {
			color: orange;
		}
		/*鼠标经过链接时候的状态*/
		a:hover {
			color: red;
		}
		/*当我们点击的时候（按下鼠标，别松开的时候）*/
		a:active {
			color: green;
		}
	</style>
</head>
<body>
	<a href="https://www.baidu.com/">百度一下</a>
	<!-- p.one -->
</body>
</html>

最常用写法：

css代码：

  .nav a {
    color: saddlebrown;
   }
  .nav a:hover {
     color: seagreen;
   }

美女变成老太婆✿

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS学习中|CSS复合选择器（初学者：代码+样例）

学习目的：复合选择器可以选择更准确更精细的目标元素标签，是由两个或多个基础选择器，通过不同方式组合而成的1.后代选择器（重点）概念：后代选择器又称为包含选择器作用：用来选择元素或元素的子孙后代写法：把外层的标签写在前面，内层标签写在后面，中间用空格分开父级子级 { 属性：属性值；属性：属性值； ...}html代码：<!DOCTYPE html><html lang="en"> <head> ...
复制链接

扫一扫

专栏目录