Apakah pemilih yang lebih besar daripada (>) dalam CSS?-tutorial css-php.cn

Apakah pemilih yang lebih besar daripada (>) dalam CSS?

王林

Lepaskan： 2023-08-29 12:09:02

ke hadapan

1065 orang telah melayarinya

CSS 中的大于号 (>) Apakah itu pemilih?

Dalam CSS, simbol ">" tidak digunakan untuk membandingkan dua nilai seperti dalam bahasa pengaturcaraan lain. Di sini, kami menggunakan tanda lebih besar daripada (>) sebagai pemilih.

Dalam CSS, pemilih digunakan untuk memilih elemen HTML tunggal atau berbilang. Setiap kali kami menggunakan pemilih log masuk lebih besar, ia akan memilih elemen anak langsung bagi elemen induk, tetapi bukan elemen anak bersarang dalam.

Tatabahasa

Pengguna boleh menggunakan pemilih CSS log masuk yang lebih besar daripada mengikut sintaks berikut.

selecter1>selector2 {
   /* CSS code */
}

Salin selepas log masuk

Dalam sintaks di atas, "selector1" ialah elemen induk dan "selector2" ialah elemen anak langsung. Oleh itu, kami mentakrifkan gaya elemen kanak-kanak dalam blok pengisytiharan.

Contoh 1

Dalam contoh di bawah, kami membuat senarai tertib elemen HTML. Dalam CSS, kami menggunakan pemilih "ol>li", yang bermaksud untuk memilih semua elemen HTML "ol" yang merupakan anak langsung kepada elemen "li".

Dalam output, pengguna boleh melihat bahawa semua elemen dalam senarai bertukar menjadi biru kerana semua "li" adalah anak langsung "ol".

<html>
<head>
   <style>
      ol>li {
         color: blue;
      }
   </style>
</head>
<body>
   <h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
   <ol>
      <li> HTML </li>
      <li> CSS </li>
      <li> JavaScript </li>
      <li> NodeJS </li>
   </ol>
</body>
</html>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami mempunyai elemen div yang mengandungi elemen "p" pada tahap yang berbeza. Di dalam elemen div, kami menambah elemen "ht4" dan elemen "p". Oleh itu, kami menambah elemen "p" pada tahap kedalaman kedua dan ketiga.

Dalam CSS, kami menggunakan pemilih CSS "div>p" untuk memilih semua elemen "p" langsung bagi elemen div. Selain itu, kami telah menggunakan pemilih CSS "div p", yang memilih semua elemen "p" dalam elemen div.

Dalam output, pengguna boleh melihat bahawa "warna: merah" hanya digunakan pada elemen "p" pertama kerana ia adalah satu-satunya anak langsung unsur div. Apabila pemilih CSS "div p" memilih elemen kanak-kanak daripada semua peringkat, "warna latar belakang: aqua" akan digunakan pada semua elemen "p".

<html>
<head>
   <style>
      div>p {
         color: red;
      }
      div p {
         background-color: aqua;
      }
   </style>
</head>
<body>
   <h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
   <div>
      <p> This paragraph is at the first level. </p>
      <h3>
         <p> This paragraph is at the second level. </p>
         <h4>
            <p> This paragraph is at the third level. </p>
         </h4>
      </h3>
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, kami menggunakan tanda lebih besar daripada untuk memilih elemen HTML daripada tahap bersarang dalam. Di sini, elemen HTML "bekas" mengandungi senarai tidak tertib, dan kami juga telah mencipta senarai tidak tertib di luar elemen "bekas".

Dalam CSS, kami menggunakan pemilih CSS '.container>ul>li' untuk memilih semua elemen 'li' yang merupakan anak langsung elemen 'ul', di sini elemen 'ul' harus menjadi anak langsung elemen 'ul' Elemen An elemen dengan nama kelas "bekas".

Dalam output, kita dapat melihat bahawa semua CSS hanya digunakan pada senarai bersarang.

<html>
<head>
   <style>
      .container>ul>li {
         color: red;
         padding: 3px;
         background-color: green;
         font-size: 1.3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
   <div class = "container">
      <ul>
         <li> one </li>
         <li> Two </li>
         <li> Three </li>
      </ul>
   </div>
   <ul>
      <li> Four </li>
      <li> Five </li>
      <li> Six </li>
   </ul>
</body>
</html>

Salin selepas log masuk

Pengguna belajar menggunakan pemilih CSS yang lebih besar daripada tanda (>) dalam CSS. Ia digunakan untuk memilih elemen anak langsung bagi elemen tertentu. Di sini kita boleh menggunakan tag HTML, nama kelas, ID, dsb. Pemilih CSS dengan tanda yang lebih besar daripada (>).

Atas ialah kandungan terperinci Apakah pemilih yang lebih besar daripada (>) dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!