*(星號)會匹配所有的元素,針對所有的元素設定,使用方式如下所示
*
這個是在我們清除瀏覽器預設樣式的時候進行使用的,一般情況下,使用萬用字元選擇器的場景並不是很多
元素選擇器是指用標籤名字來進行選擇:如下使用方法
div
span
p等
id選擇器主要指的是通過標籤的id來進行標籤的選擇,首先要給標籤賦予乙個id
然後在css樣式中,通過#id的形式,來進行選擇,如:
類選擇器的使用方式類似id選擇器,首先要給標籤乙個指定的類,然後通過.(點操作符)來進行類名的選取如:
然後在style樣式中去進行類的選擇
區別:
後代選擇器,顧名思義,也就是乙個父級標籤下面的所有後代,既可以包括這個標籤的子集後代,也可包含這個子集後代的後代,即選擇這個標籤下所有指定元素
如:
選擇,先去選擇div,然後選擇div下面的ul然後再次選擇到ul下面的li:
以上的選擇器的使用都是最簡單的使用方式,在使用的過程中往往會相互結合使用,即可能會出現
.類名 #id名 標籤元素型別{}
當然這個只是乙個例子,因為這樣在瀏覽器在效率上面會高一點,它會從父級元素一直往下去尋找
簡單的例項:
lang="en">
charset="utf-8">
titletitle>
charset="utf-8">
name="generator"
content="editplus®">
name="author"
content="作者是誰">
name="keywords"
name="description"
content="描述和簡介">
type="text/css">
body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6
ul, ola*
.main
#id_selector
.class_selector
ulli
style>
head>
class="main">
id="id_selector">
id選擇器使用
div>
class="class_selector">
類選擇器
div>
後代選擇器1li>
後代選擇器2li>
後代選擇器3li>
ul>
div>
body>
html>
顯示效果如下:
以上部分只是一些最簡單的選擇器的使用,在後面可能會相互結合著使用,或者更複雜的選擇器等。
從零開始前端學習 14 選擇器的優先順序
選擇器的優先順序的使用注意事項,往往在我們寫 的時候是格外需要注意的。怎麼單獨來看呢?最簡單的選擇器有id選擇器,class選擇器,與標籤選擇器,那麼究竟是誰的優先順序更大呢?之前說過同比下,id選擇器的優先順序可能更大一點 id選擇器 class類選擇器 元素選擇器lang en charset ...
從零開始學習web前端開發
之前半個月一直在學習深度學習,但是感覺自己的能力還沒到那個程度所以就想擱置一下,從程式設計師基礎的前端開發來學。廢話不多說直接開記 我所使用的前端開發軟體就是業內很流行的vscode,作為小白的我當然也是用的這個 具體的安裝教程,外掛程式教程網上都有詳細的介紹,在此處不多講 在vscode中輸入 就...
前端的學習之路 初級CSS 常用選擇器
lang en charset utf 8 name viewport content width device width,initial scale 1.0 常用選擇器title 將所有的段落設定為紅色 字型 標籤 元素 選擇器 作用 根據標籤名來選中指定的元素 語法 標籤名 例子 p h1 d...