Atoz CSS Screencast: Elemen Pseudo CSS

mata teras

CSS Pseudo-elemen adalah unsur-unsur pada halaman yang tidak hadir dalam kod HTML, dan mereka boleh dikendalikan menggunakan sebarang gaya CSS yang digunakan untuk unsur-unsur lain.
• Pseudo-elemen
dan
• dalam :before CSS boleh digunakan untuk menjana kandungan halaman, termasuk teks, imej, nilai atribut, dan kaunter. Mereka juga boleh digunakan untuk membuat bentuk kompleks dengan penandaan minimum. :after
pelbagai elemen pseudo dalam CSS termasuk
• , :first-line, :first-letter, :selection, :before dan :after. Ini boleh digunakan untuk gaya bahagian tertentu elemen, memasukkan kandungan sebelum dan selepas kandungan elemen, dan gaya huruf pertama atau baris pertama elemen peringkat blok, dll.

Penjelasan video (memuatkan pemain ...) Video ini adalah sebahagian daripada siri Atoz CSS. Anda boleh mencari kandungan lain dalam siri ini di sini.

Rekod teks

Pseudo-elemen CSS adalah elemen pada halaman yang tidak muncul dalam kod HTML.

Mereka boleh dikendalikan dengan mana -mana gaya CSS yang digunakan untuk unsur lain.

Dua elemen pseudo-:before dan :after -buat digunakan untuk menghasilkan kandungan halaman dari CSS dan mempunyai banyak kes penggunaan yang berpotensi.

Dalam bahagian ini, kita akan belajar:

• Lima Pseudo-Elements berbeza
• menghasilkan teks, nilai atribut imej dan kaunter dari CSS
• bagaimana untuk membuat bentuk kompleks dengan markup minimum

pseudo-element

Terdapat lima elemen pseudo dalam CSS:

• :first-line
• :first-letter
• :selection
• :before
Ini dibezakan dari kelas pseudo oleh kolon berganda, tetapi untuk kesederhanaan, mereka biasanya ditulis menggunakan kolon tunggal dalam CSS.
• :after Berikut adalah rujukan panjang kepada blok teks letak. Saya boleh menukar warna baris pertama teks menggunakan
, yang terpakai walaupun selepas teks diperbaharui. Saya boleh membuat kesan topi awal dengan menetapkan gaya

dengan saiz fon terapung dan lebih besar. Saya juga boleh menukar warna teks yang dipilih menggunakan

.

Saya boleh menggunakan unsur-unsur pseudo :first-line dan :first-letter untuk menambah petikan besar sebelum dan selepas rujukan blok. Teks dihasilkan dari atribut :selection, dan kemudian anda boleh menggunakan gaya CSS untuk mendapatkan kesan yang dikehendaki.

:before :after Buat Kandungan content

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Menggunakan

dan pseudo-elements membolehkan kami menambah pelbagai kandungan ke halaman.

Kami telah melihat cara menambah kandungan teks ke halaman, tetapi kami juga boleh menambah imej, nilai atribut, kaunter, atau rentetan kosong, hanya mengakses dua elemen tambahan ini.

Menambah imej adalah serupa dengan menambahkan imej latar belakang menggunakan url(). Di sini, gunakan url() sebagai nilai atribut content. Saya sebenarnya lebih suka menggunakan imej latar belakang dan mengakses elemen pseudo dengan membuat rentetan kosong untuk content. Ini memberikan lebih banyak kawalan ke atas imej, seperti semua sifat yang biasa digunakan seperti background-position, background-repeat dan background-size tersedia.

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

anda juga boleh menggunakan atribut content untuk menyuntik nilai atribut HTML ke dalam halaman. Apabila membuat lembaran gaya cetak, saya suka menambah coretan kod berikut untuk mengeluarkan url pautan supaya mereka dapat dibaca dari halaman:

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

Ini akan menambah pautan selepas teks pautan untuk sebarang pautan yang bukan pautan dalaman atau pautan hash.

Kes khas yang terakhir untuk menghasilkan kandungan adalah nilai pembolehubah kaunter penyisipan. Saya telah mendapati ini sangat berguna dalam menyenaraikan senarai kompleks terma dan syarat undang -undang.

Berikut adalah satu siri tajuk, dan di bawah adalah satu siri senarai bersarang. Saya mahu setiap tajuk bab mempunyai nombor dan setiap item senarai adalah nombor kanak -kanak untuk setiap bab.

Untuk setiap h2, saya akan menambah kaunter "bahagian"; untuk setiap item senarai, saya akan meningkatkan kaunter "item". Sebelum setiap tajuk bab, saya akan mengeluarkan nilai kaunter bab; Rentetan tambahan boleh ditambah di antara kaunter untuk mewujudkan sistem penomboran yang kompleks. Bentuk mudah kaedah ini boleh digunakan untuk mengawal gaya nombor atau peluru dalam senarai.

a[href]:not([href*="#"]):after {
  content: attr(href);
}

Bentuk

Oleh kerana setiap elemen di halaman boleh mempunyai dua elemen "tambahan" dan boleh digayakan mengikut keutamaan kami, pelbagai bentuk kompleks dapat diwujudkan.

Semasa memikirkan contoh demo, saya melihat rujukan kepada bentuk pada trik CSS; Mari buat simbol Yin dan Yang dengan satu elemen.

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

Bermula dengan kotak, anda boleh menggunakan border-radius untuk mengubahnya menjadi bulatan. Dua separuh bulatan berwarna boleh dibuat menggunakan border-bottom yang sama dengan ketinggian bulatan. Dua mata dicipta dengan mencipta dua kalangan dengan unsur-unsur pseudo dan meletakkannya dengan position:absolute. Menggunakan sempadan yang sepadan dengan warna separuh bulatan, anda boleh membuat dua titik akhir bulat simbol. Sekiranya anda bertanya kepada saya, itu sejuk.

Saya suka menggunakan unsur-unsur pseudo;

soalan yang sering ditanya mengenai pseudo-elemen CSS

Apakah pelbagai jenis pseudo-elemen CSS?

CSS pseudo-element digunakan untuk gaya bahagian tertentu elemen. Terdapat beberapa jenis pseudo-elemen, termasuk ::before, ::after, ::first-letter, ::first-line, ::selection, ::backdrop, ::placeholder, dan ::before. Setiap elemen pseudo disasarkan pada bahagian yang berbeza dari elemen tersebut. Sebagai contoh, ::after dan ::first-letter digunakan untuk memasukkan kandungan sebelum dan selepas kandungan elemen, manakala ::first-line dan

digunakan untuk gaya huruf pertama atau baris pertama elemen peringkat blok.

::before bagaimana menggunakan ::after dan

pseudo-elements?

::before ::after dan content pseudo-elements digunakan untuk memasukkan kandungan sebelum dan selepas kandungan elemen. Mereka sering digunakan untuk tujuan hiasan, seperti menambah ikon atau petikan. Untuk menggunakan unsur-unsur pseudo ini, anda perlu menentukan atribut

. Sebagai contoh, untuk menambah ikon jantung sebelum perenggan, anda boleh menggunakan kod berikut:

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Bolehkah saya menggunakan unsur-unsur pseudo untuk gaya input bentuk?

::placeholder Ya, anda boleh gaya input bentuk menggunakan unsur-unsur pseudo. Walau bagaimanapun, tidak semua bentuk input boleh digayakan menggunakan unsur-unsur pseudo. Sebagai contoh, pseudo-elemen

boleh digunakan untuk gaya teks pemegang tempat untuk medan input. Berikut adalah contoh:

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

Bagaimana gaya huruf pertama perenggan menggunakan pseudo-elemen?

::first-letter anda boleh menggunakan pseudo-elemen

untuk gaya huruf pertama unsur peringkat blok. Ini biasanya digunakan untuk membuat inisial. Berikut adalah contoh:

a[href]:not([href*="#"]):after {
  content: attr(href);
}

Bolehkah saya menggunakan pelbagai elemen pseudo pada elemen yang sama?

::before Ya, anda boleh menggunakan pelbagai elemen pseudo pada elemen yang sama. Sebagai contoh, anda boleh menggunakan ::after dan ::before pada elemen yang sama untuk memasukkan kandungan sebelum dan selepas kandungannya. Walau bagaimanapun, adalah penting untuk diingat bahawa perintah pseudo-unsur adalah. ::after pseudo-element akan sentiasa dimasukkan sebelum

pseudo-element.

Adakah semua pelayar menyokong elemen pseudo?

Pelayar yang paling moden menyokong unsur-unsur pseudo. Walau bagaimanapun, versi lama beberapa pelayar mungkin tidak menyokong semua unsur-unsur pseudo. Sebelum menggunakan elemen pseudo, lebih baik untuk memeriksa keserasian penyemak imbas.

Apakah perbezaan antara elemen pseudo dan kelas pseudo?

Kedua-dua elemen pseudo dan kelas pseudo digunakan untuk menggunakan gaya kepada unsur-unsur berdasarkan keadaan tertentu. Walau bagaimanapun, ia digunakan untuk tujuan yang berbeza. Kelas pseudo digunakan untuk menetapkan gayanya apabila elemen berada dalam keadaan tertentu, seperti ketika tetikus melayang di atasnya atau mendapat fokus. Sebaliknya, unsur-unsur pseudo digunakan untuk gaya bahagian tertentu elemen.

Bolehkah saya menggunakan elemen pseudo dengan JavaScript?

Pseudo-unsur bukan sebahagian daripada DOM, jadi mereka tidak boleh diakses atau dimanipulasi secara langsung menggunakan JavaScript. Walau bagaimanapun, anda boleh menukar gaya yang digunakan untuk elemen pseudo dengan menukar gaya elemen induk menggunakan JavaScript.

bagaimana menggunakan ::selection pseudo-element?

::selection pseudo-element digunakan untuk mengubah penampilan teks yang dipilih pengguna. Sebagai contoh, anda boleh menukar warna latar belakang dan warna teks teks yang dipilih. Berikut adalah contoh:

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Bolehkah saya menghidupkan unsur-unsur pseudo?

Ya, anda boleh menghidupkan unsur-unsur pseudo menggunakan animasi CSS atau peralihan. Walau bagaimanapun, ingat bahawa tidak semua sifat boleh bernyawa. Sebagai contoh, anda boleh menghidupkan kelegapan atau transformasi elemen pseudo, tetapi anda tidak boleh menghidupkan atribut content.

Atas ialah kandungan terperinci Atoz CSS Screencast: Elemen Pseudo CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!