Artikel
Mulakan
Mula belajar
JavaRush /Blog Java /Random-MS /Pemilih atribut
articles
Tahap

Pemilih atribut

Diterbitkan dalam kumpulan
Untuk menukar gaya elemen yang mengandungi pelbagai parameter, pemilih atribut telah diperkenalkan ke dalam CSS. Mereka membenarkan anda menetapkan gaya teg berdasarkan kehadiran parameter tertentu atau nilainya. Pemilih atribut - 1Nota: Pemilih atribut disokong oleh Internet Explorer versi 7.0 dan lebih baru, dan <!DOCTYPE> yang betul mesti ditambah agar contoh berfungsi dengan betul. Mari kita lihat beberapa kegunaan tipikal pemilih tersebut.

Pemilih atribut mudah

Menetapkan gaya untuk elemen jika atribut tertentu ditentukan. Maksudnya tidak penting dalam kes ini. Sintaks untuk menggunakan pemilih sedemikian adalah seperti berikut. 
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Ruang antara nama pemilih dan kurungan segi empat sama tidak dibenarkan. Contoh 12.1 menunjukkan cara teg <Q> digayakan apabila parameter tajuk ditambahkan padanya. Contoh 12.1. Jenis elemen bergantung 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>
Keputusan contoh ditunjukkan dalam Rajah. 12.1 Pemilih atribut - 2 Dalam contoh ini, warna teks di dalam bekas 7lt;Q> berubah apabila parameter tajuk ditambahkan padanya. Ambil perhatian bahawa untuk pemilih Q[title] tidak perlu mengulang atribut kerana ia diwarisi daripada pemilih Q.
Java-университет

Pemilih atribut dengan nilai

Menetapkan gaya untuk elemen jika nilai tertentu ditentukan untuk parameter tertentu. Sintaks aplikasi adalah seperti berikut. 
[атрибут="meaning"] { Описание правил стиля } Селектор[атрибут="meaning"] { Описание правил стиля }
Dalam kes pertama, gaya digunakan pada semua elemen yang mengandungi nilai atribut yang ditentukan. Dan dalam kedua - hanya kepada pemilih tertentu. Contoh 12.2 menunjukkan cara menukar gaya pautan jika teg A mengandungi parameter target="_blank". Dalam kes ini, pautan akan dibuka dalam tetingkap baharu dan untuk menunjukkan ini, menggunakan gaya kami menambah gambar kecil di hadapan teks pautan. Contoh 12.2. Gaya untuk membuka pautan dalam tetingkap baharu 
<!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>
Keputusan contoh ditunjukkan di bawah (Rajah 12.2). Pemilih atribut - 3Dalam contoh ini, gambar ditambahkan pada pautan menggunakan atribut background. Fungsinya adalah untuk mencipta imej latar belakang yang berulang, tetapi pengulangan latar belakang boleh dibatalkan melalui hujah no-repeat, menghasilkan satu imej.

Atribut bermula dengan nilai tertentu

Menetapkan gaya untuk elemen jika atribut bermula dengan nilai yang ditentukan. Sintaks aplikasi adalah seperti berikut. 
[атрибут^="meaning"] { Описание правил стиля } Селектор[атрибут^="meaning"] { Описание правил стиля }
Dalam kes pertama, gaya digunakan pada semua elemen yang bermula dengan nilai atribut yang ditentukan. Dan dalam kedua - hanya kepada pemilih tertentu. Mari kita anggap bahawa tapak anda perlu memisahkan gaya pautan biasa dan luaran—pautan yang membawa ke tapak lain. Untuk mengelakkan penambahan Akelas baharu pada teg, kami akan menggunakan pemilih atribut. Pautan luaran dicirikan dengan menambahkan protokol ke alamat, contohnya, protokol HTTP digunakan untuk mengakses dokumen hiperteks. Oleh itu, pautan luaran bermula dengan kata kunci http://, dan kami menambahkannya pada pemilih A, seperti yang ditunjukkan dalam contoh 12.3. Contoh 12.3. Menukar 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 daripada contoh ditunjukkan di bawah (Gamb. 12.3) Pemilih atribut - 4 Dalam contoh ini, pautan luar diserlahkan dalam huruf tebal. Anda juga boleh menggunakan teknik yang ditunjukkan dalam Contoh 12.2 dan menambah imej kecil pada pautan, yang akan menunjukkan bahawa pautan itu menuju ke tapak lain.

Atribut berakhir dengan nilai tertentu

Menetapkan gaya untuk elemen jika atribut berakhir dengan nilai yang ditentukan. Sintaks aplikasi adalah seperti berikut. 
[атрибут$="meaning"] { Описание правил стиля } Селектор[атрибут$="meaning"] { Описание правил стиля }
Dalam kes pertama, gaya digunakan pada semua elemen yang berakhir dengan nilai atribut yang ditentukan. Dan dalam kedua - hanya kepada pemilih tertentu. Dengan cara ini, anda boleh memisahkan gaya secara automatik untuk tapak domain ru dan untuk tapak domain lain seperti com, seperti yang ditunjukkan dalam contoh 12.4. Contoh 12.4. Gaya untuk domain yang berbeza 
<!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 mengandungi dua pautan yang membawa kepada domain yang berbeza - comdan ru. Pada masa yang sama, setiap pautan tersebut mempunyai imej latar belakang sendiri yang ditambah menggunakan gaya. Atribut gaya akan ditambahkan hanya untuk pautan hrefyang parameternya berakhir dengan ".ru" atau ".com". Sila ambil perhatian bahawa dengan menambahkan garis miring ( http://www.yandex.ru/ ) atau alamat halaman ( http://www.yandex.ru/fun.html ) pada nama domain, kami akan menukar pengakhiran dan gaya tidak akan digunakan. Dalam kes ini, lebih baik menggunakan pemilih di mana nilai tertentu boleh ditempatkan di mana-mana dalam atribut.

Nilai berlaku di mana-mana dalam atribut

Terdapat pilihan apabila gaya harus digunakan pada pemilih dengan atribut khusus, yang mana nilai adalah sebahagiannya. Walau bagaimanapun, ia tidak diketahui dengan tepat sama ada hujah bermula atau berakhir dengan nilai ini. Kemudian sintaks berikut harus digunakan. 
[атрибут*="meaning"] { Описание правил стиля } Селектор[атрибут*="meaning"] { Описание правил стиля }
Nilai boleh muncul di mana-mana dalam hujah, seperti pada permulaan, penghujung atau di suatu tempat di antaranya. Perkara utama ialah ia adalah sebahagian daripadanya. Oleh itu, Contoh 12.5 menunjukkan perubahan dalam gaya pautan di mana perkataan "htmlbook" muncul. Contoh 12.5. Gaya untuk tapak yang berbeza 
<!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 daripada contoh ini ditunjukkan dalam Rajah. 12.4 Pemilih atribut - 5 Terdapat beberapa jenis pemilih hujah lain, tetapi ia digunakan agak jarang, jadi kami akan meninggalkan penerangannya. Pautan ke sumber asal: http://stepbystep.htmlbook.ru/?id=54
Komen
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION