6 22 css問題彙總

2021-08-20 21:35:13 字數 2563 閱讀 4965

1、關於css偽類/偽元素

兩個冒號和乙個冒號表示分別代表什麼?

css3 為了區分兩者,已經明確規定了偽類用乙個冒號來表示,而偽元素則用兩個冒號來表示

偽類和偽元素之間的區別?

建立了乙個虛假的元素,並插入到目標元素內容之前或之後,

偽元素如果沒有設定「content」屬性,偽元素是無用的,但可以設定「content」

的屬性值為空。

用偽類:first-child將第乙個p設成紅色:

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:

html>

<

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 也可以自動換行了。但是含英文的時候這種方法就無效了,還是會超出...