Artikel
Mulai
Mulai belajar
JavaRush /Java Blog /Random-ID /Pemilih atribut
articles
Level 15

Pemilih atribut

Dipublikasikan di grup Random-ID
Untuk mengubah gaya elemen yang berisi berbagai parameter, pemilih atribut telah diperkenalkan ke dalam CSS. Mereka memungkinkan Anda mengatur gaya tag berdasarkan keberadaan parameter tertentu atau nilainya. Pemilih atribut - 1Catatan: Pemilih atribut didukung oleh Internet Explorer versi 7.0 dan yang lebih baru, dan <!DOCTYPE> yang benar harus ditambahkan agar contoh berfungsi dengan benar. Mari kita lihat beberapa kegunaan umum dari penyeleksi tersebut.

Pemilih atribut sederhana

Menetapkan gaya suatu elemen jika atribut tertentu ditentukan. Maknanya tidak penting dalam hal ini. Sintaks untuk menggunakan pemilih tersebut adalah sebagai berikut. 
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Spasi antara nama pemilih dan tanda kurung siku tidak diperbolehkan. Contoh 12.1 menunjukkan bagaimana tag <Q> diberi gaya ketika parameter title ditambahkan ke dalamnya. Contoh 12.1. Jenis elemen tergantung pada parameternya 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность
  может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:
  <q title="Из законов Фергюсона-Мержевича">После
  того, How веб-page будет корректно отображаться в одном браузере, выяснится,
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>
Hasil dari contoh ditunjukkan pada Gambar. 12.1 Pemilih atribut - 2 Dalam contoh ini, warna teks di dalam wadah 7lt;Q> berubah ketika parameter title ditambahkan ke dalamnya. Perhatikan bahwa untuk pemilih Q[title] tidak perlu mengulangi atribut karena atribut tersebut diwarisi dari pemilih Q.
Frontend-университет

Pemilih atribut dengan nilai

Menetapkan gaya elemen jika nilai tertentu ditentukan untuk parameter tertentu. Sintaks aplikasinya adalah sebagai berikut. 
[атрибут="meaning"] { Описание правил стиля } Селектор[атрибут="meaning"] { Описание правил стиля }
Dalam kasus pertama, gaya diterapkan ke semua elemen yang berisi nilai atribut tertentu. Dan yang kedua - hanya untuk penyeleksi tertentu. Contoh 12.2 menunjukkan cara mengubah gaya tautan jika tag A berisi parameter target="_blank". Dalam hal ini, tautan akan terbuka di jendela baru dan untuk menampilkannya, dengan menggunakan gaya kami menambahkan gambar kecil di depan teks tautan. Contoh 12.2. Gaya untuk membuka tautan di jendela baru 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[target="_blank"] {
    background: url(blank.gif) no-repeat 0 2px; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная link</a> |
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>
Hasil contohnya ditunjukkan di bawah ini (Gambar 12.2). Pemilih atribut - 3Dalam contoh ini, gambar ditambahkan ke link menggunakan atribut background. Fungsinya adalah untuk membuat gambar latar yang berulang, namun pengulangan latar belakang tersebut dapat dibatalkan melalui argumen no-repeat, sehingga menghasilkan satu gambar.

Atribut dimulai dengan nilai tertentu

Menetapkan gaya suatu elemen jika atribut dimulai dengan nilai yang ditentukan. Sintaks aplikasinya adalah sebagai berikut. 
[атрибут^="meaning"] { Описание правил стиля } Селектор[атрибут^="meaning"] { Описание правил стиля }
Dalam kasus pertama, gaya diterapkan ke semua elemen yang dimulai dengan nilai atribut yang ditentukan. Dan yang kedua - hanya untuk penyeleksi tertentu. Anggaplah situs Anda perlu memisahkan gaya tautan reguler dan tautan eksternal—tautan yang mengarah ke situs lain. Untuk menghindari penambahan Akelas baru ke tag, kita akan menggunakan penyeleksi atribut. Tautan eksternal ditandai dengan penambahan protokol ke alamat, misalnya protokol HTTP digunakan untuk mengakses dokumen hypertext. Oleh karena itu, tautan eksternal dimulai dengan kata kunci http://, dan kami menambahkannya ke pemilih A, seperti yang ditunjukkan pada contoh 12.3. Contoh 12.3. Mengubah gaya xref 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href^="http://"] {
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная link</a> |
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя link на сайт htmlbook.ru</a></p>
 </body>
</html>
Hasil dari contoh ditunjukkan di bawah ini (Gbr. 12.3) Pemilih atribut - 4 Dalam contoh ini, tautan eksternal ditandai dengan huruf tebal. Anda juga dapat menggunakan teknik yang ditunjukkan pada Contoh 12.2 dan menambahkan gambar kecil ke link, yang akan menunjukkan bahwa link tersebut mengarah ke situs lain.

Atribut diakhiri dengan nilai tertentu

Menetapkan gaya suatu elemen jika atribut diakhiri dengan nilai yang ditentukan. Sintaks aplikasinya adalah sebagai berikut. 
[атрибут$="meaning"] { Описание правил стиля } Селектор[атрибут$="meaning"] { Описание правил стиля }
Dalam kasus pertama, gaya diterapkan ke semua elemen yang diakhiri dengan nilai atribut yang ditentukan. Dan yang kedua - hanya untuk penyeleksi tertentu. Dengan cara ini, Anda dapat secara otomatis memisahkan gaya untuk situs domain ru dan situs domain lain seperti com, seperti yang ditunjukkan pada contoh 12.4. Contoh 12.4. Gaya untuk domain berbeda 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href$=".ru"] { /* Если link заканчивается на .ru */
    background: url(ru.gif) no-repeat; /* Параметры фонового рисунка */
    padding-left: 10px; /* Смещаем текст вправо */
   }
   A[href$=".com"] { /* Если link заканчивается на .com */
    background: url(com.gif) no-repeat;
    padding-left: 10px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com" rel="nofollow" >Yandex.Com</a> |
  <a href="http://www.yandex.ru" rel="nofollow" >Yandex.Ru</a></p>
 </body>
</html>
Contoh ini berisi dua tautan yang mengarah ke domain berbeda - comdan ru. Pada saat yang sama, setiap tautan tersebut memiliki gambar latar belakangnya sendiri yang ditambahkan menggunakan gaya. Atribut gaya akan ditambahkan hanya untuk tautan hrefyang parameternya diakhiri dengan “.ru” atau “.com”. Harap dicatat bahwa dengan menambahkan garis miring ( http://www.yandex.ru/ ) atau alamat halaman ( http://www.yandex.ru/fun.html ) ke nama domain, kami akan mengubah akhiran dan gaya tersebut tidak akan diterapkan. Dalam hal ini, lebih baik menggunakan pemilih di mana nilai tertentu dapat ditempatkan di mana saja dalam atribut.
Telegram

Nilai muncul dimana saja dalam atribut

Ada opsi ketika gaya harus diterapkan ke pemilih dengan atribut tertentu, yang mana nilainya adalah bagiannya. Namun, tidak diketahui secara pasti apakah argumen dimulai atau diakhiri dengan nilai tersebut. Maka sintaks berikut harus digunakan. 
[атрибут*="meaning"] { Описание правил стиля } Селектор[атрибут*="meaning"] { Описание правил стиля }
Nilai dapat muncul dimana saja dalam argumen, misalnya di awal, akhir, atau di antara keduanya. Hal utama adalah bahwa itu adalah bagian darinya. Jadi, Contoh 12.5 menunjukkan perubahan gaya tautan di mana kata “htmlbook” muncul. Contoh 12.5. Gaya untuk situs berbeda 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   [href*="htmlbook"] {
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/" rel="nofollow" >Tagи HTML</a> |
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> |
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>
Hasil dari contoh ini ditunjukkan pada Gambar. 12.4 Pemilih atribut - 5 Ada beberapa jenis penyeleksi argumen lainnya, namun jarang digunakan, jadi kami akan menghilangkan penjelasannya. Tautan ke sumber asli: http://stepbystep.htmlbook.ru/?id=54
Komentar
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION