当前位置： 移动技术网 > IT编程>网页制作>CSS > 荐 CSS3——CSS3 新增选择器

荐 CSS3——CSS3 新增选择器

2020年07月17日  | 移动技术网IT编程  | 我要评论

天空之外

结构(位置)伪类选择器（CSS3)

  • :first-child :选取属于其父元素的首个子元素的指定选择器
  • :last-child :选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
  • :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
  • n 可以是数字、关键词或公式
li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}

案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*a:hover  鼠标经过a链接的时候 */
	ul li {
		list-style: none;
	}
	ul li:first-child {
		background-color: pink;
	}
	ul li:last-child {
		background-color: pink;
	}
	li:nth-child(3) {  /*选择第3个 */
		background-color: purple;
	}

	li:nth-child(even) {  /* even 选择所有的偶数*/
		background-color: pink;
	}
	li:nth-child(odd) { /*  odd 选择所有的奇数*/
		background-color: purple;
	}

	li:nth-child(2n) { /* n = 0  1  2 3 4 5   2n   0 2 4 6 8 10...开始 2n 类似于even*/
		background-color: pink;
	}
	

    li:nth-child(2n+1) {  /*奇数  odd*/
    	background-color: pink;
    }

	li:nth-child(4n) {  /* 4.8.12 */
		background-color: blue;
	}
	</style>
</head>
<body>
	<ul>
		<li>我的错热风</li>
		<li>我的错热风</li>
		<li>我的错热风</li>
		<li>我的错热风</li>
		<li>爱上对方过后就哭了</li>
		<li>爱上对方过后就哭了</li>
		<li>爱上对方过后就哭了</li>
		<li>爱上对方过后就哭了</li>
		<li>爱上对方过后就哭了</li>
	</ul>
</body>
</html>

属性选择器

（其中有正则的知识，在这先了解怎么用就行了，后面的文章会学）
选取标签带有某些特殊属性的选择器 我们成为属性选择器

  • class^=font 表示 font 开始位置就行了
  • class$=footer 表示 footer 结束位置就行了
  • class*=tao *= 表示tao 在任意位置都可以
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
			color: pink;
		}
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
			color: skyblue;
		}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
		}

案例

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div[class] {  /*选出所有 带有 class 属性的*/
		background-color: pink;
	  }
	  div[class=demo] { /* 选出 class = demo 的*/
		background-color: yellow;
	  }

	  div[class^=test] {  /*选出test 开头的 标签*/
	  	background-color: purple;
	  }
	  div[class$=test] {  /*选出test 结束的 标签  ^    $  */
	  	background-color: red;
	  }

	</style>
</head>
<body>
	<div class="demo">属性选择器例子</div>
	<div>属性选择器例子</div>
	<div>属性选择器例子</div>
	<div>属性选择器例子</div>
	<div>属性选择器例子</div>
	<div>属性选择器例子</div>
	<div class="firsttest">属性选择器例子</div>
	<div class="test">属性选择器例子</div>
	<div class="test1">属性选择器例子</div>
	<div class="test2">属性选择器例子</div>
	<div class="test3">属性选择器例子</div>

</body>
</html>

伪元素选择器（CSS3)

  1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
  2. E::first-line 文本第一行；
  3. E::selection 可改变选中文本的样式；
p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

4. E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

案例

在这里插入图片描述
代码分析
在这里插入图片描述
源代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div::before {  /*必须带一个属性  content 伪元素 其实这个 before 是个盒子*/
		/* 这个盒子是行内的盒子  可以转换*/
		content: "我";
		width: 200px;
		height: 200px;
		background-color: pink;
		display: block;
	}
	div::after {
		content: "18岁";
	}
	</style>
</head>
<body>
	<div>今年</div>
</body>
</html>

: 伪类与 :: 伪元素

“:” 与 “::” 区别在于区分伪类和伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意

伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p::first-letter { /* 选择第一个字*/
		font-size: 100px;
	}
	.pp::first-line {  /*第一行*/
		color: red;
	}
	p::selection {  /*选择文字时候的状态*/
		background-color: pink;
		color: yellow;
	}
	</style>
</head>
<body>
	<p class="pp">
		中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 
	</p>
	<p>
	p北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!</p>
</body>
</html>

本文地址：https://blog.csdn.net/weixin_45525272/article/details/107351837

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网