特殊选择器

伪类选择器：不改变任何DOM内容。只是插⼊了⼀些修饰类的元素

 :first-child {} //第⼀项
:last-child {} //最后⼀项
:nth-child(n) {} //第n项
:nth-child(2n+1){} //奇数项
:nth-child(2n) {} //偶数项
:not() //否定伪类 除了第n项
a:link {color:#FF0000;} /*未访问的链接*/
a:visited {color:#00FF00;} /*已访问的链接*/
a:hover {color:#FF00FF;} /*⿏标悬浮后的链接*/
a:active {color:#0000FF;} /*已选中的链接*/

伪元素选择器

 ::first-letter //第⼀个
::first-line //第⼀⾏ 只能⽤于块级元素
::selection //选中
::before //在开始位置
::after //在结束位置

代码案例

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .yi {
      color: red;
    }
 
    /* li:first-child{
      color: red;
    }
    li:last-child{
      color: blue;
    }
    li:nth-child(1){
      color: green;
    } */
    /* li:nth-child(2n+1) {
      color: pink
    }
    li:nth-child(2n){
      color:yellow
    } */
    li:not(:nth-child(4)) {
      color: red;
    }
 
    a:link {
      color: red;
    }
 
    a:visited {
      color: green;
    }
 
    a:hover {
      color: pink;
    }
 
    a:active {
      color: yellow;
    }
 
    .text::first-letter {
      color: red;
    }
 
    .text::first-line {
      color: red;
    }
    .text::selection {
      color: green;
    }
    .text::before {
      content:'小滴课堂'
    }
    .text::after {
      content:'小滴课堂'
    }
 
    /* span::first-line{
      color: red;
    } */
  </style>
</head>
 
<body>
  <ul>
    <li>前端</li>
    <li>后端</li>
    <li>测试</li>
    <li>大数据</li>
    <li>课程</li>
    <li>小滴</li>
 
    <a href="https://xdclass.net">小滴课堂</a>
 
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aperiam error veritatis omnis? Labore dolor,
      reiciendis atque non natus vero tenetur iste sit alias id quasi nesciunt aspernatur cupiditate repudiandae,
      temporibus ex. Qui voluptate asperiores assumenda quisquam natus nobis quis mollitia vitae totam. Dolorum
      distinctio facere expedita error maiores fugit. Laboriosam error enim saepe. Accusamus voluptatem repellendus
      debitis quod magni fugit autem dignissimos doloremque, consequuntur ratione dolorem veniam quis recusandae dolores
      dolor sint sapiente voluptate architecto. Corrupti nam eos ipsa? Illum dolore nostrum nisi laboriosam nihil earum
      quos eveniet veniam adipisci ea aspernatur cumque beatae eius laborum repellat, nam impedit, provident quis! Quo,
      quasi corrupti. Sapiente doloremque consequatur corrupti labore vel consectetur sunt dolorum modi, perferendis,
      quidem earum veritatis ipsa eveniet architecto obcaecati ea nostrum repudiandae? Explicabo tenetur asperiores
      itaque quas, sint fugiat ratione, alias nobis praesentium accusantium possimus? Veritatis, asperiores quae nam
      nostrum inventore cum repellendus officiis laudantium corrupti, sit doloribus dolor eligendi dolores maiores
      assumenda, molestiae dolorum. Dolore praesentium amet voluptas optio ex iusto delectus quam, quis aut eaque
      explicabo est debitis at quas harum fuga a minus iste facilis? Officia, corrupti commodi! Deleniti sunt fugit quae
      nulla harum labore repellendus. Qui, est ipsa. Sunt consequuntur quibusdam accusamus.
    </div>
    <br>
    <span>
      sit doloribus dolor eligendi dolores maiores
      assumenda, molestiae dolorum. Dolore praesentium amet voluptas optio ex iusto delectus quam, quis aut eaque
      explicabo est debitis at quas harum fuga a minus iste facilis? Officia, corrupti commodi! Deleniti sunt fugit quae
      nulla harum labore repellendus. Qui, est ipsa. Sunt consequuntur quibusdam accusamus.
    </span>
  </ul>
</body>
 
</html>

posted @ 2022-08-31 06:56 DogLeftover 阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 超链接a标签和路径

· 区块标签和⾏内标签

· 选择器和伪元素

· 三、伪类选择器

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

历史上的今天：
2021-08-31 vue开发：前端项目模板

特殊选择器

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	:first-child {} //第⼀项
	:last-child {} //最后⼀项
	:nth-child(n) {} //第n项
	:nth-child(2n+1){} //奇数项
	:nth-child(2n) {} //偶数项
	:not() //否定伪类除了第n项
	a:link {color:#FF0000;} /未访问的链接/
	a:visited {color:#00FF00;} /已访问的链接/
	a:hover {color:#FF00FF;} /⿏标悬浮后的链接/
	a:active {color:#0000FF;} /已选中的链接/

	::first-letter //第⼀个
	::first-line //第⼀⾏只能⽤于块级元素
	::selection //选中
	::before //在开始位置
	::after //在结束位置

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.yi {
	color: red;
	}

	/* li:first-child{
	color: red;
	}
	li:last-child{
	color: blue;
	}
	li:nth-child(1){
	color: green;
	} */
	/* li:nth-child(2n+1) {
	color: pink
	}
	li:nth-child(2n){
	color:yellow
	} */
	li:not(:nth-child(4)) {
	color: red;
	}

	a:link {
	color: red;
	}

	a:visited {
	color: green;
	}

	a:hover {
	color: pink;
	}

	a:active {
	color: yellow;
	}

	.text::first-letter {
	color: red;
	}

	.text::first-line {
	color: red;
	}
	.text::selection {
	color: green;
	}
	.text::before {
	content:'小滴课堂'
	}
	.text::after {
	content:'小滴课堂'
	}

	/* span::first-line{
	color: red;
	} */
	</style>
	</head>

	<body>
	<ul>
	<li>前端</li>
	<li>后端</li>
	<li>测试</li>
	<li>大数据</li>
	<li>课程</li>
	<li>小滴</li>

	<a href="https://xdclass.net">小滴课堂</a>

	<div class="text">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aperiam error veritatis omnis? Labore dolor,
	reiciendis atque non natus vero tenetur iste sit alias id quasi nesciunt aspernatur cupiditate repudiandae,
	temporibus ex. Qui voluptate asperiores assumenda quisquam natus nobis quis mollitia vitae totam. Dolorum
	distinctio facere expedita error maiores fugit. Laboriosam error enim saepe. Accusamus voluptatem repellendus
	debitis quod magni fugit autem dignissimos doloremque, consequuntur ratione dolorem veniam quis recusandae dolores
	dolor sint sapiente voluptate architecto. Corrupti nam eos ipsa? Illum dolore nostrum nisi laboriosam nihil earum
	quos eveniet veniam adipisci ea aspernatur cumque beatae eius laborum repellat, nam impedit, provident quis! Quo,
	quasi corrupti. Sapiente doloremque consequatur corrupti labore vel consectetur sunt dolorum modi, perferendis,
	quidem earum veritatis ipsa eveniet architecto obcaecati ea nostrum repudiandae? Explicabo tenetur asperiores
	itaque quas, sint fugiat ratione, alias nobis praesentium accusantium possimus? Veritatis, asperiores quae nam
	nostrum inventore cum repellendus officiis laudantium corrupti, sit doloribus dolor eligendi dolores maiores
	assumenda, molestiae dolorum. Dolore praesentium amet voluptas optio ex iusto delectus quam, quis aut eaque
	explicabo est debitis at quas harum fuga a minus iste facilis? Officia, corrupti commodi! Deleniti sunt fugit quae
	nulla harum labore repellendus. Qui, est ipsa. Sunt consequuntur quibusdam accusamus.
	</div>
	<br>
	<span>
	sit doloribus dolor eligendi dolores maiores
	assumenda, molestiae dolorum. Dolore praesentium amet voluptas optio ex iusto delectus quam, quis aut eaque
	explicabo est debitis at quas harum fuga a minus iste facilis? Officia, corrupti commodi! Deleniti sunt fugit quae
	nulla harum labore repellendus. Qui, est ipsa. Sunt consequuntur quibusdam accusamus.
	</span>
	</ul>
	</body>

	</html>