4.3.9 Relationship selector

The relation selector mainly includes the child selector and the brother selector, in which the child selector is connected by the symbol “>”, the brother selector is connected by the symbol “+” and “~”.

  1. Child selector (>)

The child selector is used to select the first level of children of an element.

For example, you want to select only onh1Of the children of the elementstrongThe element can be written like this:h1 > strong.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The application of the child selector</title>

<style type="text/css">

h1>strong {
color: red;
font-family: Microsoft Yahei;
font-size: 20px;
}

</style>
</head>
<body>

<h1>With dreams in your heart,<strong>Don't lose faith</strong></h1>          <! -- (1) -->
<h1><em><strong>See through the pain,</strong></em>Love the world</h1> <! -- (2) -->

</body>
</html>
Copy the code


In the above code, the strong element in (1) is a child of the h1 element, and the strong element in (2) is a grandson of the H1 element, so the styles set in the code are valid only for the code in (1).

  1. Brother selector (+, ~)

The sibling selector is used to select the sibling element that is in the same parent element as an element and is located after that element.

Brother selectors are divided into adjacent brother selectors and ordinary brother selectors.

  1. Near brother selector

The selector uses the plus sign “+”; Connect the front and back selectors. The two elements in the selector have the same father, and the second element must follow the first.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Application of adjacent sibling selectors</title>

<style type="text/css">

p+h2 {
color: green;
font-family: "宋体";
font-size: 20px;
}

</style>
</head>
<body>

<h2>The topic chrysanthemum</h2>
<p>[Tang] Huang Chao</p>
<h2>Rustling west wind full yard planted, pistil hanxiang cold butterfly difficult to.</h2>  <! -- (1) -->
<h2>If he is my qing Emperor, and a peach blossom.</h2>

</body>
</html>
Copy the code


The adjacent sibling selector applies to (1). The first sibling immediately after the p element is seen in the structure at (1).

  1. Ordinary brother selector

The common sibling selector uses “~” to link the two selectors. Two elements in a selector have the same father, but the second element does not have to follow the first.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Ordinary brother selector application</title>

<style type="text/css">

p~h2 {
color: pink;
font-family: "宋体";
font-size: 20px;
}

</style>
</head>
<body>

<h2>The topic chrysanthemum</h2>
<p>[Tang] Huang Chao</p>
<h2>Rustling west wind full yard planted, pistil hanxiang cold butterfly difficult to.</h2>  <! -- (1) -->
<h2>If he is my qing Emperor, and a peach blossom.</h2>  <! -- (2) -->

</body>
</html>
Copy the code


The adjacent sibling selector is applied to (1), (2). The first sibling element immediately after the p element is seen in the structure is located at (1), (2).

4.3.10: Empty selector

:emptyThe selector is used to select all elements that have no child elements or whose text content is empty.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The use of the empty selector</title>

<style type="text/css">

p {
width:150px;
height:30px;
}

:empty {
background-color: # 999;
}  * / / * (1)

</style>
</head>
<body>

<p>The topic chrysanthemum</p>     
<p>[Tang] Huang Chao</p>
<p></p>      <! - (2) -- - >
<p>Rustling west wind full yard planted, pistil hanxiang cold butterfly difficult to.</p>
<p>If he is my qing Emperor, and a peach blossom.</p> 

</body>
</html>
Copy the code


The code in (1) defines (2) the empty element P with the “:empty selector” and sets the background color of its empty element to gray.

4.3.11: Target selector

:targetA selector is used for a certain part of the pagetargetElement of theidIs used as a hyperlink in a page. Only the user clicks the hyperlink in the page and goes totargetElements,:targetThe style set by the selector is in effect.

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The use of the target selector</title>

<style type="text/css">

:target {
background-color: #e5eece;
}

</sty1e>
</head>
<body>

<h1>This is a title,</h1>
<p><a href="#news1">Skip to content 1</a></p>
<p><a href="#news2">Skip to content 2</a></p>
<p>Click the link above, and the: Target selector will highlight the HTML anchor for the currently active work.</p>
<p id="news1"><b>Content 1...</b></p>
<p id="news2"><b>Content 2...</b></p>
<p><b>Note:</b>Internet Explorer 8 and earlier do not support the: Target selector.</p>

</body>
</html>
Copy the code


When jump to Content 1 or Jump to Content 2 is clicked, the linked content will have a background color effect: