前端基础学习之css3 新增选择器(:nth-child(n)/:[attribute^=value]/::before...)

一、结构(位置)伪类选择器

:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第 N 个子元素，不论元素的类型 n可以是数字、关键词、公式
nth-last-child(n) 选择其父元素的第n个子元素，从最后一个子元素开始计数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul li:first-child{ /*选择li的父级ul下面的第一个child且为li标签*/
			background-color: yellow;
		}
		ul li:last-child{ /*选择li的父级ul下面的最后一个child且为li标签*/
			background-color: pink;
		}
		ul li:nth-child(2){ /*选择li的父级ul下面的第二个child且为li标签*/
			background-color: green;
		}
		li:nth-child(even){  /*选择li的父级ul下面的所有偶数child且为li标签 */
             background-color: skyblue;
		}
		li:nth-child(odd){ /* 选择li的父级ul下面的所有奇数child且为li标签 */
             background-color: purple;
		}
		ul li:nth-child(2n){ /*n=0开始 0 1 2 3 4 5...  2n= 0 2 4 6 8 10... 类似于even选择偶数child*/
			 background-color: skyblue;
		}
		ul li:nth-child(2n+1){  /*n=0开始 0 1 2 3 4 5...  2n= 1 3 5 7 9 11... 类似于odd选择奇数child*/
			 background-color: purple;
		}
		ul li:nth-child(4n){  /*选择4的倍数 4 8 12*/
			background-color: skyblue;
		}
		ul li p:nth-child(2){ /* 选择p的父级li下面的第二个child且child为p元素 */
			background-color: blue;
		}
		ul li p:nth-child(1){ /* 选择p的父级li下面的第1个child且child为p元素 会发现这个样式无效，因为p的父级li下面的第一个元素是h4 */
			background-color: blue;
		}
		ol li:nth-last-child(3){ /*选择其父元素的第3个子元素的每个 li 元素，从最后一个子元素开始计数*/
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<ul>
		<li>周一</li>
		<li>周二</li>
		<li>周三</li>
		<li>周四</li>
		<li>周五</li>
		<li>周六</li>
		<li>周日</li>
		<li>
		    <h4>嘿嘿嘿</h4>
			<p>111</p>
			<p>222</p>
			<p>333</p>
			<p>444</p>
		</li>
	</ul>

	<ol>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
	</ol>
</body>
</html>

二、属性选择器

:[attribute^=value] 例如：div[class^=cute] – 选择所有class以cute开头的元素
:[attribute$=value] 例如：div[class $ =cute] – 选择所有class以cute结尾的元素
:[attribute*=value] 例如：div[class*=small] 选择所有class中包含small的元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div[class] { /*选择所有带有class属性的元素*/
			background-color: skyblue;
		}
		div[class=cute] { /*选择所有class=cute的元素*/
			background-color: skyblue;
		}
		div[class^=cute] { /*选择所有class以cute开头的元素*/
			background-color: skyblue;
		}
		div[class$=cute] { /*选择所有class以cute结尾的元素*/
			background-color: pink;
		}
		div[class*=small] { /*选择所有class只有包含small的元素*/
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="cute">博美</div>
	<div class="small1">柯基</div>
	<div class="tdsmall">泰迪</div>
	<div class="cute2">比熊</div>
	<div>八哥</div>
	<div>贵宾犬</div>
	<div>雪纳瑞</div>
	<div class="cute3">萨摩耶</div>
	<div>哈士奇</div>
	<div class="jwwcute">吉娃娃</div>
	<div>马尔济斯</div>
</body>
</html>

三、伪元素选择器

::first-letter 选择第一个字
::first-line 选择第一行
::selection 选中文本
::before 在元素内部的开始位置创建一个元素，该元素为行内元素，且必须要结合content属性使用
::after 在元素内部的j结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p::first-letter{/* 选择第一个字*/
		font-size: 60px;
	}
	p::first-line{ /*选择第一行*/
		color: #666
	}
	p::selection{ /* 改变选中文本样式 */
		background-color: yellow;
		color: orange
	}
	div::before{ /* 必须带有content属性  其实before是一个行内盒子 可以转换块级、行内块*/
		content: '无关书:';
		/*width: 200px;
		height: 200px;
		background-color: skyblue;
		display: block;*/
	}
	div:after{
		content: "。"
	}
	</style>
</head>
<body>
	<div>春歌</div>
	<p>春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。春有百花秋有月，夏有凉风冬有雪。如无闲事挂心头，便是人间好时节。</p>
</body>
</html>

前端基础学习之css3 新增选择器(:nth-child(n)/:[attribute^=value]/::before...)

一、结构(位置)伪类选择器

二、属性选择器

三、伪元素选择器

猜你喜欢