1、關於css偽類/偽元素
兩個冒號和乙個冒號表示分別代表什麼?
css3 為了區分兩者,已經明確規定了偽類用乙個冒號來表示,而偽元素則用兩個冒號來表示
偽類和偽元素之間的區別?
建立了乙個虛假的元素,並插入到目標元素內容之前或之後,
偽元素如果沒有設定「content」屬性,偽元素是無用的,但可以設定「content」
的屬性值為空。
用偽類:first-child
將第乙個p設成紅色:
html>p:first-child
給第乙個字設成紅色:第乙個段落p> //我將變成紅色
第二個段落p>
div>等價於手動給dom元素新增類:
.first-child
class="first-child">第乙個段落p>
第二個段落p>
div>用偽元素::first-letter
p::first-letter
第乙個段落p>
第二個段落p>
div>
.first-letter
class="first-letter">第span>乙個段落p>
第二個段落p>
div>
偽元素:before和:after
::before和::after下特有的content,用於在css渲染中向元素邏輯上的頭部或尾部新增內容,並且插入的內容在頁面的原始碼裡是不可見的,只能在css內可見,盡量使用它們顯示修飾性內容,例如圖示。
例1:
<
htmllang="en">
<
head>
<
metacharset="utf-8">
<
title>偽類/偽元素
title>
<
styletype="text/css">
.phonenumber::before
style>
head>
<
body>
<
pclass="phonenumber">12345645654
p>
body>
html>執行結果:
例2:
a[href]:after執行結果:
2、都有哪些居中方法?
參考鏈結
3、多個類名間使用「 空格」、「,」、「>」隔開寫或者連起來寫分別代表什麼含義?
使用空格例如
.content.content_2代表後代選擇器,針對上例中只有作為「.content」的後代的「.content2」字型顏色將是藍色;
使用「,」如:
.phonenumber,.one,.scrollcon代表並列,即只要寫出來的類名,都將具有上面的css樣式;
使用「>」,如:
.content>.one代表子選擇器,「.one」必須是「.content」的子元素;
4、清除浮動時overflow:hidden和clear:both的***?
參考鏈結
5、css優先順序和權值?
總結排序:!important > 行內樣式》id選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性
第二等:代表id選擇器,如:#content,權值為100。
第三等:代表偽類和屬性選擇器,如.content,權值為10。
第四等:代表型別選擇器和偽元素選擇器,如div p,權值為1。
哪些元素可以使用偽類/偽元素?
小問題彙總 css篇 持續更新
1 input type password 如何去掉預設值?解決 設定input type text nf cus this.type password 2 css實現單行 多行文字溢位顯示省略號 單行方法 overflow hidden text overflow ellipsis white s...
CSS總結及常見問題彙總
最近在學習html和css的一些基本應用,遇到過很多問題,剛開始會發現css像是不可控一樣,這次達到了預期效果,可能下一次就偏了十萬八千里,或者是 牽一髮而動全身 其實對於計算機而言,沒有什麼是不確定的,如果有,那一定是學藝不精。以下是自己在學習過程中對css的一些總結。css,cascading ...
css疑難彙總
關於a標籤不換行頂開容器的問題 自 我們用div,p,ul,li 等塊級元素 布局給其設定了特定的width,那麼就會自動的換行。用span,a 等內聯元素 設定了display inline block,或者display block 也可以自動換行了。但是含英文的時候這種方法就無效了,還是會超出...