419day（插入视频，结构伪类选择器，属性选择器）

最新推荐文章于 2024-08-18 15:09:27 发布

原创最新推荐文章于 2024-08-18 15:09:27 发布 · 123 阅读

CC 4.0 BY-SA版权

本文详细介绍了CSS中结构伪类选择器和属性选择器的使用方法，包括:first-child、:last-child、:nth-child等结构伪类，以及通过属性如class进行选择的属性选择器。同时，文章展示了如何在HTML中插入音频和视频。

《2018年11月227日》【连续419天】

标题：插入视频，结构伪类选择器，属性选择器；
内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		/*结构伪类选择器*/
		/*a:hover */
		li:first-child {  /*第一个子元素li*/
			background-color: skyblue;
		}
		ul :last-child {
			background-color: green;
		}
		li:nth-child(3) {
			background-color: purple;
		}
		/*li:nth-child(even)*/
		/*even 偶数*/
		/*odd 奇数*/

		/*li:nth-child(2n) {
		}*/

		/*属性选择器：*/
		/*div[class] { 选择所有带class属性的
			background-color: red;
		}*/
		/*div[class^=test]*/
		/*选出以test开头的class属性的标签*/
		/*div[class$=test]*/
		

	</style>
</head>
<body>
	<!-- 插入视频 -->
	<!-- <iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=fff64bef0ca6e9a89dc43f7dca2bc783&tvId=1610976400&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="510" height="498"></iframe>
 -->
	<!-- html5插入视频 -->
	<!-- 播放音频 -->
	<!-- <audio src="bgsound.mp3" autoplay controls loop></audio> -->
	<audio autoplay controls loop>
		<source src="bgsound.mp3"/>
		<source src="music.ogg" />
		您的浏览器版本太低！
	</audio>
	<!-- ogg mp3 wav -->

	<!-- 播放视频 -->
	<video autoplay controls loop>
		<source src="mp4.mp4" />
		<source src="movie04.ogg" />
		您的浏览器版本太低！
	</video>

	<ul>
		<li>韩</li>
		<li>赵</li>
		<li>魏</li>
		<li>楚</li>
		<li>燕</li>
		<li>齐</li>
	</ul>
	
	<div class="demo">宋</div>
	<div>齐</div>
	<div>梁</div>
	<div class="test">陈</div>
	<div class="test1">隋</div>
</body>
</html>