前端開發必須掌握的10個CSS選擇器

快捷目錄

對於任何網站而言，要讓用戶產生良好印象是什麼地方？…

是的……任何網站的用戶界面。每個開發人員都知道爲用戶創建美觀的設計以便與任何網站進行交互非常重要。

如果你不太瞭解CSS及其選擇器，那麼在最短的時間內巧妙地對網頁進行樣式設置並不是一件容易的事。

CSS選擇器針對HTML文檔中的指定元素，並幫助開發人員將樣式應用於網頁。

你可能具有一些基本的CSS選擇器知識，但是比基本知識有更多幫助，可以更快地實現目標。

使用正確的CSS選擇器可以最大程度地減少代碼量，使其更具可讀性，並使CSS將來更易於維護。

有各種各樣的CSS選擇器可用。讓我們討論一些重要的事情，以簡化前端開發中的工作。

一、元素或組選擇器

這是在CSS中使用的最基本的選擇器之一。元素選擇器允許您選擇所有具有相同指定元素名稱的元素併爲其指定樣式。

如果有多個具有相同樣式定義的元素，則可以將所有元素分組並將樣式應用於所有元素。

這樣，您就可以最小化代碼，因爲您不必爲每個元素使用類。

示例1：在這裏，頁面上的所有段落都將右對齊，文本顏色爲黃色

p {
	text-align: right;
	color: yellow;
}

示例2：現在，看下面的CSS代碼…

h2 {
	text-align: center;
	color: yellow;
}
h3 {
	text-align: center;
	color: yellow;
}
p{
	text-align: center;
	color: yellow;
}

您可以使用組選擇器最小化以上代碼，並編寫與以下相同的代碼：

h2, h3, p {
	text-align: center;
	color: yellow;
}

二、#id選擇器

id選擇器是CSS中另一個功能最強大的通用選擇器。使用＃符號後跟ID名稱，您可以按ID定位，並將樣式應用於具有選定ID的所有指定元素。

使用此選擇器聽起來很不錯，因爲它很簡單，但是請記住，id對於整個網頁應該是唯一的。這意味着您不允許爲多個元素分配ID選擇器。

如果你不分配唯一ID，則在處理JavaScript中的特定元素時會遇到問題。

另外，您的代碼將不會被W3C驗證，並且您將面臨跨不同瀏覽器的兼容性問題。

因此，與其創建許多#id的use類或其他用於樣式的邏輯，否則以後很難維護CSS。

例：

#box{
width : 250px;
height: 250px;
background : yellow;
}

三、.class選擇器

類選擇器是開發人員使用的最有用的通用選擇器。你可以使用句點（。）和類名來定義類選擇器。它爲具有指定類屬性的所有元素提供樣式。

它類似於id選擇器，但唯一的區別是，類選擇器允許您將頁面中的多個元素作爲目標。

您還可以在HTML元素上使用多個類（以空格分隔）。

範例1：

.center{
	text-align: center;
	color: yellow;
}

示例2：在下面的示例中，僅會影響類’center’的p個元素。

p.center {
	text-align: center;
	color: yellow;
}

四、屬性選擇器

使用屬性選擇器，你可以通過給定屬性的名稱或值選擇所有元素，然後對它們應用樣式。

示例1：下面是一個HTML行示例，該行具有“ rel”屬性，其值爲“ newfriend”

<h3 id="title" class="friend" rel="newfriend">David Walsh</h3>

讓我們看看如何在上一行中將屬性選擇器用於“ rel”屬性。

h3[rel="newfriend"] {
	color: yellow;
}

開發人員經常在代碼中使用“選擇器”複選框來使用此選擇器。閱讀下面給出的示例。

範例2：

input[type="checkbox"] {
	color: purple;
}

它也經常用於代碼中的定位標記。閱讀下面給出的示例。

範例3：

a[title] {
	color: red;
}

組合器：這些組合器用於通過使用選擇器之間的關係將樣式應用於html元素。

組合器使您可以混合簡單的選擇器並在它們之間應用邏輯。

讓我們討論CSS中的四個不同的組合器選擇器。

五、後代選擇器

後代選擇器僅將樣式應用於指定元素的後代。當你只需要爲某些特定元素應用樣式時，此選擇器非常有用。

例如，如果只定位“ h2”而不是定位所有“ h2”標記，而只定位“ div”標記的一部分，該怎麼辦？

在這些情況下，你可以使用後代選擇器。

範例1：

div h2 {
	background-color: green;
}

示例2：您還可以製作一個鏈並使用後代選擇器。

ol li a {
	background-color: green;
}

示例3：在下面的示例中，你可以將其與類選擇器混合使用。

.box a{
	color :green;
}

六、子選擇器

智利選擇器允許你選擇所有屬於指定元素的子元素。

範例1：子選擇器和子代選擇器之間的區別在於後者將僅選擇直接子代。

div > h1 {
	background-color: green;
}

範例2：

CSS：

span {
	background-color: white;
}
div > span {
	background-color: yellow;
}

HTML：

<div>
	<span>Span #1, in the div.
		<span>Span #2, in the span that's in the div.</span>
	</span>
</div>
<span>Span #3, not in the div at all.</span>

結果：

示例3：你有一個“ ul”，其中包含一些項，並且在這些項中，有新的“ ol”項，你可能只想爲較高層次的列表項選擇某種樣式，而不爲嵌套列表的項選擇某種樣式。

CSS：

ul > li {
	border-top: 5px solid red;
}

HTML：

<ul>
	<li>Unordered item</li>
	<li>Unordered item
		<ol>
			<li>Item 1</li>
			<li>Item 2</li>
		</ol>
	</li>
</ul>

結果：

七、相鄰和通用同級選擇器

相鄰的意思是“立即跟隨”。當你要選擇緊跟指定元素（相鄰的兄弟姐妹）的元素時，使用此選擇器。

換句話說，它選擇在層次結構相同級別上緊挨另一個元素的元素。

示例：在下面的示例中，選擇直接在’div’元素之後的p元素

CSS：

div + p {
	background-color: red;
}

HTML：

<div>
	<p>Paragraph 1 in the div.</p>
	<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

結果：

通用的同級選擇器（〜）不如相鄰的同級選擇器嚴格。它使你可以選擇作爲指定元素的同級的所有元素，即使它們並非直接相鄰。

示例：下面的示例選擇所有與“ div”元素同級的“ p”元素

CSS：

div ~ p {
	background-color: red;
}

HTML：

<p>Paragraph 1.</p>
<div>
	<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<span>GeeksforGeeks</span>
<p>Paragraph 4.</p>

結果：

八、星號選擇器*

它也被稱爲通用選擇器（*），它選擇文檔中的所有內容並將樣式應用於它們。

默認情況下，你的瀏覽器已經爲元素定義了樣式，當您想重置瀏覽器的默認樣式時，可以使用星形選擇器。

例如，你可以爲網頁的整個元素定義自己的樣式，而不是使用瀏覽器的默認樣式（例如邊距，填充，文本對齊或字體大小）。

範例1：

* {
	text-align: center;
	color: green;
	margin: 0;
	padding: 0;
	font-size: 30px;
	border: 0;
}

示例2：選擇

元素內的所有元素，並將其背景色設置爲紅色。

div * {
	background-color: red;
}

你是否注意到使用“ class”，“ element”或“ id”等其他選擇器時，它們已經暗示了星形選擇器？

h1 {
	...
}
is similar to 
*h1 {
	...
}

通常建議不要在代碼中使用*選擇器，或者僅將其用於測試目的，因爲它會給瀏覽器增加不必要的負擔。

九、僞類和僞元素

如果要基於指定元素的狀態設置元素的樣式，則可以使用僞類（ : )。

例如，當用戶將鼠標懸停在元素上時，或者當元素獲得焦點時，用戶訪問或懸停鏈接時，都可以在元素上應用樣式。

因此，此選擇器對於基於元素狀態應用樣式很有用。讓我們看一下語法和示例。

句法：

selector:pseudo-class {
	property:value;
}

示例1：閱讀下面的代碼，當用戶的指針懸停在按鈕上時更改按鈕的顏色

button:hover {
	color: green;
}

範例2：

a:link {
	color: red;
}
/* visited link */
a:visited {
	color: green;
}

範例3：

input[type=radio]:checked {
	border: 2px solid green;
}

僞元素（：:)允許你將樣式應用於選定元素的特定片段或片段。例如，設置元素的第一個字符或行的樣式。

句法：

selector::pseudo-element {
	property:value;
}

示例1 ：:: first-line可用於更改段落第一行的字體。

p::first-line {
	color: green;
	font-size: 1.2em;
	text-transform: uppercase;
}

示例2：僞元素也可以與CSS類結合使用。閱讀下面給出的示例

p.intro::first-letter {
	color: red;
	font-size: 1.2em;
	font-weight: bold;
}

示例3：僞元素也可以用於在元素內容之前或之後插入內容。閱讀下面給出的示例，該示例在每個“ h1”元素的內容之前插入一個圖像。

h1::before {
	content: url(abc.gif);
}

十、nth-type和nth-child

考慮一個有四個無序列表的情況。如果你只想在ul的第三項上應用CSS，並且沒有唯一的ID可供選擇，則可以使用nth-of-type（n）。

基本上：：nth-of-type選擇器允許您選擇作爲指定父元素的指定類型的第n個子元素的每個元素。

n可以是任何數字，關鍵字或公式，它們將指定元素在一組同級兄弟中的位置。

如果說起來聽起來仍然很複雜，那麼讓我們看一下這個例子。

示例1：在下面的示例中，第三個“ li”將受到：nth-of-type樣式的影響。

CSS：

li:nth-of-type(3) {
	color: red;
}

HTML：

<ul>
	<li>First item.</li>
	<li>Second item.</li>
	<li>Third item.</li>
	<li>Fourth item.</li>
</ul>

結果：

句法：

:nth-of-type(number) {
	css declarations;
}

：nth-child（n）選擇器匹配作爲父元素的第n個子元素的每個元素（無論類型如何）。

n可以是數字，關鍵字或公式，用於指定元素在一組同級兄弟中的位置。

範例1：

CSS：

p:nth-child(3) {
	background: yellow;
}

HTML：

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

結果：

範例2：

p:nth-child(2n) {
	background: yellow;
}

示例3：你還可以將多個nth-child鏈接在一起，以具有相同樣式的不同元素。

div:nth-of-type(4) p:nth-of-child(3) {
	color: red;
}

摘至開課吧前端團隊，閱讀後頗有收穫分享至此，希望對大家有所幫助~

前端開發必須掌握的10個CSS選擇器

快捷目錄

一、元素或組選擇器

二、#id選擇器

三、.class選擇器

四、屬性選擇器

五、後代選擇器

六、子選擇器

七、相鄰和通用同級選擇器

八、星號選擇器*

九、僞類和僞元素

十、nth-type和nth-child

60個非常實用的CSS代碼片段，推薦收藏

JavaScript常用API合集彙總（收藏起來）

前端，一種GUI軟件

40道+JavaScript基礎面試題（附答案）

js 從數組中隨機抽取幾個元素

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結