Home >Web Front-end >Front-end Q&A >What is '+' css selector?

What is '+' css selector?

青灯夜游Original: 2022-11-24 20:41:282747browse

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".

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>

##div p indicates that all locations located in dc6dce4a544fdca2df29d5ac0ea9906b The first e388a4556c0f65e1904146cc1a846bee element after the element

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

If you want the "third paragraph" to also be selected, you need to make its e388a4556c0f65e1904146cc1a846bee tag also in the 9e572e12d539cbcac1ebd28dea94b02d tag, as follows

#If the e388a4556c0f65e1904146cc1a846bee tag is not immediately adjacent to dc6dce4a544fdca2df29d5ac0ea9906b, 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 e388a4556c0f65e1904146cc1a846bee element immediately after selecting dc6dce4a544fdca2df29d5ac0ea9906b, but in the above code, the immediately following div tag is the 45a2772a6b6107b401db3c9b82c049c2 tag. That is to say, it will select the 45a2772a6b6107b401db3c9b82c049c2 tag immediately after the dc6dce4a544fdca2df29d5ac0ea9906b tag. The e388a4556c0f65e1904146cc1a846bee tag is not immediately adjacent to the dc6dce4a544fdca2df29d5ac0ea9906b tag, so the e388a4556c0f65e1904146cc1a846bee 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>

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 25edfb22a4f469ecb59f1190150159c6 tag A 25edfb22a4f469ecb59f1190150159c6 element

(1) Obviously the first 25edfb22a4f469ecb59f1190150159c6 tag will not be selected because it is not preceded by 25edfb22a4f469ecb59f1190150159c6;

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

(3) The third 25edfb22a4f469ecb59f1190150159c6 The tag will also be selected: because the previous tag of the third 25edfb22a4f469ecb59f1190150159c6 tag is also a 25edfb22a4f469ecb59f1190150159c6 tag, and it also meets the conditions of the css selector li li{}: the first
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!

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：How to convert string to array in javascriptNext article：How to convert string to array in javascript

See more

What is '+' css selector?

Related articles