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 “~”.
- Child selector (>)
The child selector is used to select the first level of children of an element.
For example, you want to select only onh1
Of the children of the elementstrong
The 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).
- 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.
- 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).
- 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
:empty
The 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
:target
A selector is used for a certain part of the pagetarget
Element of theid
Is used as a hyperlink in a page. Only the user clicks the hyperlink in the page and goes totarget
Elements,:target
The 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: