Detailed explanation of basic usage examples of CSS descendant selector-CSS Tutorial-php.cn

Detailed explanation of basic usage examples of CSS descendant selector

高洛峰

Release： 2017-03-07 14:43:39

Original

2039 people have browsed it

Basics

Let’s look at the simplest way to write a descendant selector. The strong tag belongs to the descendants of the p tag, and the i tag belongs to the descendants of the strong tag:
HTML code :

<p>
    my name is <strong>li<i>daze</i></strong>, hahah.   
</p>

Copy after login

CSS code:

p strong {   
    font-size: 30px;   
}   
p i {   
    font-size: 40px;   
}

Copy after login

1. In the descendant selector, one end of the selector on the left side of the rule includes two or more Selectors separated by spaces.
2. The space between the selectors is a combining symbol.
3. Descendant selector. The hierarchical interval of descendants can be unlimited. Please pay attention to the difference from the child element selector.

Example 1

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}     
</style>
</head>

<body>
<ul>
  <li>List item 1     
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3     
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

Copy after login

Execution effect:
Detailed explanation of basic usage examples of CSS descendant selector

Example 2

<html>
<head>
<style type="text/css">
p.sidebar {width:100px;height:100px;background:blue;}     
p.maincontent {width:100px;height:100px;background:yellow;}     

p.sidebar a:link {color:white;}     
p.maincontent a:link {color:red;}     
</style>
</head>
<body>
<p class=&#39;sidebar&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>

<p class=&#39;maincontent&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>
</body>
</html>

Copy after login

Execution effect
Detailed explanation of basic usage examples of CSS descendant selector