CSS3基础知识点---新增选择器

最新推荐文章于 2024-07-05 14:58:07 发布

翻滚吧阿俊~~

最新推荐文章于 2024-07-05 14:58:07 发布

阅读量5.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40283570/article/details/94005967

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

一、CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素（2n 和2n-1可设置偶数行和奇数行）

2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.iteam1 li,.iteam2 li{
			background-color: gray;
			margin-top: 10px;
		}

		/*匹配元素类型为li且是父元素ul的第2个子元素*/
		.iteam1 li:nth-child(2){
			background-color: red;
		}
		/*匹配元素类型为li且是父元素ul的倒数第2个子元素*/
		.iteam1 li:nth-last-child(2){
			background-color: green;
		}
		/*匹配元素类型为li且是父元素ul的第1个子元素*/
		.iteam1 li:first-child{
			background-color: blue;
		}
		/*匹配元素类型为li且是父元素ul的最后1个子元素*/
		.iteam1 li:last-child{
			background-color: orange;
		}
		/*偶数行*/
		.iteam2 li:nth-child(2n){
			background-color: green;
		}
		/*奇数行*/
		.iteam2 li:nth-child(2n-1){
			background-color: yellow;
		}
		
	</style>
</head>
<body>
	<ul class="iteam1">
		<li>哈哈</li>
		<li>哈哈</li>
		<li>哈哈</li>
		<li>哈哈</li>
		<li>哈哈</li>
		<li>哈哈</li>
	</ul>

	<ul class="iteam2">
		<li>haha</li>
		<li>haha</li>
		<li>haha</li>
		<li>haha</li>
		<li>haha</li>
		<li>haha</li>
	</ul>
</body>
</html>

5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素

xxx-child和xxx-of-type是可以对应的，一般父元素内的子元素都是一样的时候用child比较好理解，子元素包含不同元素时用-of-type。

特别注意only-child 和only-of-type，下面有例子说明。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.box1 div,.box2 div,p{
			width: 100px;
			height: 50px;
			background-color: gray;
			font:18px/50px 'Microsoft Yahei';
			text-align: center;
			margin-top: 10px;
		}
		/*匹配元素类型为E且是父元素中唯一的子元素,这个元素在父级子是唯一存在，没有其他元素,如果父级中有其他类型元素则不生效*/
		p:only-child{
			background-color: red;
		}
		.box1 p:only-child{
			background-color: red;
		}
		/*E:only-of-type：匹配父元素中唯一子元素是E的子元素，如果不唯一则不生效，可以允许有其他元素*/
		.box1 p:only-of-type{
			background-color: pink;
		}

		/*第四个子元素，而且该子元素的类型是div时则匹配,这个发现第四个元素不是div 则不匹配*/
       .box1 div:ntf-child(4){
            background-color: yellow;
       }
       /*父级下面第四个div元素，碰到不同的元素跳过,一直要数到第四个div元素*/
       .box1 div:nth-of-type(4){
            background-color: orange;
       }
	</style>
</head>
<body>
	<p>外部</p>
	<div class="box1">
		<div>hello</div>
		<div>hello</div>
		<div>hello</div>
		<p>world</p>
		<!-- <p>sky</p> -->
		<div>hello</div>
		<div>hello</div>
		<div>hello</div>
	</div>
	<div class="box2">
		<p>world</p>
	</div>
</body>
</html>

1、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素

/*input 用属性选择器选择时type的值不要带引号*/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		div{
			height: 50px;
			margin-top: 10px;
		}
		div:empty{
			background-color: yellow;
		}
		.box:empty{
			background-color: green;
		}
		/*注意not后面括号的冒号*/
		.list li:not(:nth-child(2)){
			background-color: red;
		}
		.list li:not(:empty){
			background-color: blue;
		}
	</style>
</head>
<body>
	<div></div>
	<div class="box"></div>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li></li>
		<li>5</li>
	</ul>
</body>
</html>

16、E:target 对应锚点的样式

<style type="text/css">
    h2:target{
        color:red;
    }
</style>
......
<a href="#tit01">标题一</a>
......
<h2 id="tit01">标题一</h2>

<!-- 点击链接，h2标题变红 -->

17、E > F E元素下面第一层子集
18、E ~ F E元素后面的兄弟元素
19、E + F 紧挨着的兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		input:disabled{
			background-color: red;
		}

		input:enabled{
			background-color: green;
		}

		input:checked + label{
			color: red
		}
        .box{
        	width: 150px;
        	height: 30px;
        	background-color: gold;
        	display: none;
        }
		input:checked +div{
            display: inline-block;
		}
	</style>
</head>
<body>
	<input type="text" name disabled>
	<input type="text">
	<br>
	<input type="checkbox" name=""><label>这是一个label</label>
	<br>
	<input type="checkbox" name="" checked="checked"><div class="box">这是一个div元素</div>
</body>
</html>

属性选择器：
1、E[data-attr] 含有data-attr属性的元素

提示：任何属性都可以使用这些选择器。

为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
img[alt] {border: 5px solid red;}

属性与属性值必须完全匹配
请注意，这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

<p class="important warning">This paragraph is a very important warning.</p>
p[class="important warning"] {color: red;}

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">这是一个div元素</div>

<!-- 点击链接，h2标题变红 -->

2、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”
3、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”
4、E[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”
5、E[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		 /*input 用属性选择器选择时type的值不要带引号*/
		 input[type=text] {
    			width: 140px;
    			/*outline: none;*/
				}
	</style>
</head>
<body>
	<label for="">姓名</label>
	<input type="text" name="" id="">
	<label for="">密码</label>
	<input type="password" name="" id="">
</body>
</html>

翻滚吧阿俊~~

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础知识点---新增选择器

一、CSS3新增选择器1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素（2n 和2n-1可设置偶数行和奇数行）2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）3、E:first-child：匹配元素类型为E且是父元素的第一个子元素4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素...
复制链接

扫一扫

专栏目录