web前端复习第八课1

最新推荐文章于 2024-10-02 05:39:15 发布

思丰百年

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量160

点赞数

分类专栏： web前端开发复习，从头再来文章标签： javascript css html html5

本文链接：https://blog.csdn.net/qq_39664934/article/details/107226568

版权

web前端开发复习，从头再来专栏收录该内容

22 篇文章 0 订阅

订阅专栏

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*属性选择器之包含选择器*/
		div[class*="ff"]{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<!-- 基本选择器 -->
	<!-- 通配符选择器    标签选择器    class选择器    id选择器 -->

	<!-- 高级选择器 -->
	<!-- 并集选择器    后代选择器    直接后代选择器 -->

	<!-- 伪类选择器    ：hover  -->

	<!-- 属性选择器 -->
	<div class="boxoffpox"></div>
	<p class="box off pox"></p>
</body>
</html>

属性选择器以什么开头以及以什么结尾

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*选择以ff开头的div*/
		div[class^="ff"]{
			width: 200px;
			height: 200px;
			background-color: red;
		}

        /*选择以xff结尾的div*/
		div[class$="xff"]{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box off pox">1</div>
	<div class="ffboxopox">2</div>
	<div class="boxopoxff">3</div>
</body>
</html>

结构性伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*1、必须拥有父元素。  2、必须是父元素的第一个孩子  3、必须是li标签*/
		/*li:first-child{
			color: red;
		}
		li:last-child{
			color: green;
		}*/
		li{
			width: 200px;
			height: 40px;
		}

		/*对指定序号的子元素设置样式（从前往后数）。参数可以使数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3），参数的索引起始值时1，而不是0。*/
		li:nth-child(3n+3){
			background-color: red;
		}
	</style>
</head>
<body>
	<ul>
		<li>1级列表</li>
		<li>2级列表</li>
		<li>3级列表</li>
		<li>4级列表</li>
		<li>5级列表</li>
		<li>6级列表</li>
		<li>7级列表</li>
		<li>8级列表</li>
		<li>9级列表</li>
	</ul>
</body>
</html>

隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		tr:nth-child(2n+1){
			background-color: #f00;
		}
		tr:nth-child(2n){
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<table align="center" border="1" cellspacing="0" cellpadding="10">
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
			<td>单元格4</td>
			<td>单元格5</td>
			<td>单元格6</td>
			<td>单元格7</td>
			<td>单元格8</td>
			<td>单元格9</td>
			<td>单元格10</td>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
			<td>单元格4</td>
			<td>单元格5</td>
			<td>单元格6</td>
			<td>单元格7</td>
			<td>单元格8</td>
			<td>单元格9</td>
			<td>单元格10</td>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
			<td>单元格4</td>
			<td>单元格5</td>
			<td>单元格6</td>
			<td>单元格7</td>
			<td>单元格8</td>
			<td>单元格9</td>
			<td>单元格10</td>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
			<td>单元格4</td>
			<td>单元格5</td>
			<td>单元格6</td>
			<td>单元格7</td>
			<td>单元格8</td>
			<td>单元格9</td>
			<td>单元格10</td>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
			<td>单元格4</td>
			<td>单元格5</td>
			<td>单元格6</td>
			<td>单元格7</td>
			<td>单元格8</td>
			<td>单元格9</td>
			<td>单元格10</td>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
			<td>单元格4</td>
			<td>单元格5</td>
			<td>单元格6</td>
			<td>单元格7</td>
			<td>单元格8</td>
			<td>单元格9</td>
			<td>单元格10</td>
		</tr>
	</table>
</body>
</html>

文本阴影

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
		background-color: #ccc;
	}
		h1{
			text-align: center;
			margin-top: 50px;
			font-size: 200px;
			color: #ccc;

			/*文本阴影*/
			/*text-shadow: 10px 10px 0px red;*/
						/*x轴  y轴  模糊 颜色*/

			text-shadow: 2px 2px 0px #fff,-2px -2px 0px #000;
		}
	</style>
</head>
<body>
	<h1>中国</h1>
</body>
</html>