Pemilih atribut yang sepadan dengan regex

3

Mereka tidak wujud, tetapi tidakkah itu begitu sejuk? Saya tidak tahu betapa sukarnya untuk melaksanakan regex, atau bagaimana mahal untuk menghuraikan, tetapi bukan hanya bom?

Katakan saya mempunyai sekumpulan elemen, semuanya dengan nama kelas yang sama, yang mempunyai gaya bersama tetapi juga memerlukan peraturan individu, contohnya:

Saya boleh melakukan penggantian imej pada senarai senarai itu untuk membuat bar navigasi grafik, dengan peraturan seperti ini:

tidak terlalu buruk, tetapi sebagai struktur tumbuh saiz, jadi CSS

tumbuh juga. Sekiranya strukturnya menjadi sangat besar sehingga CSS

• Home
• Products
• About

akan menjadi sama -sama verbose; Belum lagi hakikat bahawa saya perlu mengeditnya secara manual setiap kali item baru ditambah.

Tetapi bagaimana jika saya hanya dapat melakukan ini:

#menu li
{
	background:none #fff no-repeat;
}

#menu li#menu-home
{
	background-image:url("home.png");
}

#menu li#menu-products
{
	background-image:url("products.png");
}

#menu li#menu-about
{
	background-image:url("about.png");
}

Sekarang gaya menu saya tidak dapat dilanjutkan - saya boleh menambah bilangan item baru, tanpa perlu menyentuh CSS !

hanya pemikiran ...

#menu li[id%="/^menu-([a-z]+)$/"]
{
	background-image:url(".png");
}

soalan yang sering ditanya mengenai pemilih atribut yang sepadan dengan regex

Apakah pemilih atribut yang sepadan dengan regex dalam CSS?

Pemilih atribut pemadanan Regex adalah alat yang berkuasa dalam CSS yang membolehkan anda memilih elemen berdasarkan nilai atribut mereka. Ia menggunakan ungkapan biasa, urutan aksara yang membentuk corak carian, untuk memadankan nilai atribut. Ciri ini amat berguna apabila anda ingin gaya elemen dengan atribut yang sama dengan cara tertentu. Sebagai contoh, anda boleh memilih semua elemen input dengan atribut jenis yang bermula dengan 'teks' dan menggunakan gaya tertentu kepada mereka. Nama atribut diikuti oleh pengendali perlawanan, yang boleh '=', '~ =', '| =', '^=', '$ =' atau '*=', dan kemudian nilai atribut dalam petikan. Sebagai contoh, input [type^= "text"] akan memilih semua elemen input dengan atribut jenis yang bermula dengan 'Text'. Ini termasuk kedua -dua atribut standard seperti 'kelas', 'id', 'jenis', 'href', dan lain -lain, dan atribut adat. Walau bagaimanapun, perlu diingat bahawa tidak semua atribut disokong dalam semua penyemak imbas, jadi ia sentiasa merupakan idea yang baik untuk memeriksa keserasian pelayar sebelum menggunakan atribut tertentu.

Apakah pengendali perlawanan yang berbeza dalam pemilih atribut yang sepadan dengan Regex? Operator '=' sepadan dengan tepat, operator '~ =' sepadan dengan mana-mana nilai yang dipisahkan ruang, operator '| =' sepadan dengan mana-mana nilai yang dipisahkan dash atau nilai yang tepat, operator '^=' sepadan JavaScript?

Ya, anda boleh menggunakan pemilih atribut pemadanan regex dalam JavaScript menggunakan kaedah QuerySelector dan QuerySelectorAll. Kaedah ini mengembalikan elemen pertama atau semua elemen, masing -masing, yang sepadan dengan pemilih CSS yang ditentukan. Sebagai contoh, document.queryselector ('input [type^= "text"]) akan mengembalikan elemen input pertama dengan atribut jenis yang bermula dengan' teks '. Walau bagaimanapun, anda boleh menjadikan mereka tidak sensitif dengan menambah 'I' selepas nilai atribut. Sebagai contoh, input [jenis^= "teks" i] akan memilih semua elemen input dengan atribut jenis yang bermula dengan 'teks', tanpa mengira kes. Sebagai contoh, input [type^= "text"], input [type^= "kata laluan"] akan memilih semua elemen input dengan atribut jenis yang bermula dengan 'teks' atau 'kata laluan'. Sebagai contoh, input [jenis^= "teks"] aktif akan memilih semua elemen input aktif dengan atribut jenis yang bermula dengan 'teks'. Ia tidak akan menyebabkan sebarang kesilapan atau memecahkan seluruh CSS anda. Oleh itu, adalah idea yang baik untuk menggunakannya dengan bijak dan sentiasa menguji CSS anda untuk prestasi.

Atas ialah kandungan terperinci Pemilih atribut yang sepadan dengan regex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!