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

Melihat lebih dekat pada pemilih dalam CSS

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

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

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
.class-name
- ialah pemilih kelas, yang juga merupakan salah satu yang paling klasik .
- Ini
- hanya perlu sepadan dengan salah satu daripadanya.class
Pemilih ID｜pemilih id —— #id
- dan tambahkan nama ID untuk memilih ID#
- Anda boleh menambah tanda tolak atau simbol lain dalam ID
[attr=value]
- Sintaks lengkap pemilih ini ialah
- , yang bermaksud bahagian hadapan ialah nama atribut, diikuti dengan nilai atribut attr=value
- di hadapan tanda sama di sini, yang bermaksud seperti kelas, anda boleh menyokong jujukan nilai yang dipisahkan oleh ruang: ～attr~=value
- attr|=value
Kelas Pseudo —— :hover
- , ia adalah terutamanya status istimewa beberapa atribut :
- Sesetengahnya Pemilih Kelas pseudo ialah pemilih kelas pseudo dengan fungsi Kita boleh menggunakan kelas pseudo untuk menyelesaikan masalah ini
Pemilih elemen pseudo —— ::before
- :: bermula dengan 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 选择器个数
specificity = [0, 2, 1, 1]Jadi
Kita hanya perlu mengambil N yang besar dan mengira Apa yang keluar adalah keutamaan daripada pemilih
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 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

: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

::huruf pertama
dan
terdapat dalam kandungan daripada elemen Sebelum dan selepas, masukkan elemen pseudo. Setelah atribut sebelum dan selepas digunakan, atribut yang dipanggil

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

Artikel sebelumnya：8 Teknik Reka Letak CSS Tulen Yang Patut DiketahuiArtikel seterusnya：8 Teknik Reka Letak CSS Tulen Yang Patut Diketahui

Artikel berkaitan

Lihat lagi