Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26

table of Contents

CSS composite (combination) selector

Why should I learn css composite selector

Descendant selector (emphasis)

Child element selector

Intersection selector

Union selector (emphasis)

Link pseudo-class selector (emphasis)

Summary of composite selectors

CSS composite (combination) selector

Why should I learn css composite selector

CSS selectors are divided into basic selectors and composite selectors, but basic selectors cannot satisfy our actual development, fast and efficient selection of tags.

The purpose is to be able to select more accurate and refined target element tags .

A composite selector is composed of two or more basic selectors combined in different ways

Descendant selector (emphasis)

Concept : The descendant selector is also called the containment selector

Role : used to select the descendants of elements or element groups

The writing method is to write the outer label at the front, and the inner label at the back, separated by a space , and write the father and grandfather first, and write the son and grandson.
父级 子级{属性:属性值;属性:属性值;}
grammar:
.class h3{color:red;font-size:16px;}
When the tags are nested, the inner tag becomes the descendant of the outer tag.

Future generations can choose this way. In other words, it can select any included tags

Case

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style>
		/*常山 赵子龙*/
		/*山东 济南*/
		.nav a {
			color: pink;
		}
		.wang ul li {
			color: red;
		}
	</style>
</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>一条狗</li>
		<li>一条狗</li>
		<li>一条狗</li>
	</ul>
	<div class="wang">
		<ul>
			<li>兜兜是一条狗</li>
			<li>兜兜是一条狗</li>
			<li>兜兜是一条狗</li>
		</ul>
	</div>
</body>
</html>

Child element selector

The son here refers to the real son does not include grandchildren and great grandchildren.

Function : The child element selector can only select elements that are child elements (parent sons) of a certain element.

Its wording is to label EDITORIAL parent, child label written on the back, in the middle with a > connection

grammar:
.class>h3{color:red;font-size:14px;}
Example:
比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

Case

Display style:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*后代选择器 选择 子孙后代*/
	/*div strong {
		color: red;
	}*/
	/*子元素选择器  符号  > 只选亲儿子 这些元素 */
	div>strong {
		color: pink;
	}
	</style>
</head>
<body>
	<div>
		<strong>儿子</strong>
		<strong>儿子</strong>
		<strong>儿子</strong>
	</div>
	<div>
		<p>
			<strong>孙子</strong>
			<strong>孙子</strong>
			<strong>孙子</strong>
		</p>
	</div>
</body>
</html>

Intersection selector

Condition: The intersection selector is composed of two selectors, and the labels found must meet: both the characteristics of label one and the characteristics of label two .

grammar:

The first one is a label selector and the second is a class selector. There can be no spaces between the two selectors , such as h3.special.

Tip : The intersection selector is and means. The meaning of...and...
比如：   p.one   选择的是： 类名为 .one  的 段落标签。  
Relatively speaking, it is used less, and it is not recommended to use.

Case

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>交集选择器</title>
	<style>
		/*需求，就是让 p 这个 变成红色*/
		/*交集选择器  既是p标签  又是 .red 类选择器的关系*/
		p.red {
			color: red;
		}
	</style>
</head>
<body>
	<p class="red">红色</p>
	<p class="red">红色</p>
	<p class="red">红色</p>
	<div class="red">红色</div>
	<div class="red">红色</div>
	<div class="red">红色</div>
	<p>蓝色</p>
	<p>蓝色</p>
	<p>蓝色</p>
</body>
</html>

Union selector (emphasis)

Application : If some selectors define the same style, you can use the union selector to make the code more concise .

Union selectors (CSS selector grouping) are ,formed by concatenating various selectors and are usually used for collective declaration .

grammar:

Any form of selector (including label selector, class selector id selector, etc.) can be used as part of the union selector.

Tips: Union selectors are usually used for collective declarations, separated by commas. All selectors will execute the following styles. The comma can be understood as a sum .
比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。 

Case 1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*客户需求： p 和 span 和 第一个div 里面的颜色都是红色*/
		/*分开写的*/
		/*p {
			color: red;
		}
		span {
			color: red;
		}*/
		/*.red {
			color: red;
		}*/
		/*并集选择器 用逗号隔开， 逗号理解为 和的意思  通常用于集体声明 就是因为这些选择器 里面的样式 相同*/
		p, 
		span,
		.red {
			color: red;
		}
		
	</style>
</head>
<body>
	<p>我和你</p>
	<p>我和你</p>
	<p>我和你</p>
	<span>我和你</span>
	<span>我和你</span>
	<span>我和你</span>
	<div class="red">我和你</div>
	<div>我和你</div>
	<h1>你和我</h1>
	<h1>你和我</h1>
</body>
</html>

Case 2

要求：
1. 链接 登录 的颜色为红色
2. 主导航栏里面的所有的链接改为橙色    
3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小测验</title>
	<style>
		/* 1. 链接 登录 的颜色为红色 */
		.site-r a {
			color: red;
		}
		/*2. 主导航栏里面的所有的链接改为橙色  */
		.nav ul li a {
			color: orange;
		}
		/*3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。*/
		.nav,
		.sitenav {
			font: 14px "微软雅黑";
		}
	</style>
</head>
<body>
<!-- 主导航栏 -->
<div class="nav">   
  <ul>
    <li><a href="#">公司首页</a></li>
	<li><a href="#">公司简介</a></li>
	<li><a href="#">公司产品</a></li>
	<li><a href="#">联系我们</a></li>
  </ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">    
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>
</body>
</html>

Link pseudo-class selector (emphasis)

Pseudo-class selector:

In order to distinguish from the previous class selector, the class selector is a point

For example, .demo {} and the pseudo-class uses 2 dots as colons. For example: link{}

Role :

Used to add special effects to certain selectors .

For example, to add special effects to the link, for example, you can select the first and nth elements.

There are many pseudo-class selectors, such as link pseudo-classes, structural pseudo-classes and so on.
a:link      /* 未访问的链接 */
a:visited   /* 已访问的链接 */
a:hover     /* 鼠标移动到链接上 */
a:active    /* 选定的链接 */
note

When writing, try not to reverse their order according to lvha . Otherwise, it may cause errors.

Memory method: l o v e ha te fell in love with hate or lv bag is very ha o

Because it is called a link pseudo-class, it uses the intersection selector a:link a:hover

Because a link browser has a default style, we need to specify a style separately for the link in actual work.

In actual work development, we rarely write all four states. Generally, we write it as follows:
a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

Case 1

<!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="http://www.xiaomi.com">小米手机</a>
	<a href="http://www.dami.com">大米手机</a>
	<!-- p.one -->
</body>
</html>

Case 2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*所以我们实际工作中都需要给链接单独指定样式*/
		.nav a {
			color: #333;
			text-decoration: none;
		}
		/*鼠标放到 nav 里面的链接 才会变色*/
		.nav a:hover {
			color: orange;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">手机</a>
		<a href="#">手机</a>
		<a href="#">手机</a>
		<a href="#">手机</a>
	</div>
	<a href="#">没有妈妈的孩子像棵草</a>
</body>
</html>

Summary of composite selectors

Selector	effect	feature	Usage	Separation symbols and usage
Descendant selector	Used to select element descendants	Is to choose all children and grandchildren	More	The symbol is a space. nav a
Child selector	Select the nearest element	Only choose your own son	less	The symbol is > .nav> p
Intersection selector	Select the intersection of two labels	Is and is	less	No symbol p.one
Union selector	Select certain selectors of the same style	Can be used for collective declaration	More	The symbol is a comma . nav, .header
Link pseudo-class selector	Change the status of the link		More	Focus on remembering the actual development of a{} and a:hover

(CSS learning record): CSS composite selector

CSS composite (combination) selector

Why should I learn css composite selector

Descendant selector (emphasis)

Child element selector

Intersection selector

Union selector (emphasis)

Link pseudo-class selector (emphasis)

Summary of composite selectors

Guess you like