search

Home  >  Article  >  Web Front-end  >  Detailed explanation of basic usage examples of CSS descendant selector

Detailed explanation of basic usage examples of CSS descendant selector

高洛峰
高洛峰Original
2017-03-07 14:43:392077browse

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>

CSS code: 

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

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>

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>

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

A little explanation:


##XML/ HTML CodeCopy content to clipboard

  1. a:link {color: #FF0000} /* Unvisited link * /

  2. a:visited {color: #00FF00} /* Visited link */

  3. a:hover {color: #FF00FF } /* Move the mouse to the link */

  4. a:active {color: #0000FF} /* Selected link */


For more detailed examples of basic usage of CSS's descendant selector, please pay attention to the PHP Chinese website for related articles!

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：Detailed introduction to the usage of CSS sub-element selectorNext article：Detailed introduction to the usage of CSS sub-element selector

Related articles

See more