【慕课网】前端零基础入门---步骤四：升级页面化妆师CSS3---01-CSS3选择器

最新推荐文章于 2024-07-09 05:45:50 发布

dqh_zsh

最新推荐文章于 2024-07-09 05:45:50 发布

阅读量174

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_43405634/article/details/104342122

版权

01-CSS3选择器

1 基本选择器

在这里插入图片描述

2 属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div[class]{
			color: red;
		}
		div[class="pwd"]{
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="name">name</div>
	<div class="pwd">pwd</div>
</body>
</html>

3 动态伪类

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		.one:hover,.two:hover{
			border-color: red;
		}
		.one:focus{
			background-color: orange;
		}
		.two:focus{
			background-color: yellow;
		}
	</style>
</head>
<body>
	用户名：<input type="text" name="user" class="one">
	密码：<input type="password" name="password" class="two">
</body>
</html>

4 UI元素状态伪类

在这里插入图片描述

5 结构类——First-Child和LastChild和nth-Child

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		ul>li>ol>li:first-child{
			color: red;
		}
		ul>li>ol>li:nth-child(2){
			color: green;
		}
		ul>li>ol>li:last-child{
			color: blue;
		}
	</style>
</head>
<body>
	<ul>
		<li>
			家用电器
			<ol>
				<li>冰箱</li>
				<li>洗衣机</li>
				<li>空调</li>
			</ol>
		</li>
		<li>
			清洁用品
			<ol>
				<li>洗衣液</li>
				<li>消毒液</li>
				<li>洗厕液</li>
			</ol>
		</li>
		<li>
			妇婴用品
			<ol>
				<li>奶粉</li>
				<li>纸尿裤</li>
				<li>奶瓶</li>
			</ol>
		</li>
	</ul>
</body>
</html>

6 结构类——结构类参数(nth-child(n))

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		thead>tr{background-color: yellow;}
		tbody>tr:nth-child(odd){color:yellow;}
		tbody>tr:nth-child(even){color:green;}
	</style>
</head>
<body>
	<table border="1" cellspacing="0" width="200">
		<thead>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年纪</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>12</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>女</td>
				<td>11</td>
			</tr>
			<tr>
				<td>3</td>
				<td>赵五</td>
				<td>男</td>
				<td>12</td>
			</tr>
			<tr>
				<td>4</td>
				<td>王二</td>
				<td>男</td>
				<td>12</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

7 结构类（其它）

在这里插入图片描述

8 结构类——empty

在这里插入图片描述

9 否定选择器

在这里插入图片描述

10 css权重

在这里插入图片描述

11 伪元素first-line（一）

在这里插入图片描述

12 伪元素after（二）

在这里插入图片描述

13 伪元素selection（三）

在这里插入图片描述

dqh_zsh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【慕课网】前端零基础入门---步骤四：升级页面化妆师CSS3---01-CSS3选择器

01-CSS3选择器1 基本选择器2 属性选择器<!DOCTYPE html><html lang="en"><head> <title>3</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/&g...
复制链接

扫一扫

【慕课网】前端零基础入门---步骤四：升级页面化妆师CSS3---01-CSS3选择器

01-CSS3选择器

1 基本选择器

2 属性选择器

3 动态伪类

4 UI元素状态伪类

5 结构类——First-Child和LastChild和nth-Child

6 结构类——结构类参数(nth-child(n))

7 结构类（其它）

8 结构类——empty

9 否定选择器

10 css权重

11 伪元素first-line（一）

12 伪元素after（二）

13 伪元素selection（三）

“相关推荐”对你有帮助么？