第二章 CSS3 选择器，网页元素任意操作

A.选择器

1.选择器原理与标签选择器

Terms:.#*,>+

选择器	示例	描述
.class	.intro	选择 class="intro" 的所有元素
#id	#firstname	选择 id="firstname" 的所有元素
*	*	选择所有元素
element	p	选择所有 p 元素
element,element	div,p	选择所有 div 元素和所有 p 元素
element element	div p	选择 div 元素内部的所有 p 元素
element>element	div>p	选择父元素为 div 元素的所有 p 元素
element+element	div+p	选择紧接在 div 元素之后的所有 p 元素

css

* {
  text-decoration: none;
 color: #6c757d;
}
h1 {
 color: red;
}
h1,
h2 {
 color: red;
}
h1,
h2 {
 color: red;
}
h1,
h3 {
 background: #dcdcdc;
}

B.基本选择器

2.类与 ID 选择器使用场景

Terms:.类选择器，#ID 选择器

html

<style>
 .text-center {
  text-align: center;
 }
 #container {
  background: red;
 }
</style>

3.多类样式声明

C.结构选择器

4.结构选择器正确使用方法

Terms: div p,div>p,div+p,p~ul

名称	选择器	示例	描述
后代选择器	element element	div p	选择 div 元素内部的所有 p 元素
子元素选择器	element>element	div>p	选择父元素为 div 元素的所有 p 元素
紧邻兄弟元素	element+element	div+p	选择紧接在 div 元素之后的 p 元素
后面兄弟元素	element~element2	p~ul	选择 p 元素同级并在 p 元素后面的所有 ul 元素

D.属性选择器

5.属性选择器开始使用

Terms:[att],[att=value],[att~=value],[att|=value],[att*=value],[att^=value],[att$=value]

选择器	示例	描述
[attribute]	[target]	带有 target 属性所有元素
[attribute=value]	[target=_blank]	targe 属性等于"_blank" 的所有元素
[attribute~=value]	[title~=houdunren]	title 属性包含单词 "houdunren" 的所有元素
[attribute\|=value]	[title\|=hd]	title 属性值为 "hd"的单词，或 hd-cms 以-连接的的独立单词
[attribute*=value]	a[src*="hdcms"]	src 属性中包含 "hdcms" 字符的每个 a 元素
[attribute^=value]	a[src^="https"]	src 属性值以 "https" 开头的每个 a 元素
[attribute$=value]	a[src$=".jpeg"]	src 属性以 ".jpeg" 结尾的所有 a 元素

html

<style>
 h1[class][id] {
  color: red;
 }
</style>
<h1 class="container" id>houdunren.com</h1>

6.属性选择器内容值筛选

E.伪类选择器

7.入门伪类选择器

Terms: :link,:visited,:hover,:active,:focus

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即 html。
:empty	p:empty	选择没有子元素的每个 p 元素（包括文本节点）。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 p 元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p 元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个 p 元素的每个 p 元素
:last-of-type	p:last-of-type	选择属于其父元素的最后 p 元素的每个 p 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 p 元素的每个 p 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 p 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 p 元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数 p 元素。
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数 p 元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 p 元素的每个 p 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:not(selector)	:not(p)	选择非 p 元素的每个元素

html

<style>
 a:link {
  color: red;
 }

 a:visited {
  color: green;
 }

 a:hover {
  color: blue;
 }

 a:active {
  color: yellow;
 }
</style>

<a href="https://www.houdunren.com">hd</a>
<style>
 input:focus {
  background: green;
 }

 input:hover {
  background: blue;
 }

 input:active {
  background: yellow;
 }
</style>
<input type="text" />;

8.目标与根伪类及空元素的处理

Terms: :target,:root,:empty

html

<style>
 div {
  height: 900px;
 }

 div:target {
  color: red;
 }
</style>

<a href="#hdcms">hdcms</a>
<div></div>
<div id="hdcms">hdcms内容管理系统</div>

F.结构伪类

9.首尾元素伪类选择

Terms: :first-child,:last-child,:first-of-type,:last-of-type

10.伪类选择器唯一子元素

Terms: :only-of-type,:only-child

11 根据元素编号灵活选择

Terms: :nth-child(n),:nth-of-type(n),:nth-child(odd),:nth-child(even)

html

<style>
 table tr > td:nth-child(2n + 1) {
  background: green;
  color: white;
 }
</style>

<table border="1">
 <tr>
  <td>houdunren.com</td>
  <td>hdcms.com</td>
  <td>hd</td>
  <td>houdunwang.com</td>
  <td>hdcms</td>
 </tr>
</table>

css

table tr > td:nth-child(n + 3) {
 background: rgb(128, 35, 2);
 color: white;
}

css

table tr > td:nth-child(-n + 3) {
 background: rgb(128, 35, 2);
 color: white;
}

12 元素尾部伪类选择操作

Terms: :nth-last-child(n),:nth-last-of-type(n)

13NOT 排除选择器的妙用

Terms: :not(selector)

html

<style>
 ul li:not(:nth-child(1)) {
  background: red;
 }
</style>
<ul>
 <li>houdunren.com</li>
 <li>hdcms.com</li>
 <li>hd</li>
</ul>

G.表单伪类

14.通过表单伪类创建个性化单

Terms: :enabled,:disabled,:checked,:required,:optional,:valid,:invalid

选择器	示例	说明
:enabled	input:enabled	选择每个启用的 input 元素
:disabled	input:disabled	选择每个禁用的 input 元素
:checked	input:checked	选择每个被选中的 input 元素
:required	input:required	包含 required 属性的元素
:optional	input:optional	不包含 required 属性的元素
:valid	input:valid	验证通过的表单元素
:invalid	input:invalid	验证不通过的表单

html

<style>
 input:enabled {
  background: red;
 }
 input:disabled {
  background: #dddddd;
 }
 input:checked + label {
  color: green;
 }
</style>

<input type="text" disabled />
<input type="text" name="info" />

<input type="radio" name="sex" checked id="boy" />
<label for="boy">男</label>
<input type="radio" name="sex" checked id="girl" />
<label for="girl">女</label>

html

<style>
 input:required {
  border: solid 2px blue;
 }
 input:optional {
  background: #dcdcdc;
  border: none;
 }
</style>

<input type="text" name="title" required />
<input type="text" name="name" />

html

<style>
 input:valid {
  border: solid 1px green;
 }
 input:invalid {
  border: solid 1px red;
 }
</style>
<form>
 <input type="email" />
 <button>保存</button>
</form>

H.字符伪类

15.文本伪类操作技巧::first-letter,::first-line,::before,::after

状态	示例	说明
::first-letter	p:first-letter	选择每个 p 元素的首字母
::first-line	p:first-line	选择每个 p 元素的首行
::before	p:before	在每个 p 元素的内容之前插入内容
::after	p:after	在每个 p 元素的内容之后插入内容

html

<style>
 p::first-line {
  font-size: 20px;
 }
</style>

<p>hd不断更新视频教程</p>

html

<style>
 p::first-letter {
  font-size: 30px;
 }
</style>

<p>hd不断更新视频教程</p>

html

<style>
 span::before {
  content: "⇰";
  color: red;
 }
 span::after {
  content: "⟲";
  color: green;
 }
</style>

<span>hd</span>

html

<style>
 div {
  border: solid 1px #ddd;
  width: 150px;
 }
 div > input[type="text"] {
  border: none;
  outline: none;
 }
 div > input[type="text"] + span:after {
  content: "\21AA";
  font-size: 14px;
  cursor: pointer;
 }
</style>
<div><input type="text" /><span></span></div>

html

<style>
 h2::before {
  content: attr(title);
 }
</style>

<h2 title="hd">houdunren.com</h2>

第二章 CSS3 选择器，网页元素任意操作 ​

A.选择器 ​

1.选择器原理与标签选择器 ​

B.基本选择器 ​

2.类与 ID 选择器使用场景 ​

3.多类样式声明 ​

C.结构选择器 ​

4.结构选择器正确使用方法 ​

D.属性选择器 ​

5.属性选择器开始使用 ​

6.属性选择器内容值筛选 ​

E.伪类选择器 ​

7.入门伪类选择器 ​

8.目标与根伪类及空元素的处理 ​

F.结构伪类 ​

9.首尾元素伪类选择 ​

10.伪类选择器唯一子元素 ​

11 根据元素编号灵活选择 ​

12 元素尾部 伪类选择操作 ​

13NOT 排除选择器的妙用 ​

G.表单伪类 ​

14.通过表单伪类创建个性化单 ​

H.字符伪类 ​

15.文本伪类操作技巧::first-letter,::first-line,::before,::after ​

第二章 CSS3 选择器，网页元素任意操作

A.选择器

1.选择器原理与标签选择器

B.基本选择器

2.类与 ID 选择器使用场景

3.多类样式声明

C.结构选择器

4.结构选择器正确使用方法

D.属性选择器

5.属性选择器开始使用

6.属性选择器内容值筛选

E.伪类选择器

7.入门伪类选择器

8.目标与根伪类及空元素的处理

F.结构伪类

9.首尾元素伪类选择

10.伪类选择器唯一子元素

11 根据元素编号灵活选择

12 元素尾部伪类选择操作

13NOT 排除选择器的妙用

G.表单伪类

14.通过表单伪类创建个性化单

H.字符伪类

15.文本伪类操作技巧::first-letter,::first-line,::before,::after