Home > Article > Web Front-end > What is the symbol for css to include a selector?

What is the symbol for css to include a selector?

青灯夜游Original: 2022-09-22 16:21:202158browse

The css symbol containing the selector is a space " ". The inclusion selector, also known as the "descendant selector", can select all elements that are descendants of an element; just put the selection of the parent element in front and the selection of child elements in the back, separated by a space. , the syntax is "parent tag descendant tag {style declaration}". The inclusion selector is an extension of the "element selector" and filters all descendant tags within a tag.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css inclusion selector

The descendant selector (descendant selector), also known as the inclusion selector, can select all elements that are descendants of an element. element.

Simply put, it is to treat an element as an ancestor element and locate all descendant elements of that element.

The css symbol that contains a selector is a space " "; just put the selection of the parent element in front and the selection of child elements in the back, separated by a space in the middle. When tags are nested, the inner tag becomes a descendant of the outer tag.

元素1 元素2{ 样式声明 }

The above syntax means selecting element 2 (descendant elements) inside element 1.

Contains selectors, which are an extension of the "element selector" and filter all descendant tags within a tag.

Example:

<head>
  <style>
    /*我想要把 ol 里面的小 li 选出来改为 pink*/
    ol li {
      color: pink;
    }

    /*把 链接a改为红色*/
    ol li a {
      color: red;
    }

    /*想要把第二个 ul 里面的li的链接a 变成绿色,为了区分第一个和第二ul，给第二个ul取个类名*/
    .nav li a {
      color: green;
    }
  </style>
</head>

<body>
  <ol>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li><a href="#">我是孙子</a></li>
  </ol>
  <ul>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
  </ul>
  <ul class="nav">
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li><a href="#">不会变化</a></li>
    <li><a href="#">不会变化</a></li>
    <li><a href="#">不会变化</a></li>
    <li><a href="#">不会变化</a></li>
  </ul>
</body>

What is the symbol for css to include a selector?

space.
Element 2 can be a grandchild, etc.
As long as element 1 is a descendant.
any basic selector.

(Learning video sharing:

web front-end)

The above is the detailed content of What is the symbol for css to include a selector?. For more information, please follow other related articles on the PHP Chinese website!

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：What is the identifier of the id selector in cssNext article：What is the identifier of the id selector in css

See more

What is the symbol for css to include a selector?

Related articles