What are the types of css context selectors?-Front-end Q&A-php.cn

What are the types of css context selectors?

青灯夜游

Release： 2022-01-20 10:43:08

Original

1880 people have browsed it

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>

Copy after login

(Learning video sharing:

css video tutorial What 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!