當(dāng)前位置：首頁(yè) > 科技 > 軟件

你的Css選擇器可視化備忘錄

來(lái)源：責(zé)編：時(shí)間：2024-03-27 09:22:59 172觀看

導(dǎo)讀前言最近，在和前端小伙伴聊天中發(fā)現(xiàn)，有些同學(xué)對(duì)css有一種望而卻步的趕腳。究其原因，就是因?yàn)樗母鞣N屬性繁雜多樣，屬性的用法千奇百怪。大家想做系統(tǒng)學(xué)習(xí)也找不到對(duì)應(yīng)的方法，只是「機(jī)械式」的進(jìn)行記憶。而沒有在腦海中形

前言

最近，在和前端小伙伴聊天中發(fā)現(xiàn)，有些同學(xué)對(duì)css有一種望而卻步的趕腳。究其原因，就是因?yàn)樗母鞣N屬性繁雜多樣，屬性的用法千奇百怪。大家想做系統(tǒng)學(xué)習(xí)也找不到對(duì)應(yīng)的方法，只是「機(jī)械式」的進(jìn)行記憶。而沒有在腦海中形成對(duì)應(yīng)的「畫面」。

想必大家在平時(shí)業(yè)務(wù)開發(fā)中，對(duì)某個(gè)css屬性進(jìn)行查詢時(shí)，總是打開google然后輸入對(duì)應(yīng)的屬性，一般都是返回MDN中相關(guān)介紹。但是，它們這種介紹都是從原理角度來(lái)分析，無(wú)法給人一種直觀的感受。

所以，既要想系統(tǒng)性的學(xué)習(xí)并且有一個(gè)直觀印象，最好的方式就是用圖例的方式來(lái)「可視化」記憶和總結(jié)。

而今天，我們來(lái)系統(tǒng)的介紹一下CSS選擇器。這塊沒啥原理可講，我們只是需要記憶即可，所以這篇文章算是給我或者大家的一篇備忘錄。以便以后能夠快速查詢。

0. 啥是CSS選擇器

CSS選擇器是用于選擇 HTML 元素并為其應(yīng)用樣式的一種機(jī)制。

選擇器允許我們根據(jù)元素的類型、屬性、位置以及其他特征來(lái)選擇要樣式化的元素，從而實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)樣式的精確控制。

以下是一些常見的 CSS 選擇器及其用途：

「元素選擇器（Element Selector）」：選擇指定類型的 HTML 元素。例如，p 選擇所有段落元素。
「類選擇器（Class Selector）」：選擇具有指定類名的元素。以點(diǎn)號(hào)（.）開頭，后跟類名。例如，.button 選擇所有類名為 button 的元素。
「ID 選擇器（ID Selector）」：選擇具有指定 ID 的元素。以井號(hào)（#）開頭，后跟 ID 名稱。例如，#header 選擇 ID 為 header 的元素。
「后代選擇器（Descendant Selector）」：選擇指定元素的后代元素。使用空格分隔兩個(gè)選擇器，其中

第一個(gè)選擇器表示父元素

第二個(gè)選擇器表示后代元素

例如，div p 選擇所有 <div> 元素內(nèi)部的所有段落 <p> 元素。

「相鄰兄弟選擇器（Adjacent Sibling Selector）」：選擇緊接在另一個(gè)元素后面的元素。使用加號(hào)（+）符號(hào)連接兩個(gè)選擇器，其中

第一個(gè)選擇器表示第一個(gè)元素

第二個(gè)選擇器表示其緊鄰的兄弟元素

例如，h2 + p 選擇所有緊接在 <h2> 元素后面的 <p> 元素。

「通用選擇器（Universal Selector）」：選擇頁(yè)面中的「所有元素」。使用星號(hào)（*）表示。例如，* 選擇頁(yè)面中的所有元素。

除了這些基本的選擇器外，CSS 還提供了許多其他類型的選擇器，如偽類選擇器（例如 :hover、:active）、偽元素選擇器（例如 ::before、::after）、屬性選擇器（例如 [type="text"]）等，可以根據(jù)具體的需求選擇合適的選擇器來(lái)對(duì)頁(yè)面元素進(jìn)行樣式化。

1. 通用選擇器 - *

CSS的通用選擇器是一個(gè)星號(hào)（*），它匹配文檔中的「任何元素」。使用通用選擇器，我們可以選擇頁(yè)面上的「所有元素」，并為它們應(yīng)用相同的樣式。

例如，如果我們想為頁(yè)面上的所有元素設(shè)置相同的字體樣式，我們可以使用通用選擇器來(lái)實(shí)現(xiàn)。

但要注意，過度使用通用選擇器可能會(huì)導(dǎo)致「性能問題」，因?yàn)樗鼤?huì)匹配頁(yè)面上的所有元素，包括嵌套元素，這可能會(huì)增加瀏覽器的渲染負(fù)擔(dān)。因此，建議在必要時(shí)謹(jǐn)慎使用通用選擇器。

圖片

2. 元素選擇器 - element

元素選擇器是 CSS 中最簡(jiǎn)單的選擇器之一，它通過指定 HTML 元素的名稱來(lái)選擇元素。例如，要選擇所有段落元素 <p>，我們可以使用以下選擇器：

p {  /* CSS 樣式 */}

這將選擇頁(yè)面中的所有段落元素，并應(yīng)用所指定的 CSS 樣式。

圖片

3. 類名選擇器 - .class

類選擇器用于選擇具有特定類名的 HTML 元素。類選擇器以點(diǎn)號(hào)（.）開頭，后跟類名。例如，如果我們有一個(gè)類名為 button 的按鈕元素，我們可以使用類選擇器來(lái)選擇它：

.button {  /* CSS 樣式 */}

這將選擇頁(yè)面中所有具有類名 button 的元素，并應(yīng)用所指定的 CSS 樣式。類選擇器使我們可以為頁(yè)面中的「多個(gè)元素定義相同的樣式」，而不必重復(fù)定義。此外，一個(gè)元素可以同時(shí)具有多個(gè)類，這樣就可以輕松地將多個(gè)樣式應(yīng)用于同一個(gè)元素。

圖片

4. ID 選擇器 - #id

ID 選擇器是 CSS 中用于選擇具有特定 ID 屬性的 HTML 元素的選擇器。ID 選擇器以井號(hào)（#）開頭，后跟 ID 名稱。

例如，如果我們有一個(gè) ID 為 my-id 的標(biāo)題元素，我們可以使用 ID 選擇器來(lái)選擇它：

#my-id {  /* CSS 樣式 */}

這將選擇頁(yè)面中具有 ID 名稱為 my-id 的元素，并應(yīng)用所指定的 CSS 樣式?！概c類選擇器不同，ID 選擇器應(yīng)該是唯一的」，因?yàn)?nbsp;HTML 頁(yè)面中每個(gè)元素的 ID 必須是唯一的。ID 選擇器通常用于「為特定元素應(yīng)用唯一的樣式」。

圖片

5. 多選擇器 - .class.class-2

.class.class-2表示連接兩個(gè)或更多類或ID來(lái)選擇具有所有指定類/ID的元素：

圖片

這段CSS代碼的意思是選擇具有 .my-class 和 .special 兩個(gè)類的元素，并設(shè)置對(duì)應(yīng)的背景色。

6. 逗號(hào)組合 - .class, .class-2

使用逗號(hào)分隔多個(gè)選擇器聲明。這樣可以輕松地「將相同的樣式應(yīng)用于多個(gè)選擇器聲明」:

圖片

7. 后代選擇器 - .class .class-2

后代選擇器用于「選擇特定元素的后代元素」。后代選擇器使用「空格分隔兩個(gè)選擇器」，其中

第一個(gè)選擇器表示父元素
第二個(gè)選擇器表示后代元素

例如，如果我們想選擇所有 <div> 元素內(nèi)部的所有段落 <p>，我們可以使用后代選擇器：

div p {  /* CSS 樣式 */}

這將選擇所有在 <div> 元素內(nèi)部的 <p> 元素，并應(yīng)用所指定的 CSS 樣式。后代選擇器允許我們更精確地定位特定元素，而不受頁(yè)面結(jié)構(gòu)的限制。

圖片

8. 相鄰兄弟選擇器 - .class + .class-2

相鄰兄弟選擇器它用于選擇「緊接」在另一個(gè)元素后面的元素。相鄰兄弟選擇器使用加號(hào)（+）符號(hào)來(lái)連接兩個(gè)選擇器，其中

第一個(gè)選擇器表示第一個(gè)元素
第二個(gè)選擇器表示緊跟在其后的兄弟元素

例如，如果我們想選擇所有緊跟在 <h2> 元素后面的段落 <p> 元素，我們可以使用相鄰兄弟選擇器：

h2 + p {  /* CSS 樣式 */}

這將選擇緊接在 <h2> 元素后面的 <p> 元素，并應(yīng)用所指定的 CSS 樣式。相鄰兄弟選擇器允許我們「根據(jù)元素之間的特定關(guān)系來(lái)選擇元素」，從而使得樣式的應(yīng)用更加精確和有針對(duì)性。

圖片

9. 子選擇器 - .class > .class-2

子選擇器用于選擇特定元素的「直接子元素」。子選擇器使用大于號(hào)（>）符號(hào)來(lái)連接兩個(gè)選擇器，其中

第一個(gè)選擇器表示父元素
第二個(gè)選擇器表示其直接子元素

例如，如果我們想選擇所有 <ul> 元素下的直接子元素 <li>，我們可以使用子選擇器：

ul > li {  /* CSS 樣式 */}

這將選擇所有直接位于 <ul> 元素內(nèi)部的 <li> 元素，并應(yīng)用所指定的 CSS 樣式。

子選擇器「只會(huì)選擇指定元素的直接子元素，而不會(huì)選擇嵌套在更深層次的子元素」。這使得子選擇器非常有用，因?yàn)樗梢詭椭覀兏_地定位特定層次結(jié)構(gòu)的元素，并應(yīng)用相應(yīng)的樣式。

圖片

10. 兄弟選擇器 - .class ~ .class-2

兄弟選擇器用于「選擇與指定元素具有相同父元素且位于其后面的所有兄弟元素」。一般兄弟選擇器使用波浪號(hào)（~）符號(hào)來(lái)連接兩個(gè)選擇器，其中

第一個(gè)選擇器表示基準(zhǔn)元素
第二個(gè)選擇器表示它的兄弟元素

例如，如果我們想選擇所有與 <h2> 元素具有相同父元素且位于其后面的 <p> 元素，我們可以使用一般兄弟選擇器：

h2 ~ p {  /* CSS 樣式 */}

這將選擇所有與 <h2> 元素具有相同父元素且位于其后面的 <p> 元素，并應(yīng)用所指定的 CSS 樣式。

兄弟選擇器允許我們選擇與指定元素具有相同父元素且位于其后面的所有兄弟元素，而不僅僅是直接的兄弟元素。

圖片

11. 腦殘貓頭鷹選擇器 - * + *

腦殘貓頭鷹選擇器用來(lái)描述一種特定的 CSS 模式。它涉及選擇多個(gè)元素并為它們應(yīng)用共享樣式，從而在網(wǎng)頁(yè)的各個(gè)組件或部分中創(chuàng)建一致的視覺設(shè)計(jì)。

術(shù)語(yǔ)腦殘指的是通用選擇器（*）與相鄰兄弟選擇器（+）結(jié)合使用的情況。貓頭鷹可能指的是 CSS 選擇器的形態(tài)類似于貓頭鷹的頭部和眼睛。

以下是“腦殘貓頭鷹”選擇器模式的示例：

* + * {  margin-top: 1.5em;}

這個(gè) CSS 規(guī)則選擇了在另一個(gè)元素之后出現(xiàn)的任何元素（除了容器中的第一個(gè)元素），并在頂部應(yīng)用了一定的邊距，有效地使元素均勻地間隔開來(lái)。這種模式特別適用于在為「容器內(nèi)的元素添加間距，但第一個(gè)元素沒有前置兄弟元素」。當(dāng)然，我們也可以使用 :not(:first-child)來(lái)達(dá)到相同的效果。

圖片

12. 屬性選擇器

屬性選擇器它允許我們根據(jù)元素的屬性及其屬性值來(lái)選擇元素，并為其應(yīng)用樣式。屬性選擇器使用方括號(hào)（[]）表示，內(nèi)部包含屬性名和可選的屬性值。

存在性屬性選擇器

選擇具有指定屬性的元素，不論其屬性值是什么。

[data-text] { /* CSS 樣式 */}

選擇所有具有 data-text 屬性的元素，并為其應(yīng)用樣式。這個(gè)選擇器「不關(guān)心屬性的值是什么，只要有這個(gè)屬性就會(huì)被選中」

圖片

值屬性選擇器

選擇具有指定屬性和特定值的元素。

[data-text="hello"] { /* CSS 樣式 */}

選擇所有 data-text 屬性的值為 hello 的元素，并為其應(yīng)用樣式。

只有屬性值為 hello 的元素才會(huì)被選中。

部分值屬性選擇器

選擇具有指定屬性，并且屬性值包含特定值的元素。

[title*="saur"] { /* CSS 樣式 */}

選擇所有 title 屬性值中包含 saur子字符串的元素，并為其應(yīng)用樣式。

只要屬性值包含 saur，無(wú)論是在開頭、中間還是結(jié)尾，都會(huì)被選中。

圖片

起始值屬性選擇器

選擇具有指定屬性，且屬性值以特定值開頭的元素。

a[href^="https://"] { /* CSS 樣式 */}

選擇所有 href 屬性值以 https:// 開頭的 <a> 元素，并為其應(yīng)用樣式。

只有鏈接以 https:// 開頭的 <a> 元素才會(huì)被選中。

圖片

結(jié)束值屬性選擇器

選擇具有指定屬性，且屬性值以特定值結(jié)尾的元素。

[src$=".png"] { /* CSS 樣式 */}

選擇所有 src 屬性值以 .png 結(jié)尾的元素，并為其應(yīng)用樣式。

只有圖片路徑以 .png 結(jié)尾的元素才會(huì)被選中。

圖片

包含值屬性選擇器

選擇具有指定屬性，且屬性值包含特定值的元素，且值之間以空格分隔。

[class~="active"] { /* CSS 樣式 */}

選擇所有具有包含 active 的類名的元素，并為其應(yīng)用樣式。

這個(gè)選擇器將選中所有具有 active 類的元素，無(wú)論它們的類名是 active 還是 some-active-class 等。

圖片

13. link偽類選擇器

以下四個(gè)偽類用于選擇各種狀態(tài)下的link等元素。這四個(gè)偽類通常與鏈接一起使用，但是 :active 對(duì)于button也很有用，而 :hover 可以用于所有類型的元素：

:link

選擇未訪問的link。它允許我們?yōu)橛脩羯形袋c(diǎn)擊的超鏈接設(shè)置樣式。

:visited
選擇用戶已經(jīng)訪問過的link。這個(gè)偽類允許我們?yōu)橐郧包c(diǎn)擊過的超鏈接應(yīng)用樣式。
:hover
當(dāng)用戶的指針（例如鼠標(biāo)光標(biāo)）懸停在元素（通常是鏈接）上時(shí)，選擇這些元素。
:active
選擇在它們被激活時(shí)的元素（通常是鏈接或按鈕），例如當(dāng)用戶點(diǎn)擊它們時(shí)。

14. input相關(guān)

在前端項(xiàng)目中，input有很大的用處。我們來(lái)看MDN關(guān)于input的介紹。

所以，和input相關(guān)的選擇器也很多。

元素聚焦 - :focus

元素選中 - :checked

:checked 偽類選擇器用于選擇當(dāng)前被選中/勾選的單選按鈕、復(fù)選框或選擇元素中的選項(xiàng)。

input[type='checkbox'] {  all: unset;  -webkit-appearance: none;  appearance: none;  margin: 0;}input[type='checkbox']:checked + label {  background: mediumseagreen;}input[type='checkbox']:focus + label {  box-shadow: 0 0 0 2px yellow;}

在上面的示例中，我使用 appearance: none 來(lái)移除復(fù)選框輸入框的默認(rèn)樣式

元素禁用 - :disabled

:disabled 偽類匹配「禁用」的表單元素，例如button或input

元素可用 - :enabled

:enabled 偽類匹配可以交互并接收輸入的表單元素

元素驗(yàn)證 - :valid

:valid 偽類用于定位具有內(nèi)容符合其屬性規(guī)定要求（如 pattern、type 等）的輸入元素：

元素驗(yàn)證- :invalid

:invalid 偽類用于定位內(nèi)容不符合要求的輸入元素：

元素必填 - :required

:required 偽類用于定位具有 required 屬性的輸入元素，表明在提交表單之前必須填寫它們：

元素可選 - :optional

:optional 偽類用于定位沒有 required 屬性的輸入元素，表示它們不是必填項(xiàng)：

15. 第N個(gè)孩子

第一個(gè)孩子 - :first-child

:first-child 偽類用于定位其「父元素內(nèi)的第一個(gè)子元素」：

最后一個(gè)孩子 - last-child

:last-child 偽類用于定位其父元素內(nèi)的最后一個(gè)子元素：

第N個(gè)孩子 - :nth-child

:nth-child 偽類根據(jù)元素在其父元素中的位置進(jìn)行選擇，允許進(jìn)行各種各樣的選擇。

:nth-child 還可以讓我們按模式選擇元素：

:nth-child(odd) 或 :nth-child(2n+1) 選擇「每個(gè)奇數(shù)位置」的子元素
:nth-child(even) 或 :nth-child(2n) 選擇「每個(gè)偶數(shù)位置」的子元素

公式中的 n 就像一個(gè)計(jì)數(shù)器，讓我們可以在重復(fù)循環(huán)中選擇元素。

第N個(gè)孩子(倒數(shù)) - :nth-last-child

:nth-last-child 偽類類似于 :nth-child，但它是從「最后一個(gè)子元素開始向后計(jì)數(shù)」的

元素的唯一子元素 - :only-child

如果某個(gè)元素是其父元素的「唯一子元素」，則 :only-child 偽類將其作為目標(biāo)元素：

16. 指定類型的第N個(gè)孩子

類型的第一個(gè)元素 - :first-of-type

:first-of-type 偽類的目標(biāo)是其父級(jí)中「該類型的第一個(gè)元素」：

類型的最后一個(gè)元素 - :last-of-type

:last-of-type 偽類的目標(biāo)是其父級(jí)中「該類型的最后一個(gè)元素」

類型的第N個(gè)元素 - :nth-of-type

:nth-of-type 偽類根據(jù)元素的類型和兄弟元素中的位置來(lái)匹配元素

類型的第N個(gè)元素(向后計(jì)數(shù)) - :nth-last-of-type

:nth-last-of-type 偽類根據(jù)元素的類型和兄弟元素中的位置來(lái)匹配元素，但從末尾開始計(jì)數(shù)

其類型的唯一元素 - :only-of-type

:only-of-type 偽類的目標(biāo)元素是其兄弟元素中該類型的唯一元素：

17. 偽類選擇器

目標(biāo)元素選擇器- .target

:target 偽類選擇具有與 URL 片段匹配的 ID 屬性的元素（例如：https://example.com/#fragment）。:target 經(jīng)常用于為直接鏈接到的頁(yè)面部分設(shè)置樣式，通?！概c頁(yè)面內(nèi)鏈接一起使用」。

否定偽類 - .not()

:not()函數(shù)偽類允許我們定位與指定選擇器或條件不匹配的元素。它本質(zhì)上是一個(gè)「過濾器」：

父選擇器 - :has()

:has()函數(shù)偽類允許在元素包含某個(gè)元素或另一個(gè)選擇器時(shí)對(duì)其進(jìn)行樣式設(shè)置：

其他偽類

:root：選擇文檔中最高級(jí)別的父元素，通常是 HTML 文檔中的 <html> 元素。用于定義 CSS 變量，這些變量將對(duì)頁(yè)面內(nèi)所有元素可用。
:is()：匹配可以是多個(gè)選擇器之一的元素，使得長(zhǎng)選擇器列表更簡(jiǎn)潔易讀。例如，:is(h1, h2, h3) 可以匹配這三個(gè)標(biāo)題元素中的任何一個(gè)。
:where()：類似于 :is()，但允許根據(jù)條件選擇元素，而不影響選擇器的特異性。
:default：匹配設(shè)置為其默認(rèn)選擇狀態(tài)的 UI 元素（例如單選按鈕或復(fù)選框）。
:empty：選擇沒有子元素的元素（包括文本節(jié)點(diǎn)）。
:fullscreen：選擇當(dāng)前以全屏模式顯示的元素。
:in-range：匹配值在指定范圍內(nèi)的表單元素（使用 min 和 max 屬性）。
:out-of-range：匹配值在指定范圍之外的表單元素。
:indeterminate：選擇狀態(tài)不確定的表單元素，例如既不選中也不取消選中的復(fù)選框（通常在樹形視圖結(jié)構(gòu)中看到）。
:read-only：匹配由于 readonly 屬性而無(wú)法由用戶編輯的表單元素。
:read-write：選擇用戶可以編輯的表單元素，意味著它們不是只讀的。
:lang()：根據(jù)其語(yǔ)言屬性匹配元素。例如，:lang(en) 選擇用英語(yǔ)定義的元素。

18. 偽元素

第一個(gè)子偽元素 - ::before

::before 偽元素用于在元素內(nèi)容之前插入內(nèi)容。它可用于添加裝飾內(nèi)容、圖標(biāo)或其他不需要在實(shí)際 DOM 中的元素：

最后一個(gè)子偽元素 - ::after

::after 偽元素與 ::before 類似，用于在元素內(nèi)容之后插入內(nèi)容：

首字母?jìng)卧? ::first-letter

::first-letter 偽元素用于設(shè)置塊級(jí)元素的「第一個(gè)字母的樣式」，允許使用首字下沉等設(shè)計(jì)元素：

首行偽元素 - ::first-line

::first-line 偽元素用于設(shè)置塊級(jí)元素第一行的樣式。這允許印刷效果可以根據(jù)包含元素的大小和字體大小動(dòng)態(tài)調(diào)整：

文本輸入占位符 - ::placeholder

::placeholder 偽元素用于設(shè)置表單字段（如 <input> 和 <textarea>）的占位符文本的樣式：

樣式突出顯示框 - ::selection

::selection 偽元素用于設(shè)置元素中已突出顯示或由用戶選擇的部分的樣式。例如，當(dāng)用戶單擊并拖動(dòng)以選擇文本時(shí)，::selection偽元素可用于修改該選擇的背景顏色、文本顏色和其他樣式：

列表標(biāo)記偽元素 - ::marker

::marker 偽元素用于設(shè)置列表項(xiàng)中標(biāo)記框的樣式，列表項(xiàng)通常包含項(xiàng)目符號(hào)（對(duì)于無(wú)序列表）或數(shù)字/字母（對(duì)于有序列表）。

在引入 ::marker 偽元素之前，自定義這些標(biāo)記通常需要解決方法，但這個(gè)偽元素給了我們更多的控制權(quán)：

本文鏈接：http://www.www897cc.com/showinfo-26-79598-0.html你的Css選擇器可視化備忘錄

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇：亮點(diǎn)搶先看！東莞市跨境電商即將開啟新征程！

下一篇： SpringCloud微服務(wù)中Feign如何傳遞用戶Token，并保證多線程環(huán)境也可適用？

標(biāo)簽：

熱門焦點(diǎn)

7月安卓手機(jī)好評(píng)榜：三星S23Ultra好評(píng)率第一

性能榜和性價(jià)比榜之后，我們來(lái)看最后的安卓手機(jī)好評(píng)榜，數(shù)據(jù)來(lái)源安兔兔評(píng)測(cè)，收集時(shí)間2023年7月1日至7月31日，僅限國(guó)內(nèi)市場(chǎng)。第一名：三星Galaxy S23 Ultra好評(píng)率：95.71%在即將迎來(lái)新
摸魚心法第一章——和配置文件說拜拜

為了能摸魚我們團(tuán)隊(duì)做了容器化，但是帶來(lái)的問題是服務(wù)配置文件很麻煩，然后大家在群里進(jìn)行了“親切友好”的溝通圖片圖片圖片圖片對(duì)比就對(duì)比，簡(jiǎn)單對(duì)比下獨(dú)立配置中心和k8s作為配
為什么你不應(yīng)該使用Div作為可點(diǎn)擊元素

按鈕是為任何網(wǎng)絡(luò)應(yīng)用程序提供交互性的最常見方式。但我們經(jīng)常傾向于使用其他HTML元素，如 div span 等作為 clickable 元素。但通過這樣做，我們錯(cuò)過了許多內(nèi)置瀏覽器的功能。
華為HarmonyOS 4升級(jí)計(jì)劃公布：首批34款機(jī)型今日開啟公測(cè)

8月4日消息，今天下午華為正式發(fā)布了HarmonyOS 4系統(tǒng)，在更流暢的前提下，還帶來(lái)了不少新功能，UI設(shè)計(jì)也有變化，會(huì)讓手機(jī)煥然一新。華為宣布，首批機(jī)型將會(huì)在
華為HarmonyOS 4.0將于8月4日發(fā)布或搭載AI大模型技術(shù)

華為宣布HarmonyOS4.0將于8月4日正式發(fā)布。此前，華為已經(jīng)針對(duì)開發(fā)者公布了HarmonyOS4.0，以便于開發(fā)者提前進(jìn)行適配，也因此被曝光出了一些新系統(tǒng)的特性
三星獲批量產(chǎn)iPhone 15全系屏幕：蘋果史上最驚艷直屏

按照慣例，蘋果將繼續(xù)在今年9月舉辦一年一度的秋季新品發(fā)布會(huì)，有傳言稱發(fā)布會(huì)將于9月12日舉行，屆時(shí)全新的iPhone 15系列將正式與大家見面，不出意外的話
自研Exynos回歸！三星Galaxy S24系列將提供Exynos和驍龍雙版本

年初，全新的三星Galaxy S23系列發(fā)布，包含Galaxy S23、Galaxy S23+和Galaxy S23 Ultra三個(gè)版本，全系搭載超頻版驍龍8 Gen 2，雖同樣采用臺(tái)積電4nm工藝制
首發(fā)天璣9200+ iQOO Neo8系列發(fā)布首銷售價(jià)2299元起

2023年5月23日晚，iQOO Neo8系列正式發(fā)布。其中，Neo系列首款Pro之作——iQOO Neo8 Pro強(qiáng)悍登場(chǎng)，限時(shí)售價(jià)3099元起；價(jià)位段最強(qiáng)性能手機(jī)iQOO Neo8同期上市
北京：科技教育體驗(yàn)基地開始登記

　　北京“科技館之城”科技教育體驗(yàn)基地登記和認(rèn)證工作日前啟動(dòng)。首批北京科技教育體驗(yàn)基地?cái)M于2023年全國(guó)科普日期間掛牌，后續(xù)還將開展常態(tài)化登記?！　”本┛萍冀逃w驗(yàn)基