天天看點
傳回

css選擇器選擇器

選擇器

前言

靈活的使用選擇器可以美化html的格式，對于一些複雜的結構可以使用不同的選擇器的變換來選擇對應的元素，而不至于對每個元素添加id選擇器或class選擇器

基本選擇器

選擇器 例子 例子描述 執行個體
标簽選擇器 h1 選擇标簽h1元素

h1{background:red;}
id選擇器 #id_name 選擇id="id_name"的所有元素

#id_name{background:red;}
類選擇器 .class_name 選擇class="class_name"的所有元素

.class_name{background:red;}
後代選擇器 div span 選擇<div>下的所有<span>标簽

div span{color:red;}
分組選擇器 div,ul,h1 選擇<div>，<ul>，<h1>元素

div,ul,h1{margin:0px;margin:0px}
子類選擇器 選擇父元素為div>p <div>下的所有<p>标簽 div>p{color:red;}

屬性選擇器

選擇器 例子 例子描述
[attribute] [target] 選擇帶有 target 屬性所有元素
[attribute=value] [target=_blank] 選擇 target="_blank" 的所有元素
[attribute~=value] [title~=flower] 選擇 title 屬性包含單詞 “flower” 的所有元素
[attribute=|value] [lang|=en] 選擇 lang 屬性值以 “en” 開頭的所有元素

兄弟選擇器

兩種選擇器+ 和 ~
  • h1+p 選擇同一父元素下h緊接着的第一個p元素
  • h1~p 選擇同一父元素下h緊接着的所有p元素

僞類

1、根據相同父元素緊接着的所有标簽計數

  • :first-child: nth-child(1) 同一個父元素下的首個元素，如果不滿足則不選擇
  • :last-child: nth-child(count)同一父元素下的尾部元素
  • :nth-child(n): 同一父元素下的第n個元素 ，nth-child(2n)選擇奇數

2、根據相同父元素下的相同類型标簽計數

  • :first-of-type: nth-of-type(1) :同一父元素下被選元素的首個元素
  • :last-of-type: nth-of-type(count): 同一父元素下被選元素的尾部元素
  • :nth-of-type(n) :同一父元素下相同類型的标簽的第n個元素

4、事件類

選擇器 例子 例子描述
:link a:link 選擇所有未被通路的連結
:visited a:visited 選擇所有已被通路的連結
:active a:active 選擇活動連結
:hover a:hover 選擇滑鼠指針位于其上的連結
:focus input:focus 選擇獲得焦點的 input 元素

5、表單類

選擇器 例子 例子描述
:checked input:checked <input>元素中被選中狀态的元素
:disabled input:disabled <input>元素中禁用的元素
:enabled input:enabled <input>元素中啟用的元素

6、其他

  • :not : 除了被選擇的元素，選擇非第一個元素:not(:first-child)
  • * ：表示選擇所有元素

7、僞元素

  • ::after
  • ::before
  • ::selection 
<!DOCTYPE html>
<html>
<head>
<style>
/*文本被選中之後才能有效果*/
.first-text::selection{
	color:#ff0000;
}
/*在class="second-text"前面插入文本*/
.second-text::before{
	content:"這是before文本";
	color:blue;
}
/*在class="second-text"之後插入文本*/
.second-text::after{
	content:"這是after文本";
	color:yellow;
}
</style>
</head>
<body>
	<p class="first-text">這是第一段文本</p>
	<p class="second-text">這是第二段文本</p>
</body>
</html>

*注意

:first-child和:first-of-type的差別

first-child選擇同一父元素下第一個标簽，:first-of-type是同一父元素下被選擇元素的第一個元素 
<!--html代碼片段-->
<ul>
		<h1>title</h1>
		<li>1</li>
		<li>2</li>
		<li>3</li>
</ul>

ul li:first-child:沒有元素被選擇

ul li:first-of-type:1被選擇

感謝

選擇器教程

類選擇器:first-child和:first-of-type

css3 css
上一篇: CSS選擇器一、元素選擇器 二、id選擇器（#  id） 三、類選擇器（.  class） 四、屬性選擇器
下一篇: css3基礎筆記-選擇器

繼續閱讀