Home >Web Front-end >CSS Tutorial >Detailed introduction to the usage of CSS sub-element selector
Detailed introduction to the usage of CSS sub-element selector
- 高洛峰Original
- 2017-03-07 14:40:542490browse
The basic sub-element selector can only search downwards one level at a time, and cannot cross
HTML code:
<p>
this is my <strong><i>w</i>eb</strong> page.
</p>
CSS code:
p>strong { color: purple; } p>strong>i { font-size: 50px; }
1. Compared with the descendant selector, the child element selector can only select elements that are child elements of an element.
2. The sub-element selector uses the greater than sign ">" as the connector.
Example 1:
<html>
<head>
<style type="text/css">
h1 > strong {
color: red;
}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
##Example 2
<html>
<head>
<style type="text/css">
table.company td > p {
color: red;
}
</style>
</head>
<body>
<table class='company'>
<tr>
<td>
<p>hello</p>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p>world</p>
</td>
</tr>
</table>
</body>
</html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example of usage of CSS adjacent sibling selectorNext article：Example of usage of CSS adjacent sibling selector