Semak dua soalan wawancara CSS ini untuk menguji asas anda!

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

<p>

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

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

<p>Gayanya adalah seperti berikut: <🎜. >

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

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

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

<p>

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>

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

<p>

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

<p>

Oleh itu, jelas di sini bahawa teg <p> mewarisi peraturan ini daripada elemen induk <p> 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 <p>. ::first-line

Mari kita buat beberapa percubaan mudah: <p>

DEMO berikut menunjukkan perbandingan keutamaan <p> 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 <p> 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>

https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39dLihat kesannya:

<p>

<p>Anda boleh lihat tidak kira apa pemilihnya, keutamaannya tidak setinggi

. Sebab untuk <p>::first-line ialah

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

<p>

<p>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 <p>, terdapat contoh:

<p>: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. <p>:not(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. <p>:not(p)Melihat ini, anda boleh berhenti dan berfikir tentangnya, mengapa warna elemen <p> masih

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

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

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

<p>

<p>OK，这次 <p>

没有边框体现，没有问题！

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

<p>（学习视频分享：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!