What is the symbol for css to include a selector?-Front-end Q&A-php.cn

What is the symbol for css to include a selector?

青灯夜游

Release： 2022-09-22 16:21:20

Original

2177 people have browsed it

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.

What is the symbol for css to include a selector?

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{ 样式声明 }

Copy after login

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>

Copy after login

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!