What is '+' css selector?-Front-end Q&A-php.cn

What is '+' css selector?

青灯夜游

Release： 2022-11-24 20:41:28

Original

2780 people have browsed it

In CSS, " " is an adjacent sibling element selector, used to select elements immediately after another element, and they have the same parent element; in other words, both E and F The elements have the same parent element, and the F element is behind and adjacent to the E element, so you can use the adjacent sibling element selector to select the F element, with the syntax "E F".

What is '+' css selector?

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

Adjacent sibling element selector (E F)

Adjacent sibling selector can select elements immediately following another Elements after one element, and they have the same parent element. In other words, the two EF elements have the same parent element, and the F element is behind the E element and adjacent, so we can use adjacent sibling elements Selector to select F elements.

There are 2 key pieces of information here: (1) Immediately after another element; (2) Both have the same parent element

Example ①:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        div+p{
            background-color: aqua;
        }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
      <div>
          <p>第零个段落</p>
          <div>
              <p>第一个段落</p>
          </div>
      </div>
      <p>第二个段落</p>
      <p>第三个段落</p>
      <p>第四个段落</p>
    </body>
</html>

Copy after login

##div p indicates that all locations located in

The first

element after the element

The above-mentioned "zeroth paragraph" and "first paragraph" are not selected because they are nested in the
tag, not the element after the tag;
The "second paragraph" is selected because the
tag is after the
tag The first
element has the same parent element ;
The "third paragraph" and "fourth paragraph" are not selected because they are not
The
tag immediately after the tag

If you want the "third paragraph" to also be selected, you need to make its

tag also in the < Immediately after the div> tag, as follows

#If the

tag is not immediately adjacent to

, as follows

You can see that the "second paragraph" is not selected because the adjacent sibling selector selects The element

div p{} immediately after an element represents the
element immediately after selecting
, but in the above code, the immediately following div tag is the tag. That is to say, it will select the tag immediately after the
tag. The
tag is not immediately adjacent to the
tag, so the
element cannot be selected.

Example ②:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        li+li{
            background-color: aqua;
        }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <LI>List item 3</LI>
        </ol>
    </body>
</html>

Copy after login

At first I was really wondering why “List Item 2" and "List item 3" are both selected~~~

First analyze the selector style: li li{}, which literally means to select

all the items after the

tag A

element

(1) Obviously the first

tag will not be selected because it is not preceded by

;

(2) The second
tag will be selected because it is the
tag immediately adjacent to the first
tag;

(3) The third
The tag will also be selected: because the previous tag of the third
tag is also a
tag, and it also meets the conditions of the css selector li li{}: the first tag ;Element

Because the style of the css selector is li li{}, this "formula" can always be applied to the li tag in the code.

(Learning video sharing:

css video tutorial

)

The above is the detailed content of What is '+' css selector?. For more information, please follow other related articles on the PHP Chinese website!