首页 > 代码库 > 第十三章 CSS选择器(下)

第十三章 CSS选择器(下)

 

13  CSS选择器[]

学习要点:

1.伪类选择器总汇

2.结构性伪类选择器

3.UI伪类选择器

4.动态伪类选择器

5.其他伪类选择器

 

本章主要探讨 HTML5  CSS选择器中的伪类选择器,和伪元素选择器一样,面向某种共同特征来选择元素。

一.伪类选择器总汇

伪类选择器分为四种类型:结构性伪类、UI伪类、动态伪类和其他伪类选择器

 

二.结构性伪类选择器

结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀(:)。

1.根元素选择器

:root  {

border:  1px  solid  red;

}

解释:匹配文档中的根元素,基本不怎么用,因为总是返回<html>元素。

2.子元素选择器

ul  >  li:first-child  {

color:  red;

}

解释:选择第一个子元素。

ul  >  li:last-child  {

color:  red;

}

解释:选择最后一个子元素。

ul  >  li:only-child  {

color:  red;

}

解释:选择只有一个子元素的那个子元素。

div  >  p:only-of-type  {

color:  red;

}

解释:选择只有一个指定类型的子元素的那个子元素。

3.:nth-child(n)系列

ul  >  li:nth-child(2)  {

color:  red;

}

 

 

 

解释:选择子元素的第二个元素。

ul  >  li:nth-last-child(2)  {

color:  red;

}

解释:选择子元素倒数第二个元素。

div  >  p:nth-of-type(2)  {

color:  red;

};

解释:选择特定子元素的第二个元素。

div  >  p:nth-last-of-type(2)  {

color:  red;

};

解释:选择特定子元素的倒数第二个元素。

二.UI伪类选择器

UI伪类选择器是根据元素的状态匹配元素。

1.:enabled

:enabled  {

border:  1px  solid  red;

}

解释:选择启用状态的元素。

2.:disabled

:disabled  {

border:  1px  solid  red;

}

解释:选择禁用状态的元素。

3.:checked

:checked  {

display:  none;

}

解释:选择勾选的 input元素。

4.:default

:default  {

display:  none;

}

解释:从一组类似的元素中选择默认元素。比如 input被勾选的即默认的。

5.:valid:invalid

 

 

 

input:valid  {

border:  1px  solid  blue;

}

input:invalid  {

border:  1px  solid  green;

}

解释:输入验证合法与不合法显示时选择的元素。

6.:required:optional

input:required  {

border:  1px  solid  blue;

}

input:optional  {

border:  1px  solid  green;

}

解释:根据是否具有 required属性选择元素。

三.动态伪类选择器

动态伪类选择器根据条件的改变匹配元素。

1.:link   visited

a:link  {

color:  red;

}

a:visited  {

color:  orange;

}

解释::link表示未访问过的超链接,:visited表示已访问过的超链接。

2.:hover

a:hover  {

color:  blue;

}

解释:表示鼠标悬停在超链接上。

3.:active

a:active  {

color:  green;

}

解释:表示鼠标按下激活超链接时。

4.:focus

input:focus  {

border:  1px  solid  red;

}

 

 

 

解释:表示获得焦点时。

四.其他伪类选择器

1.:not

a:not([href*="baidu"])  {

color:  red;

}

解释:否定选择器,反选。

2.:empty

:empty  {

display:  none;

}

解释:匹配没有任何内容的元素。

3.:lang

:lang(en)  {

color:  red;

}

解释:选择包含 lang属性,属性值前缀为  en的元素。和属性选择器匹配结果一致。

4.:target

:target  {

color:  red;

}

解释:定位到锚点时,选择此元素。

5.::selection

::selection  {

color:  red;

}

解释:这是一个伪元素选择器,当选择文字时触发选择。CSS3版本下的选择器。

  

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS选择器[下]</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css">
</head>
<body>

<ul>
<li>我是儿子</li>
<li>我是儿子</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>

<ul>
<li>我是儿子</li>
</ul>

<div>
<p>我是段落</p>
<span>我不是段落</span>
</div>

<div>
<p>我是段落</p>
<p>我是段落</p>
</div>

<form>
<input type="text" required>
<input type="email">

<input type="checkbox">
<input type="checkbox" checked>

<button>提交</button>

</form>

<a href="http://www.baidu.com">百度</a>
<a href="http://www.google.com">谷歌</a>
<a href="http://www.haosou.com">好搜</a>

<b>加粗</b>

<p lang="en-us">HTML5</p>

<b id="mytarget">加粗</b>

</body>
</html>

 

 

 

@charset "utf-8";

/*:root {
border: 1px solid red;
}*/

/*ul > li {
color: red;
}*/
/*ul > li:first-child {
color: red;
}*/
/*li:first-child {
color: red;
}*/
/*:first-child {
color: red;
}*/
/*伪类都需要加上前置选择器来限制范围*/
/*ul > li:last-child {
color: red;
}*/
/*ul > li:only-child {
color: red;
}*/
/*div > p:only-child {
color: red;
}*/
/*div > p:only-of-type {
color: red;
}*/
/*ul > li:nth-child(2) {
color: red;
}*/
/*ul > li:nth-last-child(2) {
color: red;
}*/
/*div > p:nth-of-type(2) {
color: red;
}*/
/*div > p:nth-last-of-type(1) {
color: red;
}*/
/*input:enabled {
border: 1px solid red;
}
input:disabled {
border: 1px solid blue;
}*/
/*input:checked {
display: none;
}*/
/*input:default {
display: none;
}*/
/*input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}*/
/*input:required {
border: 1px solid red;
}
input:optional {
border: 1px solid blue;
}*/
/*a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: orange;
}
a:active {
color: green;
}*/

/*input:focus {
border: 1px solid red;
}*/
/*a:not([href*="baidu"]) {
color: red;
}*/
/*p:empty {
display:none;
}*/
/*p:lang(en) {
color: red;
}*/
b:target {
color: red;
}
::selection {
color: red;
}

第十三章 CSS选择器(下)