Rumah > Artikel > hujung hadapan web > Apakah pemilih css " "

Apakah pemilih css " "

青灯夜游asal: 2022-11-24 20:41:282703semak imbas

Dalam CSS, " " ialah pemilih elemen adik beradik bersebelahan, digunakan untuk memilih elemen sejurus selepas elemen lain, dan ia mempunyai elemen induk yang sama, kedua-dua E dan F Elemen mempunyai elemen induk yang sama , dan elemen F berada di belakang dan bersebelahan dengan elemen E, jadi anda boleh menggunakan pemilih elemen adik beradik bersebelahan untuk memilih elemen F, dengan sintaks "E F".

Apakah pemilih css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Pemilih adik-beradik bersebelahan (E F)

Pemilih adik-beradik bersebelahan memilih elemen serta-merta mengikut elemen elemen lain, dan elemen tersebut mempunyai elemen induk yang sama Dalam erti kata lain, kedua-dua elemen EF mempunyai elemen induk yang sama, dan elemen F berada di belakang elemen E dan bersebelahan, jadi kita boleh menggunakan pemilih elemen adik beradik bersebelahan untuk memilih elemen F.

Terdapat 2 maklumat penting di sini: (1) Sejurus selepas elemen lain; (2) Kedua-duanya mempunyai elemen induk yang sama

Contoh ①:

<!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 bermaksud semua lokasi yang terletak di 54ae50fe8462449e97d1014976cd0364 elemen selepas div> elemen

"perenggan sifar" dan "perenggan pertama" tidak dipilih Teg dc6dce4a544fdca2df29d5ac0ea9906b bukan elemen selepas tag

"perenggan kedua" dipilih kerana tag e388a4556c0f65e1904146cc1a846bee elemen induk yang sama 6c04bd5ca3fcae76e30b72ad730ca86d;

"perenggan ketiga" dan "perenggan keempat" tidak dipilih kerana ia bukan e388a4556c0f65e1904146cc1a846bee 🎜>

Jika anda mahu "perenggan ketiga" juga dipilih, anda perlu membuat teg e388a4556c0f65e1904146cc1a846beenya juga Teg dc6dce4a544fdca2df29d5ac0ea9906b

Jika teg e388a4556c0f65e1904146cc1a846bee tidak bersebelahan dengan dc6dce4a544fdca2df29d5ac0ea9906b, seperti berikut

div p{} mewakili elemen e388a4556c0f65e1904146cc1a846bee serta-merta selepas memilih dc6dce4a544fdca2df29d5ac0ea9906b, tetapi elemen sejurus selepas teg div dalam kod di atas ialah 45a2772a6b6107b401db3c9b82c049c2 Teg ;span> selepas teg e388a4556c0f65e1904146cc1a846bee tidak bersebelahan dengan teg e388a4556c0f65e1904146cc1a846bee

Contoh ②:

Saya benar-benar keliru pada mulanya Mengapa kedua-dua "Item senarai 2" dan "Item senarai 3" dipilih~~~

Mula-mula analisa gaya pemilih: li li{}, yang bermaksud memilih

semua yang terletak di 25edfb22a4f469ecb59f1190150159c6 25edfb22a4f469ecb59f1190150159c6 elemen selepas tag (1) Jelas sekali teg 25edfb22a4f469ecb59f1190150159c6 tidak akan dipilih kerana ia tidak didahului oleh 25edfb22a4f469ecb59f1190150159c6;

(2) Teg 25edfb22a4f469ecb59f1190150159c6 kedua akan dipilih kerana ia adalah teg 25edfb22a4f469ecb59f1190150159c6 yang pertama 25edfb22a4f469ecb59f1190150159c6 ; teg juga akan dipilih: kerana teg sebelumnya bagi teg 25edfb22a4f469ecb59f1190150159c6 li> Setiap 25edfb22a4f469ecb59f1190150159c6 elemen

<!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>

adalah tepat kerana gaya pemilih css ialah li li{}, jadi teg li dalam kod sentiasa boleh menggunakan "formula".

(Belajar perkongsian video:

tutorial video css

)

Atas ialah kandungan terperinci Apakah pemilih css " ". Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menukar rentetan kepada tatasusunan dalam javascriptArtikel seterusnya：Bagaimana untuk menukar rentetan kepada tatasusunan dalam javascript

Artikel berkaitan

Lihat lagi