Semak dua soalan wawancara CSS ini untuk menguji asas anda!-tutorial css-php.cn

Semak dua soalan wawancara CSS ini untuk menguji asas anda!

青灯夜游

Lepaskan： 2022-09-28 19:53:55

ke hadapan

2004 orang telah melayarinya

Jianweizhizhu, artikel ini akan berkongsi dengan anda dua soalan wawancara CSS yang menarik untuk menguji asas anda!

Semak dua soalan wawancara CSS ini untuk menguji asas anda!

Saya melihat soalan yang begitu menarik di forum hari ini Kod mudahnya adalah seperti berikut:

<div>
    <p id="a">First Paragraph</p>
</div>

Salin selepas log masuk

Gayanya adalah seperti berikut: <🎜. >

p#a {
    color: green;
}
div::first-line {
    color: blue;
}

Salin selepas log masuk

Saya ingin bertanya, adakah warna teks dalam tag hijau atau biru? 

Menariknya, keputusan akhir di sini adalah biru, yang bermaksud telah berkuat kuasa. [Pembelajaran yang disyorkan: color: bluetutorial video css]

Tidak, biasanya, bukankah pemilih ID sepatutnya mempunyai keutamaan yang lebih tinggi daripada pemilih kelas pseudo? ? Mengapakah pemilih kelas pseudo mempunyai keutamaan yang lebih tinggi di sini?

Selain itu, apabila mod nyahpepijat dihidupkan, kami mencari elemen dan hanya melihat bahawa  sedang berkuat kuasa, tetapi takrif gaya color: green tidak ditemui: div::first-line

Hanya apabila kita naik satu tahap dan mencari peraturan gaya kita boleh melihat peraturan sedemikian di bahagian bawah: <div>

Oleh itu, jelas di sini bahawa teg mewarisi peraturan ini daripada elemen induk  dan menggunakannya pada baris pertama elemen, mengatasi <div>color: green yang ditakrifkan dalam asal pemilih ID.

Sahkan lagi

Di sini, satu lagi perkara yang mengelirukan ialah mengapa pemilih ID mempunyai keutamaan yang lebih rendah daripada pemilih . ::first-line

Mari kita buat beberapa percubaan mudah:

DEMO berikut menunjukkan perbandingan keutamaan gaya dan pelbagai pemilih apabila mereka bekerjasama, malah termasuk peraturan ::first-line: !important

melalui !important bash secara ringkasnya, kami juga menggunakan pemilih untuk setiap perenggan. ::first-line

<h2>::first-line vs. tag selector</h2>
<p>This paragraph ...</p>  

<h2>::first-line vs class selector</h2>
<p class="p2">This paragraph color i...</p>  

<h2>::first-line vs ID selector</h2>
<p id="p3">This paragraph color is set ...</p>  

<h2>::first-line vs !important</h2>
<p id="p4">This paragraph color is ....</p>

Salin selepas log masuk

p {
  color: #444;
}
p::first-line {
  color: deepskyblue;
}

.p2 {
  color: #444;
}
.p2::first-line {
  color: tomato;
}

#p3 {
  color: #444;
}
#p3::first-line {
  color: firebrick;
}

#p4 {
  color: #444 !important;
}
#p4::first-line {
  color: hotpink;
}

Salin selepas log masuk

Demo CodePen -- ::first-line: demo
https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39dLihat kesannya:

Anda boleh lihat tidak kira apa pemilihnya, keutamaannya tidak setinggi

. Sebab untuk ::first-line ialah

sebenarnya ialah unsur pseudo dan bukannya kelas pseudo Kandungan yang dipilih olehnya sebenarnya akan diproses sebagai elemen anak unsur, serupa dengan . ::first-line adalah sama, peraturan warna unsur induk hanyalah perhubungan bertingkat untuknya. ::before::after::first-lineInilah sebabnya, dalam dokumen MDN, kaedah penulisan kolon berganda lebih disyorkan (sudah tentu pelayar menyokong kaedah penulisan kolon tunggal) -- MDN -- ::baris pertama

Satu lagi soalan, contoh ralat MDN? Fenomena menarik

Selepas bercakap tentang soalan di atas. Mari kita lihat soalan lain, soalan yang hampir sama.

Pada halaman MDN yang memperkenalkan , terdapat contoh:

:notIni bermakna

boleh memilih mana-mana elemen yang bukan teg

/* Selects any element that is NOT a paragraph */
:not(p) {
  color: blue;
}

Salin selepas log masuk

. Walau bagaimanapun, keputusan sebenar pemilih CSS di atas dalam struktur HTML berikut adalah tidak betul. :not(p)Keputusannya adalah seperti berikut:

<p>p</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>

Salin selepas log masuk

Demo CodePen -- :bukan demo pesudo

https:/ /codepen. io/Chokcoco/pen/KKZbWjy
 bermakna
masih boleh memilih elemen

. Ya, hasilnya adalah sama merentas berbilang penyemak imbas. :not(p)Melihat ini, anda boleh berhenti dan berfikir tentangnya, mengapa warna elemen  masih

? Kenapa ni? Jawapan: color: blue这是由于 :not(p) 同样能够选中 <body>，那么 <body> 的 color 即变成了 blue，由于 color 是一个可继承属性， 标签继承了 <body> 的 color 属性，导致看到的  也是蓝色。

我们把它改成一个不可继承的属性，试试看：

/* Selects any element that is NOT a paragraph */
:not(p) {
  border: 1px solid;
}

Salin selepas log masuk

OK，这次  没有边框体现，没有问题！

因此，实际使用的时候，需要一定要注意样式继承的问题！

（学习视频分享：css视频教程、web前端）

Atas ialah kandungan terperinci Semak dua soalan wawancara CSS ini untuk menguji asas anda!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!