CSS之伪类选择器 伪元素

动态伪类选择器

	a:link {color: #FF0000}		/* 未访问的链接 */
	a:visited {color: #00FF00}	    /* 访问过的链接 */
	a:hover {color: #FF00FF}	    /* 鼠标移动到链接上 */
	a:active {color: #0000FF}	    /* 按住鼠标不动的时候 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

---

结构伪类选择器

:first-child 选择元素的第一个子元素

HTML

 	<div>
		<ul>
			<li>我是第一个li标签</li>
			<li>我是第二个li标签</li>
			<li>我是第三个li标签</li>
			<li>我是第四个li标签</li>
			<li>我是第五个li标签</li>
		</ul>
	</div>

CSS

div ul li:first-child{
		    color: red;
		}

效果图

• 我是第一个li标签
• 我是第二个li标签
• 我是第三个li标签
• 我是第四个li标签
• 我是最后一个li标签

• ---

  :last-child 选择元素的最后一个子元素

  CSS

  div ul li:last-child{
   		color: red;
   	}
  

  效果图

• 我是第一个li标签
• 我是第二个li标签
• 我是第三个li标签
• 我是第四个li标签
• 我是最后一个li标签

• ---

  :nth-child(n)选择其父元素的第n个子元素

  括号内可以写数字或者表达式，例如：n+1表示1至后所有标签，还可以写even(偶数) odd(奇数)…

  CSS

  div ul li:nth-child(3){
  			color: red;
  		}
  

  效果图

• 我是第一个li标签
• 我是第二个li标签
• 我是第三个li标签
• 我是第四个li标签
• 我是第五个li标签

• 注意如果在第一个<li></li>标签前面加一个其他标签 例如<p></p> 同样使用:nth-child()选择第三个标签时

  HTML代码

  <div>
  		<ul>
  			<p>我是p标签</p>
  			<li>我是第一个li标签</li>
  			<li>我是第二个li标签</li>
  			<li>我是第三个li标签</li>
  			<li>我是第四个li标签</li>
  			<li>我是第五个li标签</li>
  		</ul>
  	</div>
  

  效果图
  

  ---

  :nth-last-child()从最后一个子元素开始计数

  CSS

  div ul li:nth-last-child(3){
  			color: red;
  		}
  

  效果图
  

  ---

  :nth-of-type()指定元素匹配同类型的同级兄弟元素

  <div>
  		<ul>
  			<p>我是p标签</p>
  			<li>我是第一个li标签</li>
  			<li>我是第二个li标签</li>
  			<li>我是第三个li标签</li>
  			<li>我是第四个li标签</li>
  			<li>我是第五个li标签</li>
  		</ul>
  	</div>
  

  CSS

  div ul li:nth-of-type(2){
  			color: red;
  		}
  

  效果图
  

  即使加入了<p></p>之后，也可以很准确的找到第二个li标签

  ---

  :nth-last-of-type() 从最后一个元素开始计数

  <div>
  		<ul>
  			<p>我是p标签</p>
  			<li>我是第一个li标签</li>
  			<li>我是第二个li标签</li>
  			<li>我是第三个li标签</li>
  			<li>我是第四个li标签</li>
  			<li>我是第五个li标签</li>
  		</ul>
  	</div>
  

  CSS

  div ul li:nth-last-of-type(2){
  			color: red;
  		}
  

  效果图
  

  ---

  :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素

  和 :nth-of-type(1) 是一个意思。

  ---

  : last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素

  ---

  : only-child 匹配父元素中有且只有一个子元素的元素

  <div>
  		<ul>
  			<li>我是唯一的一个li标签</li>
  		</ul>
  </div>
  

  div ul li:only-child{
  			color: red;
  }
  

  效果图
  

  ---

  :empty

  HTML

  <div>
  		<ul>
  			<li></li>
  		</ul>
  	</div>
  

  CSS

  div ul li:empty{
  			color: red;
  		}
  

  只有当<li></li>里没有内容的时候才会选中

  伪元素

  :first-letter 向段落的第一个字符添加特殊样式

  <div class="demo">
  		伪元素伪元素伪元素伪元素伪元素伪元素
  		伪元素伪元素伪元素伪元素伪元素伪元素
  	</div>
  

  .demo{
  			width: 130px;
  			height: 110px;
  			border: 1px solid red;
  			padding: 10px;
  		}
  		.demo:first-letter{
  			font-size: 30px;
  			float: left;
  			color: red;
  		}
  

  效果图
  

  :first-line 向段落的第一个行添加特殊样式

  .demo{
  			width: 130px;
  			height: 110px;
  			border: 1px solid red;
  			padding: 10px;
  		}
  		.demo:first-letter{
  			font-size: 30px;
  			float: left;
  			color: red;
  		}
  		.demo:first-line{
  			background-color: yellow;
  		}
  

  效果图
  

  ::before 在元素的内容之前插入新内容

  在设置所插入内容的样式时，必须有content:'';属性

  ::after 在元素的内容之后插入新内容

  在设置所插入内容的样式时，必须有content:'';属性