從零開始前端學習 8 初級選擇器的使用

2021-08-08 09:39:51 字數 1656 閱讀 9694

*(星號)會匹配所有的元素,針對所有的元素設定,使用方式如下所示

*
這個是在我們清除瀏覽器預設樣式的時候進行使用的,一般情況下,使用萬用字元選擇器的場景並不是很多

元素選擇器是指用標籤名字來進行選擇:如下使用方法

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