前端面試題HTML CSS基礎篇 css選擇器

2021-10-08 22:26:34 字數 988 閱讀 9089

1. 什麼是css選擇器

css選擇器用於選擇你想要的元素的樣式的模式。選擇器不僅可以選擇所有元素,也可以選擇另乙個元素內的所有元素。

2. css選擇器都有哪些

#div

類選擇器根據類名來選擇,前面以「.」來標誌。

.div

標籤選擇器根據標籤選擇。

div

會選擇所有文件內所有div。

有時候還會需要用文件以外的其他條件來應用元素的樣式,比如滑鼠懸停等。這時候我們就需要用到偽類選擇器了。

div:hover

所有偽元素選擇器都必須放在出現該偽元素的選擇器的最後面,也就是說偽元素選擇器不能跟任何派生選擇器。

.div:first-child

偽類和偽元素的區別:偽元素是表示真實存在的元素,而偽類不是真實存在的元素,比如after偽類,before偽類,active偽類,hover偽類等,偽元素有first-child,last-child,nth-child,nth-of-type,only-child等

應用於所有文件

*

3. css選擇器的優先順序和權重

同一元素引用了多個樣式的時候,排在後面的樣式屬性優先順序高

帶有!import標記的樣式屬性的優先順序最高

樣式表**不同時,優先順序順序為:內聯》內部》外部》瀏覽器使用者自定義樣式》瀏覽器預設樣式

權重:內聯:1000

id選擇器:100

類選擇器/屬性選擇器/偽類選擇器:10

標籤選擇器/偽元素選擇器:1

萬用字元選擇器(*):0

前端面試題HTML CSS基礎篇 清除浮動

這個也是面試過程中比較常問到的內容,也是基礎中的基礎 1.使用帶clear屬性的空元素 給浮動的元素後面新增乙個空白的div,給該div新增clear both 在左右兩側均不允許浮動元素,可以根據需要設定左右清除浮動 但該方法會在文件結構中新增無用的元素,增加dom結構,是文件結構複雜化,所以推薦...

前端面試題(HTML CSS)

用正確的標籤做正確的事情。html 語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器 搜尋引擎解析 即使在沒有樣式 css 情況下也以一種文件格式顯示,並且是容易閱讀的 搜尋引擎的爬蟲也依賴於 html 標記來確定上下文和各個關鍵字的權重,利於 seo 使閱讀源 的人對 更容易將 分塊,便於閱讀維...

前端面試題 HTML CSS)網頁布局

1 css中居中方式 1 絕對定位 2 flex布局 display flex justify content center align item center 3 對父容器使用display table cell vertical align middle 使其內的子元素實現垂直居中 2 css的...