Naik taraf projek anda dengan pemilih CSS dan atribut tersuai

Artikel ini pada asalnya diterbitkan oleh TestProject. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Selenium WebDriver's Element Selenium adalah salah satu komponen teras rangka kerja automasi dan kunci untuk berinteraksi dengan mana -mana aplikasi web. Dalam kajian ini pemilih elemen automatik, kami akan membincangkan pelbagai strategi, meneroka keupayaan mereka, menimbang kebaikan dan keburukan mereka, dan akhirnya mengesyorkan strategi pemilih terbaik -dalam kombinasi dengan sifat tersuai pemilih CSS.

mata utama

Selenium WebDriver's Element Selenium adalah penting untuk berinteraksi dengan mana -mana aplikasi web. Strategi pemilih terbaik adalah untuk menggabungkan sifat tersuai pemilih CSS, kerana ia menggabungkan kemudahan penggunaan, fleksibiliti, sokongan dalam talian, dokumentasi, dan prestasi.
atribut tersuai dan pemilih CSS membenarkan jurutera automasi untuk mencari elemen tertentu tanpa membuat pemilih elemen kompleks. Walau bagaimanapun, ini memerlukan kerjasama antara QA dan pasukan pembangunan untuk menambah sifat tersuai yang boleh digunakan dalam aplikasi.
XPath adalah strategi pemilih elemen yang serba boleh dan berkuasa yang memilih mana -mana elemen dalam halaman, sama ada anda mempunyai kelas dan ID yang tersedia atau tidak. Walau bagaimanapun, XPath melakukan yang buruk di Internet Explorer.
pemilih elemen ID dan kelas paling tidak terjejas oleh perubahan dalam struktur aplikasi. Walau bagaimanapun, jika pemaju secara langsung mengubah ID atau kelas yang digunakan dalam automasi, ia akan menjejaskan ujian anda.
Penggunaan nama tag, teks pautan, teks pautan separa dan nama sebagai strategi pemilih elemen adalah terhad dan tidak disyorkan untuk diterima secara meluas sepanjang rangka kerja automasi. Mereka hanya boleh digunakan tanpa pilihan pemilih tambahan yang tersedia, seperti tag atau IDS tersuai.

Selenium Element Selenium

Pilih strategi pemilih elemen terbaik adalah penting untuk kejayaan usaha automasi dan kemudahan penyelenggaraan. Oleh itu, apabila memilih pemilih, kemudahan penggunaan, fleksibiliti, sokongan dalam talian, dokumentasi, dan prestasi harus dipertimbangkan. Berhati-hati dengan mempertimbangkan strategi pemilih yang betul akan dibayar pada masa akan datang dengan automasi yang mudah dilakukan.

Sama seperti aspek teknikal pemilih elemen harus dipertimbangkan, budaya organisasi harus dipertimbangkan. Budaya kerjasama yang matang antara pemaju dan QA akan mencapai tahap kejayaan yang lebih tinggi apabila melaksanakan pemilih elemen dalam automasi. Ini bukan sahaja memberi manfaat kepada organisasi dengan meletakkan asas untuk kerjasama di kawasan lain dalam kitaran hayat pembangunan perisian, tetapi juga melampaui usaha automasi sendiri.

Semua sampel kod akan menggunakan perintah Python dan Selenium WebDriver, tetapi umumnya terpakai bagi mana -mana bahasa dan kerangka pengaturcaraan.

HTML Contoh:

Saya akan menggunakan coretan HTML menu navigasi berikut sebagai contoh dalam setiap bahagian:

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Jangan mengesyorkan: Nama Tag, Teks Pautan, Teks Pautan Separa dan Nama

Saya tidak akan menghabiskan banyak masa untuk ini kerana mereka semua sangat terhad digunakan. Mereka sering bukan pilihan yang baik untuk penggunaan yang meluas sepanjang rangka kerja automasi. Mereka menangani keperluan khusus yang boleh ditangani dengan mudah menggunakan strategi pemilih elemen lain. Gunakan ini hanya jika anda mempunyai keperluan khusus untuk menangani keadaan khas. Walaupun begitu, kes -kes yang paling istimewa tidak cukup istimewa untuk menggunakannya. Anda akan menggunakannya tanpa pilihan pemilih tambahan yang tersedia, seperti tag atau IDS tersuai.

Contoh:

Menggunakan nama tag, anda boleh memilih semua bilangan elemen yang sepadan dengan nama tag yang anda berikan. Ini adalah penggunaan terhad kerana ia hanya berfungsi jika anda perlu memilih sejumlah besar elemen jenis yang sama. Contoh berikut mengembalikan semua 4 elemen div dalam sampel HTML.

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Anda boleh menggunakan contoh berikut untuk memilih pautan. Seperti yang anda lihat, mereka hanya boleh mencari tag sauh dan teks tag anchor ini:

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

Akhirnya, anda boleh memilih elemen mengikut atribut nama, tetapi seperti yang anda lihat dalam sampel HTML, tidak ada tag dengan atribut nama. Ini adalah masalah biasa dalam hampir semua aplikasi, kerana sangat biasa untuk menambah atribut nama kepada setiap atribut HTML. Jika elemen menu utama mempunyai atribut nama seperti ini:

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

anda boleh memilihnya seperti ini:

<code class="language-html"><div id="main-menu" name="menu"></div></code>

Seperti yang anda lihat, strategi pemilih elemen ini mempunyai penggunaan terhad. Kaedah berikut adalah lebih baik kerana mereka lebih umum dan berkuasa.

Ringkasan: Nama tag, teks pautan, teks pautan separa dan nama

pros Kekurangan Senang digunakan tidak digunakan secara meluas Penggunaan yang sangat terhad mungkin tidak terpakai dalam beberapa kes

disyorkan: xpath

XPath adalah strategi pemilih elemen yang serba boleh dan berkuasa. Ini juga keutamaan dan kegemaran peribadi saya. XPath boleh memilih mana -mana elemen di halaman, sama ada anda mempunyai kelas dan ID yang tersedia atau tidak (walaupun tanpa kelas atau ID, sukar untuk dikekalkan dan kadang -kadang rapuh). Pilihan ini amat biasa kerana anda boleh memilih elemen induk. XPath juga mempunyai banyak fungsi terbina dalam yang membolehkan anda menyesuaikan pemilihan elemen.

Walau bagaimanapun, fleksibiliti membawa kerumitan. Memandangkan XPath boleh melakukan banyak, lengkung pembelajarannya juga lebih curam daripada strategi pemilih elemen lain. Ini boleh dikompensasi oleh dokumentasi dalam talian yang sangat baik yang mudah dijumpai. Sumber yang baik ialah tutorial XPath yang terdapat di W3Schools.com.

Ia juga harus diperhatikan bahawa terdapat perdagangan apabila menggunakan XPath. Walaupun anda boleh memilih elemen induk dan menggunakan fungsi terbina dalam yang sangat umum, XPath melakukan yang buruk di Internet Explorer. Perdagangan ini harus dipertimbangkan apabila memilih strategi pemilih elemen. Sekiranya anda perlu memilih elemen induk, anda perlu mempertimbangkan kesannya terhadap ujian silang pelayar di Internet Explorer. Pada asasnya, ia akan mengambil masa lebih lama untuk menjalankan ujian automatik di Internet Explorer. Jika aplikasi anda tidak mempunyai penggunaan Internet Explorer yang tinggi, ini adalah pilihan yang baik kerana anda mungkin mempertimbangkan untuk menjalankan ujian kurang di Internet Explorer daripada pelayar lain. Jika pangkalan pengguna anda mempunyai penggunaan Internet Explorer yang besar, anda hanya perlu mempertimbangkan XPath jika kaedah lain yang lebih baik tidak sesuai untuk organisasi anda.

Contoh:

Jika anda mempunyai syarat untuk memilih elemen induk, anda mesti memilih XPath. Inilah cara untuk melakukannya: Menggunakan contoh kami, katakan anda ingin mencari elemen menu utama induk berdasarkan elemen utama:

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

pemilih elemen ini akan mencari contoh pertama label anchor dengan ID sama dengan "menu", dan kemudian cari elemen induk dengan "/../". Hasilnya ialah anda akan mencari elemen menu utama.

Ringkasan: xpath

pros Kekurangan Boleh memilih elemen induk dalam IE Lengkung pembelajaran yang sangat universal sedikit curam Banyak sokongan dalam talian

disyorkan: id dan kelas

pemilih elemen ID dan kelas adalah dua pilihan yang berbeza dalam automasi dan melakukan fungsi yang berbeza dalam aplikasi. Walau bagaimanapun, untuk mempertimbangkan strategi pemilih elemen yang digunakan dalam automasi, mereka berbeza sangat sedikit, jadi kita tidak perlu mempertimbangkannya secara berasingan. Dalam aplikasi, sifat "ID" dan "kelas" elemen (jika ditakrifkan) membolehkan pemaju UI memanipulasi dan gaya aplikasi. Untuk automasi, kami menggunakannya untuk mencari elemen tertentu untuk berinteraksi dalam automasi.

Salah satu manfaat menggunakan pemilih elemen ID dan kelas ialah mereka paling tidak terjejas oleh perubahan dalam struktur aplikasi. Katakan anda ingin membuat pemilih XPath atau CSS yang bergantung kepada rantai beberapa elemen dan beberapa elemen kanak -kanak, apa yang berlaku apabila permintaan ciri memecahkan rantai dengan menambahkan elemen baru? Apabila menggunakan pemilih elemen ID dan kelas, anda boleh mencari unsur -unsur tertentu dan bukannya bergantung pada struktur halaman. Anda mengekalkan keteguhan automasi tanpa terlalu longgar mengenai perubahan. Perubahan harus dikesan oleh automasi dengan membuat kes ujian yang memberi tumpuan kepada lokasi elemen tertentu. Perubahan tidak boleh memecahkan keseluruhan suite automasi anda. Walau bagaimanapun, jika pemaju secara langsung mengubah ID atau kelas yang digunakan dalam automasi, ia akan menjejaskan ujian anda.

Jika permohonan di bawah ujian tidak melaksanakan ID dan kelas sebagai sebahagian daripada amalan terbaik pembangunan, dasar pemilih elemen ini tidak akan tersedia. Kaedah ini sukar digunakan jika tag HTML tidak mempunyai ID dan kelas yang boleh anda gunakan dalam automasi.

Contoh:

Dalam contoh kita, jika kita mahu memilih elemen menu atas, nampaknya ini:

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

Jika kita mahu memilih item menu pertama, nampaknya ini:

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Ringkasan: Id dan Kelas

pros Kekurangan Mudah untuk mengekalkan pemaju boleh mengubahnya, memecahkan automasi Mudah untuk dipelajari secara minimum oleh perubahan struktur halaman

terbaik: digabungkan dengan sifat tersuai pemilih CSS

Jika organisasi QA anda mempunyai hubungan kerjasama yang baik dengan pasukan pembangunan, kemungkinan besar anda akan dapat menggunakan pendekatan amalan terbaik ini dalam automasi. Menggunakan sifat tersuai dan pemilih CSS untuk mencari elemen mempunyai banyak manfaat untuk pasukan dan organisasi QA. Bagi pasukan QA, ini membolehkan jurutera automasi mencari unsur -unsur tertentu yang mereka perlukan tanpa membuat pemilih elemen kompleks. Walau bagaimanapun, ini memerlukan keupayaan untuk menambah sifat tersuai yang boleh digunakan oleh pasukan automasi dalam aplikasi. Untuk memanfaatkan pendekatan amalan terbaik ini, pembangunan dan pasukan QA anda harus bekerjasama untuk melaksanakan strategi ini.

Saya ingin mengambil sedikit masa untuk menunjukkan bahawa kaedah pemilih CSS tidak bergantung kepada sifat tersuai. Pemilih CSS boleh mencari sebarang tag dan sifat dalam dokumen HTML seperti XPath.

mari kita lihat apa kaedah ini mengandungi. Untuk melakukan yang terbaik, pasukan automasi anda harus memahami apa yang mereka mahu targetkan dalam automasi. Bekerja dengan pemaju (kemungkinan jurutera front-end), mereka akan membangunkan corak atribut tersuai yang akan dimasukkan ke dalam setiap sasaran yang perlu disambungkan oleh pasukan automasi. Untuk contoh ini, kami menambahkan atribut 'Tid' ke elemen sasaran.

Titik teknikal yang akan ditekankan di sini adalah batasan pemilih CSS. Mereka sengaja tidak membenarkan elemen ibu bapa dipilih seperti XPath. Ini dilakukan untuk mengelakkan gelung tak terhingga dalam gaya CSS di laman web. Walaupun ini adalah perkara yang baik untuk reka bentuk web, ia adalah batasan untuk menggunakannya sebagai strategi pemilih elemen automatik. Nasib baik, batasan ini dapat dielakkan dengan sifat tersuai yang dilaksanakan oleh pemaju. QA harus meminta atribut tersuai yang sesuai supaya tidak perlu memilih elemen induk.

Jika anda ingin memilih polisi ini tanpa menggunakan sifat tersuai, anda masih berada di landasan yang betul. Sebagai contoh, anda boleh mencari pautan di submenu kedai menggunakan kaedah berikut:

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

Strategi ini akan membolehkan jurutera automasi membuat automasi yang boleh dipercayai yang mudah dikekalkan dan tidak pecah disebabkan oleh perubahan yang tidak berkaitan dalam UI. Memilih strategi ini adalah cara terbaik untuk melakukannya. Bukan sahaja ia akan menjadi penyelesaian automasi yang mudah dikekalkan, ia juga akan menggalakkan kerjasama antara pasukan pembangunan dan pasukan QA.

Contoh:

Melaksanakan harta tersuai dalam contoh kami HTML akan menghasilkan hasil berikut:

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

Sila ambil perhatian sifat -sifat baru dalam beberapa elemen. Kami mencipta harta baru yang tidak bertentangan dengan mana -mana atribut HTML standard, yang dipanggil "TID". Dengan harta tersuai ini, kita boleh menggunakan pemilih CSS untuk mencarinya:

<code class="language-html"><div id="main-menu" name="menu"></div></code>

Katakan anda ingin memilih semua pautan dalam menu, sama ada item menu teratas atau submenu. Menggunakan pemilih CSS, anda boleh membuat pemilih elemen yang sangat umum:

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Tujuan "*=" adalah untuk melakukan carian wildcard untuk nilai "-link" dalam medan TID dari mana-mana elemen. Letakkannya selepas pengarang ID #utama, yang memfokuskan skop carian elemen dalam menu utama.

Jika anda ingin memilih polisi ini tanpa menggunakan sifat tersuai, anda masih berada di landasan yang betul. Sebagai contoh, anda boleh mencari pautan di submenu kedai menggunakan kaedah berikut:

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

Strategi ini akan membolehkan jurutera automasi membuat automasi yang boleh dipercayai yang mudah dikekalkan dan tidak terganggu oleh perubahan yang tidak berkaitan dalam UI. Memilih strategi ini adalah cara terbaik untuk melakukannya. Bukan sahaja ia akan menjadi penyelesaian automasi yang mudah dikekalkan, ia juga akan menggalakkan kerjasama antara pasukan pembangunan dan pasukan QA.

Ringkasan: Dalam kombinasi dengan sifat tersuai pemilih CSS

pros Kekurangan Mudah untuk mempelajari usaha awal untuk membina hubungan kerjasama dengan pasukan pembangunan Banyak sokongan dalam talian sejagat Prestasi yang sangat baik dalam semua pelayar

Kesimpulan

Terdapat beberapa pilihan yang baik untuk melaksanakan strategi pemilih elemen standard perusahaan dalam rangka kerja automasi. Pilihan seperti nama tag atau teks pautan harus dielakkan kecuali satu -satunya pilihan anda. Xpath, ID, dan pemilih kelas adalah cara yang baik. Setakat ini cara terbaik ialah melaksanakan sifat tersuai dan cari mereka menggunakan pemilih CSS. Ini juga menggalakkan kerjasama antara pasukan pembangunan dan pasukan QA.

Berikut adalah pilihan untuk perbandingan bersebelahan:

✓ - Ya / - Bahagian ✗ - Tidak

	标签名称、链接文本（等）	XPath	ID 和类	结合 CSS 选择器的自定义属性
易于使用	✓	✓	✓	✓
在线支持	✓	✓	✓	✓
通用性	✗	✓	✗	✓
性能	✓	✗	✓	✓
易于维护	✗	✓	✓	✓
鼓励协作	✗	✗	✓	✓

Soalan Lazim mengenai sifat tersuai pemilih CSS

Apakah CSS Selector Custom Properties?

CSS Selector Custom Atributes adalah ciri yang kuat dalam CSS yang membolehkan pemaju memilih dan gaya elemen berdasarkan nilai atribut mereka. Ini amat berguna apabila anda ingin menggunakan gaya tertentu kepada unsur -unsur yang berkongsi atribut awam tetapi tidak boleh berkongsi nama atau kelas tag yang sama. Sebagai contoh, anda boleh menggunakan pemilih atribut tersuai untuk gaya semua elemen dengan atribut data "aktif" tanpa mengira nama tag atau kelas mereka.

Bagaimana untuk menyesuaikan sifat menggunakan pemilih CSS?

Untuk menyesuaikan sifat dengan pemilih CSS, anda perlu menggunakan kurungan persegi

dalam pemilih CSS. Dalam kurungan, anda menentukan atribut dan nilai untuk dipilih. Sebagai contoh, untuk memilih semua elemen dengan atribut data "aktif", anda akan menggunakan pemilih []. Anda kemudian boleh menggunakan apa -apa gaya yang dikehendaki untuk unsur -unsur ini. [data-active]

Bolehkah anda menggunakan CSS Selector Custom Properties dengan mana -mana sifat?

Ya, anda boleh menggunakan CSS Selector Custom Properties dengan mana -mana sifat. Ini termasuk atribut HTML standard seperti "kelas" dan "id" serta sebarang atribut data tersuai yang mungkin anda tambahkan ke elemen tersebut.

Apakah pelbagai jenis pemilih harta CSS?

Terdapat beberapa jenis pemilih harta CSS. Jenis yang paling asas ialah pemilih padanan tepat, yang memilih elemen berdasarkan padanan tepat nilai atributnya. Terdapat juga pemilih untuk memadankan permulaan, berakhir, atau mana -mana bahagian nilai harta. Di samping itu, terdapat pemilih untuk unsur -unsur yang sepadan dengan atribut tertentu tanpa mengira nilai mereka.

Bolehkah anda menggunakan CSS Selector Custom Properties untuk semua penyemak imbas?

Semua pelayar moden (termasuk Chrome, Firefox, Safari, dan Edge) menyokong CSS Selector Custom Properties. Walau bagaimanapun, mereka mungkin tidak disokong oleh versi lama pelayar ini atau penyemak imbas lain yang kurang biasa. Adalah lebih baik untuk menguji CSS anda dalam pelbagai pelayar untuk keserasian.

Bagaimana menggunakan CSS Selector Custom Properties untuk meningkatkan prestasi tapak?

CSS Selector Custom Properties boleh membantu meningkatkan prestasi laman web dengan mengurangkan jumlah CSS yang anda perlukan untuk menulis. Dengan memilih elemen berdasarkan atribut mereka, anda boleh menggunakan gaya untuk pelbagai elemen sekaligus tanpa menulis CSS berasingan untuk setiap elemen. Ini boleh menjadikan CSS anda lebih cekap dan mudah dikekalkan.

Bolehkah anda menggunakan CSS Selector Custom Properties dalam kombinasi dengan pemilih lain?

Ya, anda boleh menggunakan CSS Selector Custom Properties dalam kombinasi dengan pemilih lain. Sebagai contoh, anda boleh menggunakan pemilih atribut tersuai dalam kombinasi dengan pemilih kelas untuk memilih hanya elemen dengan kelas tertentu dan atribut tertentu.

Apakah beberapa kes penggunaan biasa untuk sifat tersuai pemilih CSS?

CSS Selector Custom Atributs biasanya digunakan untuk elemen gaya berdasarkan keadaan atau fungsi mereka. Sebagai contoh, anda boleh menggunakan pemilih harta tersuai untuk gaya semua butang kurang upaya atau semua medan borang yang diperlukan. Mereka juga boleh digunakan untuk tetapan tema dengan menggunakan gaya yang berbeza mengikut atribut tema data.

Bagaimana sifat CSS Selector Custom dibandingkan dengan pemilih CSS yang lain?

CSS Selector Custom Properties menyediakan fleksibiliti yang lebih besar daripada banyak pemilih CSS yang lain. Walaupun pemilih lain adalah terhad untuk memilih elemen berdasarkan nama tag, kelas, atau ID mereka, pemilih atribut tersuai boleh memilih elemen berdasarkan atribut mana -mana. Ini menjadikan mereka alat yang berkuasa untuk menubuhkan laman web yang kompleks.

Adakah terdapat kelemahan menggunakan pemilih CSS untuk menyesuaikan sifat?

Satu kelemahan yang berpotensi untuk menyesuaikan sifat dengan pemilih CSS ialah mereka boleh menjadikan CSS anda lebih kompleks. Jika anda menggunakan sebilangan besar pemilih harta tersuai, mungkin sukar untuk memahami dan mengekalkan CSS anda. Walau bagaimanapun, ini dapat dikurangkan dengan perancangan dan organisasi yang teliti.

Atas ialah kandungan terperinci Naik taraf projek anda dengan pemilih CSS dan atribut tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!