Rumah >hujung hadapan web >tutorial css >Melihat lebih dekat pada pemilih dalam CSS

Melihat lebih dekat pada pemilih dalam CSS

青灯夜游
青灯夜游ke hadapan
2021-07-22 11:15:002672semak imbas

Artikel ini akan membawa anda memahami pemilih dalam CSS, memperkenalkan sintaks pemilih mudah, pemilih kompaun, pemilih kompleks dan keutamaan pemilih.

Melihat lebih dekat pada pemilih dalam CSS

Sintaks Pemilih

Mari kita fahami sintaks pemilih dahulu, dan kemudian mendalami yang berkaitan ciri latar belakang.

Pemilih Mudah

  • Bintang —— *
    • Pemilih universal, anda boleh memilih mana-mana elemen
  • Pemilih jenis|pemilih jenis —— div svg|a
    • juga dipanggil pemilih jenis, yang bermaksud ia memilih atribut tagName (nama teg) dalam elemen
    • Nama teg, yang juga merupakan pemilih kami yang paling biasa digunakan
    • Tetapi kerana HTML juga mempunyai ruang nama, ia terutamanya mempunyai tiga: HTML, SVG, MathML
    • Jika kita ingin memilih elemen tertentu dalam SVG atau MathML, kita mesti menggunakan bar menegak tunggal | dalam pemilih CSS ialah pemisah ruang nama, manakala pemisah ruang nama dalam HTML ialah titik bertindih :. Kemudian ruang nama yang disebutkan sebelum ini perlu diisytiharkan oleh @namespace Mereka digunakan bersama-sama, tetapi ruang nama ini tidak digunakan dengan sangat kerap. Ia adalah satu-satunya elemen yang bertindih antara HTML dan SVG 🎜>a
    • supaya kita boleh berfikir bahawa pemilih jenis hanyalah rentetan teks ringkas
  • pemilihan kelas Peranti|pemilih kelas ——
  • .class-name
      Pemilih yang bermula dengan
    • ialah pemilih kelas, yang juga merupakan salah satu yang paling klasik .
    • Kami juga boleh menggunakan ruang sebagai pemisah untuk menentukan berbilang kelas .
    • Ini
    • hanya perlu sepadan dengan salah satu daripadanya.class
  • Pemilih ID|pemilih id —— #id
      Mulakan dengan
    • dan tambahkan nama ID untuk memilih ID#
    • Ini adalah padanan yang ketat
    • Anda boleh menambah tanda tolak atau simbol lain dalam ID
  • Pemilih atribut|pemilih atribut ——
  • [attr=value]
      Ia termasuk pemilih atribut kelas dan pemilih id
    • Sintaks lengkap pemilih ini ialah
    • , yang bermaksud bahagian hadapan ialah nama atribut, diikuti dengan nilai atribut attr=value
    • Anda boleh menambah
    • di hadapan tanda sama di sini, yang bermaksud seperti kelas, anda boleh menyokong jujukan nilai yang dipisahkan oleh ruang: attr~=value
    • Jika anda menambah satu bar menegak di hadapan tanda sama, ini bermakna atribut ini bermula dengan Nilai ini boleh bermula dengan:
    • attr|=value
    • Jika kami tidak mempunyai keperluan khas untuk keutamaan, kami secara teorinya boleh menggunakan pemilih atribut untuk menggantikan pemilih kelas dan pemilih id
  • Kelas Pseudo —— :hover
      Bermula dengan
    • , ia adalah terutamanya status istimewa beberapa atribut :
    • Ini tidak ada kaitan dengan HTML yang kami tulis, kebanyakannya daripada interaksi dan kesan
    • Sesetengahnya Pemilih Kelas pseudo ialah pemilih kelas pseudo dengan fungsi Kita boleh menggunakan kelas pseudo untuk menyelesaikan masalah ini
  • Pemilih elemen pseudo —— ::before
      Secara umumnya,
    • :: bermula dengan kolon berganda
    • sebenarnya menyokong penggunaan kolon tunggal, tetapi kami menganjurkan kaedah penulisan kolon berganda
    • kerana kami boleh lihat sepintas lalu Ia dapat dilihat bahawa ini adalah pemilih unsur pseudo, yang dibezakan daripada kelas pseudo
    • Unsur pseudo digunakan untuk memilih beberapa elemen yang tidak wujud pada asalnya
    • Jika kita tidak memilihnya, tempat ini tidak akan wujud, selepas memilih, akan ada satu elemen lagi

Pemilih Kompaun

  • * Atau div mesti ditulis di hadapan
Pemilih terkompaun pertama terdiri daripada berbilang pemilih mudah Hanya tulis pemilih ringkas di sebelah satu sama lain untuk menjadi pemilih kompaun. Semantiknya ialah elemen yang kita pilih mesti sepadan dengan beberapa pemilih mudah pada masa yang sama, membentuk perhubungan "DAN".

Pemilih kompleks

Pemilih kompaun boleh ditukar menjadi pemilih kompleks dengan menggunakan penyambung di tengah, yang rumit Pemilih pilih berdasarkan struktur elemen.
  • - pemilih keturunan, satu elemen mesti mempunyai nod induk atau nod nenek moyang di sebelah kiri ruang
  • “ ” tersedia dalam Tahap Pemilih 4. Apabila kita membuat jadual, kita boleh memilih setiap lajur
  • Keutamaan Pemilih

Saya juga telah didedahkan kepada konsep keutamaan pemilih dalam "Pembelajaran Prinsip Kerja Pelayar dalam Pertempuran Praktikal" sebelum ini. Di sini kita melihat dengan lebih mendalam tentang konsep keutamaan pemilih.

Kiraan pemilih mudah

Kita bermula daripada kes, keutamaan pemilih adalah untuk semua pemilih mudah yang terkandung dalam pemilih Buat kiraan. Jadi senarai pemilih tidak dianggap sebagai pemilih lengkap (iaitu, pemilih dipisahkan koma), kerana bahagian tengah senarai pemilih ialah pemilih kompleks dipisahkan koma untuk pengiraan pemilih mudah.

Contoh:

#id div.a#idIni mengandungi dua pemilih ID, pemilih jenis dan pemilih kelas

Mengikut kiraan tatasusunan
    [
  • ,
  • ,
  • ,specificity]inline-style个数ID 选择器个数 contoh kami akan menghasilkan pemilihan class 选择器个数tagName 选择器个数
  • Terdapat penerangan sedemikian dalam standard pemilih. Kami akan menggunakan pangkalan N untuk mewakili keutamaan pemilih
  • specificity = [0, 2, 1, 1]Jadi
  • Kita hanya perlu mengambil N yang besar dan mengira Apa yang keluar adalah keutamaan daripada pemilih
  • Melihat lebih dekat pada pemilih dalam CSS Contohnya, kami menggunakan
  • N=1000000, kemudian S=2000001000001 , ini ialah keutamaan pemilih dalam contoh ini. , kerana Untuk menjimatkan memori, nilai N tidak cukup besar, jadi nilai 255 diambil sebagai N, jadi perkara yang sangat menarik berlaku Sebagai contoh, 256 kelas kami bersamaan dengan ID. Kemudian, kebanyakan penyemak imbas kami memilih 65536, dan pada dasarnya tiada lagi kuota yang dilampaui. Oleh kerana piawaian hanya mengatakan untuk menggunakan nilai yang agak besar, tetapi kita perlu mempertimbangkan isu penggunaan memori sementara, jadi kita akan mengambil nombor yang agak integral dalam perenambelasan, yang secara amnya merupakan kuasa keseluruhan 256 (kerana 256 adalah tepat satu bait ). specificity
  • kelas pseudo CSS

Kelas pseudo sebenarnya ialah pemilih mudah untuk banyak kandungan.

Pautan/Tindakan

  • :any-link - boleh memadankan mana-mana hiperpautan
  • :link - belum dilawati lagi
  • :link :visited - sepadan dengan semua hiperpautan yang dilawati Hiperpautan diluluskan
  • :hover - keadaan selepas pengguna meletakkan tetikus pada elemen Sebelum ini ia hanya boleh digunakan pada hiperpautan, tetapi kini ia boleh digunakan pada banyak elemen
  • :active —— Sebelum ini ia hanya mengambil masa. kesan untuk hiperpautan. Selepas mengklik, pautan semasa akan berkuat kuasa
  • :focus —— Ia adalah keadaan fokus dalam elemen ini. Sebenarnya, mana-mana Elemen yang boleh dapatkan fokus boleh menggunakan
  • :target - untuk memaut ke sasaran semasa Ini tidak digunakan untuk hiperpautan, tetapi untuk teg a, yang merupakan mata HASH semasa akan aktifkan a pseudo-class target
Setelah

atau :link digunakan, kami tidak boleh mengubah suai teks elemen ini lagi selain daripada warna boleh ditukar. Mengapa ia direka dengan cara ini? Kerana sebaik sahaja kita menggunakan atribut berkaitan reka letak, contohnya, jika kita meningkatkan saiz :visited, ia akan menjejaskan penjadualan. Dengan cara ini, kami boleh menggunakan API JavaScript untuk mengetahui sama ada pautan telah dilawati. Tetapi jika kita boleh mendapatkan sama ada pautan telah dilawati, maka kita boleh mengetahui laman web mana yang telah dilawati pengguna, yang merupakan tamparan maut kepada keselamatan pelayar. Jadi di sini saya ingin mengingatkan semua orang, jangan berfikir bahawa membuat beberapa perkara yang ekspresif tidak ada kaitan dengan keselamatan Malah, keselamatan adalah pertimbangan yang menyeluruh. CSS juga boleh menyebabkan lubang keselamatan. :visited

Struktur pokok

  • —— Sama ada elemen ini mempunyai unsur anak :empty
  • —— Bilangan anak (anak) unsur induk :nth-child()
  • —— Sama seperti :nth-last-child(), kecuali mengira dari belakang ke hadapan nth-child
  • :first-child :last-child :only-child

ialah kelas pseudo yang sangat kompleks, yang menyokong sejenis sintaks Contohnya, anda boleh menulis ganjil-genap :nth-child atau event dalam kurungan, atau anda boleh. tulis odd, 4N 1, ini akan sepadan dengan bentuk integer masing-masing. Oleh kerana ini adalah pemilih yang agak kompleks, kami tidak mahu menulis ungkapan yang terlalu rumit di dalamnya. Kami hanya menggunakannya untuk menangani ungkapan ganjil dan genap, seperti 1 lagi apabila 3, 1 lebih daripada 4, dsb. 3N-1

Malah, kedua-dua pemilih ini,

, empty, nth-last-child dan last-child, memusnahkan kerja sebelumnya yang kami lakukan dalam "Pembelajaran Prinsip Pelayar dalam Pelaksanaan" Bercakap tentang isu masa pengiraan CSS. Kita boleh bayangkan bahawa apabila kita memulakan pengiraan label, kita pasti tidak tahu sama ada ia mempunyai sub-label. only-child tidak mempunyai impak yang besar, tetapi hubungan empty sebenarnya mempunyai impak yang cukup besar. Oleh itu, penyemakan imbas telah melakukan pemprosesan khas apabila melaksanakan ini sama ada penyemak imbas tidak melaksanakannya dengan baik, atau penyemak imbas memerlukan lebih banyak prestasi untuk melaksanakannya. Oleh itu, adalah disyorkan agar anda cuba mengelakkan penggunaan ini dalam kuantiti yang banyak. last-child

jenis logik

    :bukan kelas pseudo - penyemak imbas arus perdana hanya menyokong urutan pemilih mudah (Pemilih kompleks) Kami tidak mempunyai cara untuk menulis sintaks pemilih kompleks di dalamnya
  • :where :has —— Kedua-dua kelas pseudo logik yang sangat berkuasa ini telah ditambahkan dalam CSS Tahap 4
Di sini ialah cadangan yang hangat kepada semua orang. Jika pemilih kami ditulis terlalu rumit, ini bermakna struktur HTML sedikit sebanyak tidak munasabah. Kami melakukan ini bukan sahaja untuk menyelamatkan masalah kejuruteraan penyemak imbas, bukan hanya untuk prestasi, tetapi juga demi struktur kod kami sendiri, jadi kami tidak sepatutnya mempunyai pemilih yang terlalu kompleks.

elemen pseudo CSS

Terdapat 4 jenis kesemuanya ::sebelum

::selepas

    ::baris pertama
  • ::huruf pertama
  • dan
  • terdapat dalam kandungan daripada elemen Sebelum dan selepas, masukkan elemen pseudo. Setelah atribut sebelum dan selepas digunakan, atribut yang dipanggil
  • boleh ditulis dalam pengisytiharan (elemen umum tidak boleh menulis atribut kandungan). Atribut
adalah seperti elemen DOM sebenar Ia boleh menjana kotak dan mengambil bahagian dalam tetapan taip dan rendering. Jadi kita boleh mengisytiharkan sifat-sifat seperti

, ::before dan sebagainya untuknya. ::aftercontentcontent boleh difahami sebagai: elemen pseudo border menambah elemen yang tidak wujud pada antara muka. background

::first-line dan ::first-letter mempunyai mekanisme yang berbeza. Kedua-dua ini sebenarnya wujud dalam kandungan. Seperti namanya, mereka memilih "baris pertama" dan memilih "huruf pertama". Mereka bukan elemen yang tidak wujud, mereka melampirkan sebahagian daripada teks supaya kita boleh melakukan beberapa pemprosesan padanya.

sebelum dan selepas

Dalam konsep kita, kita boleh berfikir bahawa pemilih dengan elemen pseudo sebelum sebenarnya akan memilihnya ditambahkan di hadapan kandungan elemen, dan kami hanya perlu menambah kandungan teks padanya melalui atribut kandungannya. (Di sini kita juga boleh menetapkan content: '' kepada elemen pseudo sebagai kosong) Jadi kita boleh menentukan atribut paparan untuk sebelum dan selepas sesuka hati, sama seperti elemen yang berbeza.

Apabila kami melaksanakan beberapa komponen, kami sering menggunakan kaedah ini untuk menambah beberapa kandungan hiasan pada halaman dengan cara yang tidak mencemarkan pokok DOM tetapi sebenarnya boleh mencipta kesan visual.

<div>
  <::before/>
  content content content content
  content content content content
  content content content content
  content content content content
  <::after/>
</div>

huruf pertama dan baris pertama

first-letter adalah bersamaan dengan kita mempunyai elemen yang meletakkan elemen pertama dalam kandungan Huruf-huruf dikurung. Kami boleh mengisytiharkan pelbagai atribut first-letter ini sesuka hati, tetapi kami tidak boleh mengubah kandungannya. Kita semua sepatutnya telah melihat kesan bahawa huruf pertama pada surat khabar akan menjadi lebih besar dan kemudian terapung dalam CSS, kita boleh menggunakan ::first-letter pemilih unsur pseudo. Menggunakan ini untuk melaksanakan akan menjadi lebih stabil dan kod akan menjadi lebih elegan daripada menggunakan JavaScript.

<div>
  <::first-letter>c</::first-letter>ontent content content content
  content content content content
  content content content content
  content content content content
</div>

first-line adalah untuk line selepas penetapan taip Sebenarnya, ia tidak ada kena mengena dengan first line dalam kod sumber kami. Jika penyemak imbas kami memberikan lebar pemaparan yang berbeza, first-line akhirnya akan menyertakan bilangan elemen yang berbeza dalam kedua-dua persekitaran. Jadi apabila kita menggunakan pemilih ini, kita perlu menggunakannya mengikut keperluan Kemungkinan besar kesan pemaparan pada mesin pembangunan kita dan mesin pengguna akan berbeza!

<div>
  <::first-line>content content content content content</::first-line>
  content content content content
  content content content content
  content content content content
</div>

Atribut yang tersedia bagi kedua-dua pemilih ini juga berbeza:

Sifat tersedia baris pertama

  • keluarga fon
  • keluarga warna
  • keluarga latar belakang
  • jarak perkataan
  • jarak huruf
  • hiasan teks
  • transformasi teks
  • tinggi garis

sifat tersedia huruf pertama

  • siri fon
  • siri warna
  • siri latar belakang
  • hiasan teks
  • transformasi teks
  • jarak huruf
  • jarak perkataan
  • tinggi garis
  • terapung
  • menjajarkan menegak
  • Siri model kotak : margin, padding, border

Senaman kecil

Tulis fungsi padanan. Ia menerima dua parameter, parameter pertama ialah sifat rentetan pemilih, dan parameter kedua ialah elemen HTML. Anda boleh memikirkan elemen ini kerana ia mesti ada dalam pokok DOM. Gunakan pemilih dan elemen DOM untuk menentukan sama ada elemen semasa boleh sepadan dengan pemilih kami. (Anda tidak boleh menggunakan sebarang fungsi penyemak imbas terbina dalam, hanya gunakan API induk dan kanak-kanak DOM untuk menentukan sama ada elemen boleh sepadan dengan pemilih.) Berikut ialah contoh panggilan.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Match Example —— by 三钻</title>
  </head>
  <body>
    <div>
      <b>
        <div class="class classA" id="id">content</div>
      </b>
    </div>
  </body>
  <script language="javascript">
    /**
     * 匹配选择器
     */
    function matchSelectors(selector, element) {
      // 先匹配当前元素是否匹配
      let tagSelector = selector.match(/^[\w]+/gm);
      let idSelectors = selector.match(/(?<=#)([\w\d\-\_]+)/gm);
      let classSelectors = selector.match(/(?<=\.)([\w\d\-\_]+)/gm);

      /**
       * 实现复合选择器,实现支持空格的 Class 选择器
       * --------------------------------
       */
      // 检查 tag name 是否匹配
      if (tagSelector !== null) {
        if (element.tagName.toLowerCase() !== tagSelector[0]) return false;
      }
      // 检测 id 是否匹配
      if (idSelectors !== null) {
        let attr = element.attributes[&#39;id&#39;].value;
        if (attr) {
          for (let selector of idSelectors) {
            if (attr.split(&#39; &#39;).indexOf(selector) === -1) return false;
          }
        }
      }
      // 检测 class 是否匹配
      if (classSelectors !== null) {
        let attr = element.attributes[&#39;class&#39;].value;
        if (attr) {
          for (let selector of classSelectors) {
            if (attr.split(&#39; &#39;).indexOf(selector) === -1) return false;
          }
        }
      }

      return true;
    }

    /**
     * 匹配元素
     */
    function match(selector, element) {
      if (!selector || !element.attributes) return false;

      let selectors = selector.split(&#39; &#39;).reverse();

      if (!matchSelectors(selectors[0], element)) return false;

      let curElement = element;
      let matched = 1;

      // 递归寻找父级元素匹配
      while (curElement.parentElement !== null && matched < selectors.length) {
        curElement = curElement.parentElement;
        if (matchSelectors(selectors[matched], curElement)) matched++;
      }

      // 所有选择器匹配上为 匹配成功,否则是失败
      if (matched !== selectors.length) return false;

      return true;
    }

    let matchResult = match(&#39;div #id.class&#39;, document.getElementById(&#39;id&#39;));
    console.log(&#39;Match example by 三钻&#39;);
    console.log(&#39;matchResult&#39;, matchResult);
  </script>
</html>

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Melihat lebih dekat pada pemilih dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam