CSS中的常用选择器详解

最新推荐文章于 2022-11-21 21:18:46 发布

百香果果ccc

最新推荐文章于 2022-11-21 21:18:46 发布

阅读量187

点赞数 1

分类专栏： CSS 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/wytccc/article/details/127144959

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

命名规范：由数字、字母、下划线、中划线组成，且开头不能是数字

ID选择器
【唯一，重复出现不符合规范】

<style>
	#box1 {width: 100px; height: 100px; border: 1px solid red;}
	#box2 {width: 200px; height: 200px; border: 1px solid red;}
</style>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>

class类别选择器
【不唯一，代表一类元素】

<style>
	.box {width: 100px; height: 100px; border: 1px solid red;}
</style>
<body>
	<div class="box">1</div>
	<p class="box">2</p>
</body>

标签选择器
【通过标签名来选择元素】

<style>
	div {width: 100px; height: 100px; border: 1px solid red;}
	p {line-height: 30px;}
</style>
<body>
	<div>1</div>
	<p>2</p>
</body>

分组选择器
【通过逗号分割，给不同的选择器添加相同的样式】

<style>
	div, .title, #p1 {
		font-size: 30px;
	}
</style>
<body>
	<div>这是一个块</div>
	<h2 class="title">这是一个二级标题</h2>
	<p id="p1">这是一个段落</p>
</body>

通配选择器
【作用于所有的元素，用于重置样式】
```
* {
	margin: 0;
	padding: 0;
 }
```

层次选择器
① M N：后代，获取M中所有的孩子N
② M > N：父子，获取M的儿子N

<style>
	/*后代，获取到的元素为a、b、c、d、e、f、g*/
	#list li {}
	/*父子，获取到的元素为a、b、c、d*/
	#list > li {}
</style>
<body>
	<ul id="list">
		<li id="a">
			<ol>
				<li id="e"></li>
				<li id="f"></li>
				<li id="g"></li>
			</ol>
		</li>
		<li id="b"></li>
		<li id="c"></li>
		<li id="d"></li>
	</ul>
</body>

③ M ~ N：兄弟，获取M下面所有与M同级的兄弟N
④ M + N：相邻，获取M下面相邻且与M同级的兄弟N（必须挨着才算）

<style>
 /*兄弟，获取到的元素为p1、p2、p3*/
 div ~ p {}
 /*相邻，获取到的元素为p1*/
 div + p {}
</style>
<body>
	<p id="p0">段落0</p>
	<div>块元素</div>
	<p id="p1">段落1</p>
	<p id="p2">段落2</p>
	<h2>标题</h2>
	<p id="p3">段落3</p>
</body>

属性选择器
① 属性名匹配
② 完全匹配：=
③ 部分匹配：*=
④ 起始匹配：^=
⑤ 结束匹配：$=
⑥ 组合匹配: [ ][ ][ ]

<style>
	/*属性名匹配，匹配到的元素有块2、块3、块4*/
	div[class] {}
	/*完全匹配，匹配到的元素有块3*/
	div[class="div-container"] {}
	/*部分匹配，匹配到的元素有块2、块3、块4*/
	div[class*=container] {}
	/*起始匹配，匹配到的元素有块2、块4*/
	div[class^=container] {}
	/*结束匹配，匹配到的元素有块2、块3*/
	div[class$=container] {}
	/*组合匹配，匹配到的元素有块1、块2*/
	div[name][id] {}
</style>
<body>
	<div name="box1">块1</div>
	<div class="container" id="box2">块2</div>
	<div class="div-container">块3</div>
	<div class="container-div">块4</div>
</body>

伪类选择器
写法：选择器:伪类{ }
常用伪类：
① :hover：可设置鼠标移入时的样式
② :before：在父元素的前面添加一些文本及样式
③ :after：在父元素的后面添加一些文本及样式
④ :checked：表单元素（复选框）被选中时的样式
⑤ :disabled：表单元素被禁用时的样式
⑥ :focus：表单元素获取焦点时的样式

结构型伪类选择器
① :nth-of-type(n)：获取同类型中第n个元素
② :first-of-type：获取同类型中第一个元素
③ :last-of-type：获取同类型中最后一个元素
④ :only-of-type：获取同类型中唯一的那个元素
⑤ nth-last-of-type(n)：获取同类型中倒数第n个元素
⑥ :nth-child(n)：获取所有孩子中第n个元素
⑦ :first-child：获取所有孩子中第一个元素
⑧ :last-child：获取所有孩子中最后一个元素
⑨ :only-child：获取所有孩子中唯一的那个元素
注：type表示在同类别中筛选，child表示在所有孩子中筛选

<style>
	/*nth-of-type，选中的元素为p2*/
	div p:nth-of-type(2) {}
	/*first-of-type，选中的元素为p1*/
	div p:first-of-type {}
	/*last-of-type，选中的元素为p5*/
	div p:last-of-type {}
	/*only-of-type，未选中元素，因为div中有多个p，不唯一*/
	div p:only-of-type {}
	/*nth-last-of-type，选中的元素为p3*/
	div p:nth-last-of-type(3) {}
	/*nth-child，选中的元素为title*/
	div p:nth-child(2) {}
	/*first-child，选中的元素为p1*/
	div p:first-child {}
	/*last-child，选中的元素为p5*/
	div p:last-child {}
	/*only-child，选中的元素为title*/
	div h2:only-child {}
</style>
<body>
	<div>
		<p id="p1">段落</p>
		<h2 id="title">这是一个二级标题</h2>
		<p id="p2">段落</p>
		<p id="p3">段落</p>
		<p id="p4">段落</p>
		<p id="p5">段落</p>
	</ul>
</body>

百香果果ccc

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS中的常用选择器详解

⑤ nth-last-of-type(n)：获取同类型中倒数第n个元素。① :nth-of-type(n)：获取同类型中第n个元素。④ :only-of-type：获取同类型中唯一的那个元素。② :first-of-type：获取同类型中第一个元素。③ :last-of-type：获取同类型中最后一个元素。⑥ :nth-child(n)：获取所有孩子中第n个元素。⑨ :only-child：获取所有孩子中唯一的那个元素。① M N：后代，获取M中所有的孩子N。② M > N：父子，获取M的儿子N。
复制链接

扫一扫

专栏目录