Apakah pemilih css ' '-Soal Jawab bahagian hadapan-php.cn

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>

Salin selepas log masuk

div p bermaksud semua lokasi yang terletak di < pertama

elemen selepas div> elemen

"perenggan sifar" dan "perenggan pertama" tidak dipilih Teg
bukan elemen selepas tag
"perenggan kedua" dipilih kerana tag
elemen induk yang sama ;
"perenggan ketiga" dan "perenggan keempat" tidak dipilih kerana ia bukan
🎜>

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

nya juga Teg

Jika teg

tidak bersebelahan dengan

, seperti berikut

< . >div p{} mewakili elemen

serta-merta selepas memilih

, tetapi elemen sejurus selepas teg div dalam kod di atas ialah Teg ;span> selepas teg
tidak bersebelahan dengan teg

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

elemen selepas tag (1) Jelas sekali teg

tidak akan dipilih kerana ia tidak didahului oleh

;

(2) Teg

kedua akan dipilih kerana ia adalah teg

yang pertama

; teg juga akan dipilih: kerana teg sebelumnya bagi teg

li> Setiap

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>

Salin selepas log masuk

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!

Label berkaitan：

css 选择器

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk menukar rentetan kepada tatasusunan dalam javascript Artikel seterusnya：Terdapat beberapa cara untuk menulis fungsi sedia jquery

Kenyataan Laman Web ini

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 terbaru oleh pengarang