css伪类_#aa div{-CSDN博客

本文链接：https://blog.csdn.net/wll_web/article/details/103418258

css伪类

1.链接伪类
2.表单伪类
3.动态伪类
4.结构性伪类

1.链接伪类

:link 表示作为超链接,并指向一个未访问的地址的所有锚。
:visited 表示作为超链接,并指向一个已访问的地址的所有锚。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a{text-decoration:none}
	a:link{color:red}
	a:visited{color:blue}
  </style>
 </head>
 <body>
  <a href="#aa">link1</a>
  <a href="#bb">link2</a>
  <a href="#cc">link3</a>
 </body>
</html>

页面效果：
链接访问
可以看见未访问的（:link）是红色，访问后的（:visited）变成蓝色。

注意：隐私与:visited选择器,只有(color,background-color,border-color)才能被应用到已访问的链接

:target 代表一个特殊的元素,他的id是URI的片段标识符。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a{text-decoration:none}
	#box{width:100px;height:100px;background:red}
	#box:target{width:200px;height:200px;background:blue}
  </style>
 </head>
 <body>
  <a href="#box">点击放大</a>
  <div id="box"></div>
 </body>
</html>

页面效果：
target绑定元素
可以看见，当我们点击链接的时候id为box的div长、宽、颜色都发生了变化。

注意：使用:target绑定链接和元素的时候，链接的片段标识符（#后面的信息）必须和被绑定元素的id值相等。

注意：link :visited :target是作用于链接元素的!

2.表单伪类

:enabled 匹配可编辑的表单。
:disabled 匹配被禁用的表单。
:checked 匹配被选中的表单。
:focus 匹配获得焦点的元素。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>表单伪类</title>
  <style>
	input{display:block;margin-top:20px}
	input:enabled{background:red}
	input:disabled{background:blue}
	input:focus{background:green}
	input:checked{width:50px;height:50px}
  </style>
 </head>
 <body>
  <input type="text" disabled="disabled">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="checkbox">
 </body>
</html>

页面效果：
表单伪类

3.动态伪类

:hover 表示鼠标悬浮到元素上。
:active 表示匹配被用户激活的元素(点击按住时)。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>动态伪类</title>
  <style>
    div:hover{background:red}
	div:active{background:blue}
	div{width:100px;height:100px;background:green}
  </style>
 </head>
 <body>
   <p>鼠标经过div变红,激活div变蓝</p>
   <div></div>
 </body>
</html>

页面效果：
动态伪类

注意：:hover :active基本可以用于所有的元素。

因此特别注意：由于a标签的:link和:visited可以覆盖了所有相同样式的a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上并且有一样的属性时 :link和:visited不能放在最后！！！

比如：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a{text-decoration:none}
	a:hover{color:green}
	a:link{color:red}
	a:visited{color:blue}
  </style>
 </head>
 <body>
  <a href="#a1">link1</a>
  <a href="#a2">link2</a>
  <a href="#a3">link3</a>
 </body>
</html>

页面效果：
链接元素注意事项
可以看见鼠标经过元素颜色并没有变绿，我们把a:hover{color:green}放在后面试试:

  <style>
    a{text-decoration:none}
	a:link{color:red}
	a:visited{color:blue}
	a:hover{color:green}
  </style>

页面效果：
链接元素注意事项改正
可以看见现在的效果才是正确的。

4.结构性伪类

结构性伪类一共分两种：
1.#box el:nth-child(index) 匹配#box中第index的子元素这个子元素必须是el.
2.#box el:nth-of-type(index) 匹配#box中第index的el子元素.
除此之外:nth-child和:nth-of-type有一个很重要的区别：
nth-of-type以元素为中心！！！
注意：在css中index是从1开始记数的，而不是从0开始。
index存在的变量只有n、even、odd3种。

:nth-child系列:
- :first-child{}（第一个元素）。
- :last-child{}（最后一个元素）。
- :nth-child(index) {}（顺数第index个元素）。
- :nth-last-child(index){}（倒数第index个元素）。
- :only-child{}（父元素存在唯一子元素）。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:0;padding:0}
	li{list-style:none}
	#aa li:last-child{border:1px solid red}
	#aa li:first-child{border:1px solid blue}
	#aa li:nth-child(3){border:1px solid green}
	#aa li:nth-last-child(3){border:1px solid black}
	#bb p:only-child{background:red}
  </style>
 </head>
 <body>
	<ul id="aa">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
	<ul id="bb">
		<p>123</p>
		<!-- <li></li> -->
	</ul>
 </body>
</html>

页面效果：
nth-child

:nth-of-type系列:
- :first-of-type{}（特定类型的第一个子元素）。
- :last-of-type{}（特定类型的最后一个子元素）。
- :nth-of-type(index){}（特定类型顺数的第index个子元素）。
- :nth-last-type(index){}（特定类型倒数的第index子元素）。
- :only-of-type{}（特定类型的元素只存在一个）。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	*{margin:0;padding:0;list-style:none}
	#aa li:nth-of-type(3){border:1px solid red}
	#aa li:nth-last-of-type(3){border:1px solid blue}
	#aa li:first-of-type{border:1px solid green}
	#aa li:last-of-type{border:1px solid yellow}
	#aa li:nth-of-type(even){color:red}
	#aa li:nth-of-type(odd){color:blue}
	#aa span:only-of-type{background:red}
	span{float:left;width:100px;height:100px}
  </style>
 </head>
 <body>
  <ul id="aa">
    <p>p1</p>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<p>p2</p>
	<span>span</span>
  </ul>
 </body>
</html>

页面效果：
nth-of-type

:not(selector)选择器匹配每个元素是不是指定的元素(选择器)。

selector为不执行样式的元素或者选择器。

:empty(内容必须是空的,有空格的都不行,有attr没关系)。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
	#aa div{border:1px solid;width:100%;height:100px;background:red}
	#aa div:empty{background:blue}
	#bb > .bb:not(:last-child){border:1px solid red}
	#bb > .bb:not(div){color:blue}
  </style>
 </head>
 <body>
  <p>empty:</p>
  <div id="aa">
	<div></div>
	<div>div1</div>
	<div></div>
	<div>div2</div>
  </div>
  <p>not:</p>
  <div id="bb">
	<div class="bb">div</div>
	<p class="bb">p</p>
	<span class="bb">span</span>
	<h3 class="bb">h3</h3>
	<h1 class="bb">h1</h1>
  </div>
 </body>
</html>

页面效果：
not empty