search

Home >Web Front-end >Front-end Q&A >What are the types of css context selectors?

What are the types of css context selectors?

青灯夜游
青灯夜游Original
2022-01-20 10:43:021927browse

There are four types of css context selectors: 1. Descendant selector, which can select all descendant elements of the current element; 2. Parent-child selector, which can select all child elements of the current element; 3. Sibling selector Neighbor selectors can select adjacent elements that have a common parent; 4. All selectors at the same level can select all subsequent elements that have a common parent.

What are the types of css context selectors?

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

Context selector of css

Context selector is a group of elements that constitute a "parent-child" or hierarchical relationship, and styles are set through their relationship

  • html document looks like an inverted "tree", so it has a hierarchical structure

  • Every element in the document is It has its own position, that is, the context relationship

  • So, you can get them

based on the context relationship of the elements. The four roles of elements

##1Ancestor elementHas descendant elements at all levels including child elements, grandchild elements, etc.##234
Serial number Role Description
Parent element Elements that only have child element levels
Descendant elements Together with other level elements Have a common ancestor element
Child element Have a common parent element with other sibling elements
Four kinds of context selectors

Serial number1Spacediv p##2Parent-child selector3Sibling Adjacent SelectorAll selectors at the same level~li.red ~ liExample
Selector Operator Description Example
Descendant selector Select all descendant elements of the current element , body *
> Select all child elements of the current element div > h2
Select Elements that have a common parent and are adjacent li.red li ##4
Select all subsequent elements that have a common parent 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上下文选择器</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      /* 类选择器 */
      .item {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 后代选择器 */
      .container div {
        border: 1px solid coral;
      }
      /* 父子选择器,只有外层的div受影响 */
      body > div {
        border: 3px solid green;
      }
      /* 使用后代选择器模拟父子选择器 */
      /* body div.container {
        border: 3px solid green;
      } */
      /* 同级相邻选择器 */
      /* 选择与第5个相邻的,即后面的"一个"元素 */
      /* .item.center + .item {
        background-color: lightgreen;
      } */
      /* 同级所有选择器 */
      /* 选择与第5个后面的,有共同父级的所有兄弟元素 */
      .item.center ~ .item {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div class="item center">5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>

(Learning video sharing:

css video tutorialWhat are the types of css context selectors?)

The above is the detailed content of What are the types of css context selectors?. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 html 选择器 li
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 negative infinity in JavaScriptNext article：What is negative infinity in JavaScript

Related articles

See more