Semak dua soalan wawancara CSS ini untuk menguji asas anda!

Jianweizhizhu, artikel ini akan berkongsi dengan anda dua soalan wawancara CSS yang menarik 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>

Gayanya adalah seperti berikut:

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

Saya ingin bertanya, adakah warna teks dalam tag

hijau atau biru? <p></p>

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? <p></p> Selain itu, apabila mod nyahpepijat dihidupkan, kami mencari elemen

dan hanya melihat bahawa <p></p> 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:

Oleh itu, jelas di sini bahawa teg

mewarisi peraturan ini daripada elemen induk <p></p> dan menggunakannya pada baris pertama elemen, mengatasi <div> <code>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: <p></p>DEMO berikut menunjukkan perbandingan keutamaan

gaya dan pelbagai pemilih apabila mereka bekerjasama, malah termasuk peraturan ::first-line: !important

Perenggan 1 ditetapkan kepada kelabu melalui pemilih teg
• Perenggan 2 ditetapkan kepada kelabu melalui pemilih kelas
• Perenggan 3 ditetapkan kepada kelabu melalui pemilih ID Kelabu
• perenggan 4 ditetapkan kepada kelabu

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>

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;
}

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

<p></p>

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;
}

. Walau bagaimanapun, keputusan sebenar pemilih CSS di atas dalam struktur HTML berikut adalah tidak betul.

:not(p)<p></p>Keputusannya adalah seperti berikut:

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

<p></p>

Demo CodePen -- :bukan demo pesudo

https:/ /codepen. io/Chokcoco/pen/KKZbWjy<p></p>

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 <p></p> masih

?

<p></p>Kenapa ni? Jawapan: color: blue

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

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

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

OK，这次 <p></p> 没有边框体现，没有问题！

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

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