深入理解 CSS 選擇器：從基礎到高級的樣式控制

引言

在網頁設計與開發中，CSS（層疊樣式表）扮演著至關重要的角色，它賦予了 HTML 頁面豐富的視覺效果和交互性。而 CSS 選擇器則是 CSS 的核心機制之一，通過選擇器，我們能夠精準地指定要應用樣式的 HTML 元素，從而實現對網頁樣式的精細控制。從簡單地選中頁面上的所有段落元素，到根據元素的特定屬性、在文檔中的位置以及用戶交互狀態來選擇元素，CSS 選擇器提供了多種多樣的選擇方式，滿足了不同場景下的樣式需求。深入理解 CSS 選擇器不僅能夠提升我們編寫高效、可維護 CSS 代碼的能力，還能為創造出美觀、用戶體驗良好的網頁奠定堅實基礎。

一、CSS 選擇器基礎

（一）元素選擇器

元素選擇器是 CSS 中最基本、最常用的選擇器類型。它通過指定 HTML 元素的標簽名來選中頁面中所有該類型的元素。例如，使用p選擇器可以選中頁面上的所有段落元素：

p {color: blue;font-size: 16px;
}

在上述代碼中，所有<p>標簽包裹的文本都會被設置為藍色，字體大小為 16 像素。元素選擇器的作用范圍廣泛，能夠快速統一某類元素的基本樣式，為頁面構建一致的風格。

（二）類選擇器

類選擇器允許我們根據元素的class屬性值來選擇元素。在 HTML 中，我們可以為多個元素添加相同的class屬性，然后通過對應的類選擇器來應用相同的樣式。類選擇器以點號（.）開頭，后面跟著類名。例如：

<div class="highlight">這是一個帶有highlight類的div</div>
<p class="highlight">這是一個帶有highlight類的段落</p>

.highlight {background-color: yellow;color: red;
}

上述 CSS 代碼會將所有具有highlight類的元素背景設置為黃色，文本顏色設置為紅色，無論是<div>還是<p>元素。類選擇器的靈活性在于它可以跨不同類型的元素應用樣式，方便我們對頁面中需要特殊樣式的部分進行統一設置。

（三）ID 選擇器

ID 選擇器通過元素的id屬性來選擇特定的單個元素。在 HTML 文檔中，id屬性的值在整個頁面中必須是唯一的。ID 選擇器以井號（#）開頭，后面跟著 ID 值。例如：

<div id="unique-section">這是一個具有唯一ID的div</div>

#unique-section {border: 2px solid green;padding: 10px;
}

這段代碼會為id為unique-section的<div>元素添加一個 2 像素寬的綠色邊框，并設置 10 像素的內邊距。由于 ID 的唯一性，ID 選擇器通常用于為頁面中獨一無二的元素設置特定樣式，比如頁面的導航欄、主內容區域等。

二、組合選擇器

（一）后代選擇器

后代選擇器用于選擇某個元素的所有后代元素。它通過空格來連接兩個或多個選擇器，前面的選擇器指定祖先元素，后面的選擇器指定后代元素。例如：

<div class="container"><p>這是容器內的段落</p><ul><li>列表項1</li><li>列表項2</li></ul>
</div>

.container p {color: purple;
}

在上述例子中，.container p選擇器會選中class為container的<div>元素內部的所有<p>元素，并將它們的文本顏色設置為紫色。后代選擇器在處理具有層級結構的 HTML 文檔時非常有用，能夠精確地控制特定區域內元素的樣式。

（二）子選擇器

子選擇器與后代選擇器類似，但它只選擇直接子元素，不包括孫輩及更深層次的元素。子選擇器使用大于號（>）來連接選擇器。例如：

<div class="parent"><p>這是直接子元素段落</p><div><p>這是孫輩段落</p></div>
</div>

.parent > p {font-weight: bold;
}

這里，.parent > p選擇器只會將class為parent的<div>元素的直接子元素<p>的字體加粗，而不會影響到孫輩的<p>元素。子選擇器在需要明確區分直接子元素和后代元素樣式時發揮作用，使樣式控制更加精準。

（三）相鄰兄弟選擇器

相鄰兄弟選擇器用于選擇緊接在另一個元素后面的同級元素。它使用加號（+）來連接兩個選擇器，前面的選擇器指定參考元素，后面的選擇器指定相鄰兄弟元素。例如：

<h2>標題</h2>
<p>緊跟標題的段落</p>
<p>另一個段落</p>

h2 + p {text-decoration: underline;
}

在這個例子中，h2 + p選擇器會將緊跟在<h2>標題后面的第一個<p>元素的文本加上下劃線，而不會影響到第二個<p>元素。相鄰兄弟選擇器適用于對相鄰元素之間的樣式關系進行特殊處理的場景。

（四）通用兄弟選擇器

通用兄弟選擇器選擇的是與參考元素同級的所有后續元素。它使用波浪號（~）來連接選擇器。例如：

<h3>標題</h3>
<p>第一個段落</p>
<p>第二個段落</p>
<ul><li>列表項</li>
</ul>
<p>第三個段落</p>

h3 ~ p {color: gray;
}

上述代碼會將<h3>標題之后的所有同級<p>元素的文本顏色設置為灰色，包括 “第一個段落”“第二個段落” 和 “第三個段落”。通用兄弟選擇器在需要對一組同級元素中的后續元素統一設置樣式時非常方便。

三、屬性選擇器

（一）簡單屬性選擇器

簡單屬性選擇器允許我們根據元素是否具有某個屬性來選擇元素，或者根據屬性的值來選擇元素。例如，要選擇所有帶有href屬性的<a>元素，可以使用以下選擇器：

a[href] {text-decoration: none;
}

這段代碼會移除所有帶有href屬性的鏈接的下劃線。如果要選擇href屬性值為特定 URL 的<a>元素，可以這樣寫：

a[href="https://example.com"] {color: green;
}

這將把鏈接到https://example.com的<a>元素文本顏色設置為綠色。

（二）部分屬性值選擇器

  1. 包含屬性值選擇器：包含屬性值選擇器用于選擇屬性值中包含特定字符串的元素。使用中括號（[]），在屬性名后面加上*=運算符。例如：
<a href="https://example.com/products">產品頁面</a>
<a href="https://example.com/services">服務頁面</a>

a[href*="example.com"] {font-weight: bold;
}

上述代碼會將所有鏈接中包含example.com的<a>元素字體加粗。
2.?以特定值開頭的屬性值選擇器：該選擇器選擇屬性值以特定字符串開頭的元素，使用^=運算符。比如：

<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/responsive.css">

link[href^="styles/"] {/* 樣式設置 */
}

這會選中所有href屬性值以styles/開頭的<link>元素。
3.?以特定值結尾的屬性值選擇器：用于選擇屬性值以特定字符串結尾的元素，使用$=運算符。例如：

<a href="document.pdf">下載PDF文檔</a>
<a href="image.jpg">查看圖片</a>

a[href$=".pdf"] {/* 樣式設置 */
}

這段代碼會選擇所有鏈接到 PDF 文件的<a>元素。

四、偽類選擇器

（一）動態偽類

  1. :hover 偽類：:hover偽類用于選擇鼠標懸停在其上的元素。它為用戶提供了交互反饋，增強了用戶體驗。例如：
button:hover {background-color: lightblue;
}

當鼠標懸停在<button>元素上時，按鈕的背景顏色會變為淺藍色。
2.?:active 偽類：:active偽類選擇的是被激活（通常是鼠標按下但未釋放）的元素。常用于按鈕點擊效果的設置：

a:active {color: red;
}

當用戶點擊鏈接時，鏈接文本顏色會變為紅色。
3.?:focus 偽類：:focus偽類選擇當前獲得焦點的元素，比如輸入框在被點擊進入編輯狀態時。例如：

input:focus {border-color: green;
}

當<input>輸入框獲得焦點時，其邊框顏色會變為綠色，提示用戶當前可進行輸入操作。

（二）目標偽類

:target偽類選擇的是當前 URL 中#后面指定的目標元素。例如，當頁面中有一個帶有id為section1的元素，并且 URL 為page.html#section1時：

<a href="#section1">跳轉到Section 1</a>
<div id="section1">這是Section 1的內容</div>

#section1:target {background-color: yellow;
}

當頁面跳轉到section1時，該<div>元素的背景顏色會變為黃色。

（三）語言偽類

:lang()偽類根據元素的lang屬性值來選擇元素，用于設置不同語言內容的樣式。例如：

<p lang="en">This is an English paragraph.</p>
<p lang="zh">這是一段中文段落。</p>

p:lang(en) {font-family: Arial, sans-serif;
}
p:lang(zh) {font-family: SimSun, serif;
}

上述代碼會為英文段落設置 Arial 字體，為中文段落設置宋體字體。

（四）UI 元素狀態偽類

  1. :enabled 和:disabled 偽類：:enabled偽類選擇所有啟用狀態的表單元素，:disabled偽類選擇所有禁用狀態的表單元素。例如：
<input type="text" enabled>
<input type="text" disabled>

input:enabled {border-color: blue;
}
input:disabled {background-color: lightgray;
}

這會使啟用的輸入框邊框為藍色，禁用的輸入框背景為淺灰色。
2.?:checked 偽類：:checked偽類選擇被選中的單選按鈕（<input type="radio">）或復選框（<input type="checkbox">）。例如：

<input type="checkbox" id="option1">
<label for="option1">選項1</label>

input:checked + label {color: green;
}

當復選框被選中時，其關聯的<label>元素文本顏色會變為綠色。

（五）結構性偽類

  1. :first-child 和:last-child 偽類：:first-child偽類選擇父元素的第一個子元素，:last-child偽類選擇父元素的最后一個子元素。例如：
<ul><li>第一項</li><li>第二項</li><li>第三項</li>
</ul>

li:first-child {font-weight: bold;
}
li:last-child {text-decoration: underline;
}

這會使列表的第一個<li>元素字體加粗，最后一個<li>元素文本加下劃線。
2.?:nth-child () 偽類：:nth-child()偽類允許我們選擇父元素中特定位置的子元素。它接受一個參數，可以是數字、關鍵字或表達式。例如，要選擇列表中的偶數項：

li:nth-child(even) {background-color: lightgray;
}

或者選擇第 3 個及以后的子元素：

li:nth-child(n + 3) {color: red;
}
  1. :nth-of-type () 偽類：:nth-of-type()偽類與:nth-child()類似，但它只考慮同類型的元素。例如：
<div><p>第一個段落</p><h3>標題</h3><p>第二個段落</p>
</div>

p:nth-of-type(2) {/* 樣式設置 */
}

這里會選擇<div>中第二個<p>元素，而不會受<h3>元素的影響。
4.?:not () 偽類：:not()偽類用于選擇不符合特定選擇器的元素。例如：

li:not(.active) {/* 樣式設置 */
}

這會選擇所有不具有active類的<li>元素。

五、偽元素選擇器

（一）::before 和::after 偽元素

::before和::after偽元素允許我們在元素的內容之前或之后插入額外的內容，并為其設置樣式。它們需要配合content屬性使用。例如：

p::before {content: "👉 ";color: blue;
}
p::after {content: " 👈";color: green;
}

上述代碼會在每個<p>元素的文本前面添加一個藍色的向右箭頭，后面添加一個綠色的向左箭頭。

（二）::first-letter 和::first-line 偽元素

  1. ::first-letter 偽元素：::first-letter偽元素用于選擇元素文本的第一個字母。常用于實現首字下沉效果：
p::first-letter {font-size: 2em;float: left;margin-right: 5px;
}

這會將<p>元素的第一個字母字體放大為原來的 2 倍，并向左浮動，與后面的文本形成首字下沉的視覺效果。
2.?::first-line 偽元素：::first-line偽元素選擇元素的第一行文本。例如：

p::first-line {font-weight: bold;
}

這會將<p>元素的第一行文本設置為加粗樣式。

（三）::selection 偽元素

::selection偽元素用于設置用戶選中元素文本時的樣式。例如：

::selection {background-color: yellow;color: purple;
}

當用戶在頁面上選中任何文本時，選中部分的背景會變為黃色，文本顏色變為紫色，為用戶提供了獨特的視覺反饋。

六、選擇器的優先級

（一）重要性聲明

在 CSS 中，可以使用!important聲明來提高樣式規則的優先級。當一個樣式屬性后面加上!important時，該樣式將覆蓋其他來源的樣式，除非其他樣式也使用了!important聲明且優先級更高。例如：

p {color: blue!important;
}

這段代碼中的藍色文本顏色設置將很難被其他普通樣式覆蓋，但需要注意的是，過度使用!important會使樣式表難以維護，應謹慎使用。

（二）選擇器的特異性

選擇器的特異性是決定樣式優先級的重要因素。特異性通過計算選擇器中不同類型選擇器的數量來確定。具體計算規則如下：

  1. 內聯樣式：內聯樣式（即在 HTML 元素的style屬性中定義的樣式）具有最高的特異性，記為 1,0,0,0。
  2. ID 選擇器：每個 ID 選擇器記為 0,1,0,0。
  3. 類選擇器、屬性選擇器和偽類選擇器：每個類選擇器、屬性選擇器或偽類選擇器記為 0,0,1,0。
  4. 元素選擇器和偽元素選擇器：每個元素選擇器或偽元素選擇器記為 0,0,0,1。

例如，一個選擇器.my-class p（一個類選擇器和一個元素選擇器）的特異性為 0,0,1,1，而#my-id（一個 ID 選擇器）的特異性為 0,1,0,0，因此#my-id的特異性更高，當兩者樣式沖突時，#my-id的樣式將被應用。

（三）樣式表的順序

當多個樣式規則具有相同的特異性時，后出現的樣式規則會覆蓋先出現的樣式規則。例如：

p {color: red;
}
p {color: green;
}

在上述代碼中，段落文本最終會顯示為綠色，因為第二個p選擇器的樣式聲明在后面。

（四）繼承的樣式與直接應用的樣式

繼承的樣式在優先級計算中處于較低層次。當一個元素從其父元素繼承樣式時，這些繼承來的樣式的優先級低于直接應用到該元素上的樣式。例如，假設在 HTML 文檔的<body>元素上設置了一個全局字體顏色：

body {color: gray;
}

然后，對于頁面中的某個<p>元素，如果沒有直接為其設置color屬性，它將繼承<body>的灰色字體顏色。但如果為該<p>元素單獨設置了顏色：

p {color: blue;
}

那么<p>元素的文本顏色將是藍色，因為直接應用到<p>元素的樣式優先級高于從<body>繼承來的樣式。這體現了 CSS 樣式表設計中 “就近原則”，直接針對元素的樣式設置會覆蓋從上層元素繼承而來的樣式。

（五）優先級沖突解決案例分析

為了更好地理解選擇器優先級，我們來看一個復雜的案例。假設有以下 HTML 結構：

<div id="parent" class="container"><p class="highlight">這是一段文本</p>
</div>

以及如下 CSS 樣式：

#parent p {color: red;
}
.container.highlight {color: green;
}
p {color: blue;
}

在這個例子中，#parent p是一個 ID 選擇器（#parent）和一個元素選擇器（p）的組合，其特異性為 0,1,0,1；.container.highlight是兩個類選擇器（.container和.highlight）的組合，特異性為 0,0,2,0；而單獨的p選擇器特異性為 0,0,0,1。根據特異性規則，0,0,2,0 大于 0,1,0,1 大于 0,0,0,1，所以最終<p>元素的文本顏色會是綠色，盡管#parent p選擇器看起來更具體地指向了目標<p>元素，但由于類選擇器組合的特異性更高，.container.highlight的樣式生效。

（六）利用優先級優化樣式表

在實際項目中，理解選擇器優先級有助于編寫更高效、更易維護的樣式表。

  1. 避免不必要的高特異性選擇器：雖然使用高特異性選擇器（如大量使用 ID 選擇器）可能在某些情況下能快速實現樣式效果，但這會使樣式表變得難以維護。因為高特異性選擇器會覆蓋其他低特異性選擇器的樣式，當需要修改樣式時，可能需要在多個地方調整高特異性選擇器，增加了出錯的可能性。例如，盡量避免在全局樣式表中使用類似#main-content #sidebar p這樣過于具體的選擇器，而是通過合理的類選擇器組合來實現相同效果，如.main-content.sidebar p，這樣在需要調整樣式時更具靈活性。
  2. 利用優先級實現樣式的局部與全局控制：可以巧妙地利用選擇器優先級來實現樣式的局部和全局控制。例如，在一個網站項目中，有一個全局的按鈕樣式：
button {background-color: lightblue;color: white;border: none;padding: 10px 20px;
}

而在某個特定的頁面區域（如一個模態框內），需要按鈕有不同的樣式：

.modal button {background-color: orange;
}

這里，.modal button選擇器的特異性高于單獨的button選擇器，所以在模態框內的按鈕會顯示橙色背景，而其他地方的按鈕仍保持淺藍色背景，實現了局部樣式對全局樣式的覆蓋，同時又不影響全局樣式在其他區域的應用。
3.?調試和排查樣式問題：當頁面出現樣式不符合預期的情況時，選擇器優先級知識是排查問題的關鍵。通過檢查不同選擇器的特異性以及樣式表的順序，可以快速定位到是哪些樣式規則相互沖突導致了問題。例如，如果一個元素的顏色沒有按照預期顯示，可能是因為某個高特異性選擇器的樣式覆蓋了原本期望的樣式，通過分析選擇器優先級就能找到并解決問題。

（七）未來發展趨勢對選擇器優先級的影響

隨著 CSS 的不斷發展，新的特性和選擇器可能會對選擇器優先級產生一定影響。例如，CSS 的一些新的布局模塊（如 CSS Grid 和 Flexbox）可能引入特定的選擇器或樣式規則，這些新規則在優先級計算中如何與現有的選擇器相互作用，需要開發者持續關注。同時，CSS 變量（Custom Properties）的廣泛應用也可能改變優先級的考量方式。雖然 CSS 變量本身并不直接影響選擇器優先級，但當變量在不同特異性的選擇器中被使用時，其解析和應用的順序可能會影響最終的樣式呈現。例如：

:root {--main-color: blue;
}
#special-section {--main-color: green;
}
p {color: var(--main-color);
}

在這個例子中，#special-section中定義的--main-color變量由于其所在選擇器的特異性較高，在該區域內會覆蓋:root中定義的變量值，從而影響p元素的顏色。隨著 CSS 的進一步發展，新的特性和語法可能會為選擇器優先級帶來更多的變化和挑戰，開發者需要不斷學習和適應這些變化，以更好地掌握和運用 CSS 樣式控制。

通過深入理解 CSS 選擇器的優先級，開發者能夠更加精確地控制網頁樣式，避免樣式沖突，優化樣式表結構，從而打造出風格統一、易于維護的高質量網頁。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/899925.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/899925.shtml
英文地址，請注明出處：http://en.pswp.cn/news/899925.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

GitHub與Gitee各是什么？它們的區別與聯系是什么？

GitHub與Gitee各是什么？它們的區別與聯系是什么？

李升偉 整理 GitHub 介紹 GitHub 是一個基于 Git 的代碼托管平臺&#xff0c;主要用于版本控制和協作開發。它支持多人協作&#xff0c;提供代碼托管、問題跟蹤、代碼審查、項目管理等功能。GitHub 是全球最大的開源社區&#xff0c;許多知名開源項目都在此托管。 主要功能&…
閱讀更多...
ESLint語法報錯

ESLint語法報錯

ESLint語法報錯 運行報錯 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file.解決方案 關閉eslint的語法檢測&#xff0c;在eslintrc.js文件中…
閱讀更多...
單例模式與線程安全

單例模式與線程安全

目錄 線程安全和重?問題 死鎖和活鎖 死鎖 死鎖四個必要條件 活鎖 STL,智能指針和線程安全 線程安全的單例模式 餓漢模式 懶漢模式 懶漢模式實現單例模式(線程安全版本) 餓漢模式實現單例模式 我們來學習單例模式與線程安全 線程安全和重?問題 線程安全&#xff…
閱讀更多...
Python+AI提示詞用貝葉斯樣條回歸擬合BSF方法分析櫻花花期數據模型構建跡圖、森林圖可視化

Python+AI提示詞用貝葉斯樣條回歸擬合BSF方法分析櫻花花期數據模型構建跡圖、森林圖可視化

原文鏈接&#xff1a;https://tecdat.cn/?p41308 在數據科學的領域中&#xff0c;我們常常會遇到需要處理復雜關系的數據。在眾多的數據分析方法中&#xff0c;樣條擬合是一種非常有效的處理數據非線性關系的手段。本專題合集圍繞如何使用PyMC軟件&#xff0c;對櫻花花期數據進…
閱讀更多...
WPF學習路線

WPF學習路線

WPF學習路線 學習準備學習技術棧學習路線 1-5&#xff08;1-2周&#xff09;6-8&#xff08;3-5周&#xff09; 學習準備 個人認為前端技術一般幾個關鍵字&#xff1a;元素資源 控制元素資源組合或者動態交互 數據交互呈現分析關鍵字得到的就是幾個方向 布局 樣式 組裝資源控件…
閱讀更多...
31天Python入門——第20天:魔法方法詳解

31天Python入門——第20天:魔法方法詳解

你好&#xff0c;我是安然無虞。 文章目錄 魔法方法1. __new__和__del__2. __repr__和__len__3. __enter__和__exit__4. 可迭代對象和迭代器5. 中括號[]數據操作6. __getattr__、__setattr__ 和 __delattr__7. 可調用的8. 運算符 魔法方法 魔法方法: Python中的魔法方法是一類…
閱讀更多...
棧 —— 數據結構基礎刷題路程

棧 —— 數據結構基礎刷題路程

一、P1739 表達式括號匹配 - 洛谷 算法代碼&#xff1a; #include<bits/stdc.h> using namespace std; const int N300008; struct mystack {int a[N];int t-1;//壓棧void push(int data){a[t]data; } //取棧頂元素int top(){return a[t]; } //彈出棧頂元素void pop(){i…
閱讀更多...
瑞昱RTD2556QR顯示器驅動芯片

瑞昱RTD2556QR顯示器驅動芯片

一、概述 RTD2556QR芯片是由Realtek公司精心研發的一款高性能顯示驅動芯片&#xff0c;專為滿足現代顯示設備對高分辨率、多功能接口及穩定性能的需求而設計。該芯片憑借其卓越的技術特性和廣泛的應用領域&#xff0c;在顯示驅動市場中占據重要地位。它集成了多種先進的功能模…
閱讀更多...
PyQt5和OpenCV車牌識別系統

PyQt5和OpenCV車牌識別系統

有需要請加文章底部Q哦 可遠程調試 PyQt5和OpenCV車牌識別系統 一 介紹 此車牌識別系統基于PyQt5和OpenCV開發&#xff0c;藍牌&#xff0c;新能源(綠牌)&#xff0c;黃牌&#xff0c;白牌均可以準確識別&#xff0c;支持中文識別&#xff0c;可以導出識別結果(Excel格式)。此…
閱讀更多...
學有所記- 探索FastAPI在docker上的部署

學有所記- 探索FastAPI在docker上的部署

目標&#xff1a; 學習怎樣在docker中安裝部署FastAPI&#xff0c;完成項目結構的搭建以及hello world的運行 背景&#xff1a; 公司內服務器資源有限&#xff0c;為了共享算力資源&#xff0c;同時又能隔離運行環境&#xff0c;因此采用了docker部署的方式&#xff0c;進行各…
閱讀更多...
HTTP keepalive 詳解

HTTP keepalive 詳解

一、簡介 HTTP協議早期版本&#xff0c;比如1.0&#xff0c;默認是不使用持久連接的&#xff0c;也就是每個請求/響應之后都會關閉TCP連接。這樣的話&#xff0c;每次請求都需要重新建立連接&#xff0c;增加了延遲和資源消耗。Keep-Alive的作用是保持連接&#xff0c;讓多個請…
閱讀更多...
長短期記憶神經網絡（LSTM）基礎學習與實例：預測序列的未來

長短期記憶神經網絡（LSTM）基礎學習與實例：預測序列的未來

目錄 1. 前言 2. LSTM的基本原理 2.1 LSTM基本結構 2.2 LSTM的計算過程 3. LSTM實例&#xff1a;預測序列的未來 3.1 數據準備 3.2 模型構建 3.3 模型訓練 3.4 模型預測 3.5 完整程序預測序列的未來 4. 總結 1. 前言 在深度學習領域&#xff0c;循環神經網絡&…
閱讀更多...
基于機器學習的三國時期諸葛亮北伐失敗因素量化分析

基于機器學習的三國時期諸葛亮北伐失敗因素量化分析

一、研究背景與方法論 1.1 歷史問題的數據化挑戰 三國時期&#xff08;220-280年&#xff09;的戰爭史存在史料分散、數據缺失的特點。本研究通過構建包含軍事、經濟、地理、政治四大維度的結構化數據庫&#xff0c;收錄建安十二年&#xff08;207年&#xff09;至建興十二年…
閱讀更多...
藍橋杯省模擬賽 數位和

藍橋杯省模擬賽 數位和

問題描述 只能被 1 和本身整除的數稱為質數。 請問在 1 &#xff08;含&#xff09;到 1000000 &#xff08;含&#xff09;中&#xff0c;有多少個質數的各個數位上的數字之和為 23 。 提示&#xff1a;599 就是這樣一個質數&#xff0c;各個數位上的數字之和為 59923 。 #…
閱讀更多...
Timer的底層實現原理？

Timer的底層實現原理？

Timer 是 Java 中用于定時任務調度的基礎工具類，其底層實現基于 單線程+任務隊列 的模型。以下是 Timer 的底層實現原理的詳細分析： 一、核心組件 TimerThread 繼承自 Thread，是 Timer 的工作線程，負責從隊列中提取任務并執行。通過 while (true) 循環持續檢查任務隊列。Ta…
閱讀更多...
Java 枚舉類 Key-Value 映射的幾種實現方式及最佳實踐

Java 枚舉類 Key-Value 映射的幾種實現方式及最佳實踐

Java 枚舉類 Key-Value 映射的幾種實現方式及最佳實踐 前言 在 Java 開發中&#xff0c;枚舉(Enum)是一種特殊的類&#xff0c;它能夠定義一組固定的常量。在實際應用中&#xff0c;我們經常需要為枚舉常量添加額外的屬性&#xff0c;并實現 key-value 的映射關系。本文將詳細…
閱讀更多...
青少年編程與數學 02-015 大學數學知識點 01課題、概要

青少年編程與數學 02-015 大學數學知識點 01課題、概要

青少年編程與數學 02-015 大學數學知識點 01課題、概要 一、線性代數二、概率論與數理統計三、微積分四、優化理論五、離散數學六、數值分析七、信息論 《青少年編程與數學》課程要求&#xff0c;在高中畢業前&#xff0c;盡量完成大部分大學數學知識的學習。一般可以通過線上課…
閱讀更多...
智能打印預約系統：微信小程序+SSM框架實戰項目

智能打印預約系統：微信小程序+SSM框架實戰項目

微信小程序打印室預約系統&#xff0c;采用SSM&#xff08;SpringSpringMVCMyBatis&#xff09;經典框架組合。 一、系統核心功能詳解 1. 智能化管理后臺 ?用戶數據看板?打印店資源管理?預約動態監控?服務評價系統 2. 微信小程序端 ?智能定位服務?預約時段選擇?文件…
閱讀更多...
DataX 3.0 實戰案例

DataX 3.0 實戰案例

第五章 實戰案例 5.1. 案例一 5.1.1. 案例介紹 MySQL數據庫中有兩張表&#xff1a;用戶表(users)&#xff0c;訂單表(orders)。其中用戶表中存儲的是所有的用戶的信息&#xff0c;訂單表中存儲的是所有的訂單的信息。表結構如下&#xff1a; 用戶表 users: id&#xff1a;用…
閱讀更多...
設計模式學習（1）

設計模式學習（1）

面向對象設計原則 單一職責 每個類只有一個職責&#xff0c;并被完整的封裝在類中&#xff0c;該原則用來控制類的粒度。 例如Mapper&#xff0c;controller都只負責一個業務。 開閉原則 應該對擴展開放&#xff0c;而對修改封閉&#xff0c;例如定義接口或是抽象類作為抽…
閱讀更多...
最新文章

Copyright @ 2022~2023