css选择器

最新推荐文章于 2023-12-12 09:35:39 发布

hoho_12

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量336

点赞数

分类专栏：网页设计与制作文章标签： css

本文链接：https://blog.csdn.net/hoho_12/article/details/52105997

版权

网页设计与制作专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css选择器</title>

		<style type="text/css">
			/*标签选择器*/
			
			div {
				width: auto;
				height: auto;
				background-color: #FF00FF;
				border: solid;
			}
			/*类选择器*/
			
			.input {
				width: 150px;
				height: 20px;
				background-color: #FF0000;
				text-align: center;
			}
			/*id选择器*/
			
			#submit {
				width: auto;
				height: auto;
				background-color: #0000FF;
			}
			/*交集选择器*/
			
			p a {
				color: #00FFFF;
			}
			/*并集选择器*/
			
			p,
			a {
				color: red;
			}
			/*伪类选择器*/
			
			a:link {
				color: black;
			}
			
			a:visited {
				color: blue;
			}
			
			a:hover {
				color: red;
			}
			
			a:active {
				color: springgreen;
			}
		</style>
	</head>

	<!--    	
    	描述：选择器
    	选择器是用来寻找符合要求的html元素的。
    	
    	1.标签选择器：根据标签来选择元素
    	标签名{    		
    	}    	
    	2.类选择器：根据标签的class属性来选择元素
    	.类名{
    		
    	}
    	类选择器要注意的事项：
			1. html元素的class属性值一定不能以数字开头.
			2. 类选择器的样式是要优先于标签选择器的样式。
				一个元素即有标签选择器的样式，又有类选择器的样式。类选择器起作用。
    	
    	
    	3.id选择器，根据一个标签的id属性来选择元素。
    	#id{
    		
    	}
    	
    	注意事项：
    		1. ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。
			2. ID的属性值也是不能以数字开头的。
			3. ID的属性值在一个html页面中只能出现一次。
			
		4.交集选择器： 就是对选择器1中的选择器2里面的数据进行样式化。
		(选择器2选择出的元素必须在选择器1选择出的元素内部才满足条件)
		选择器1 选择器2{
			
		}
		
		5.并集选择器:对选择器1和选择器2选择出的元素都起作用
		选择器1,选择器2{
			
		}
		
		6.通用选择器：对所有的元素全部起作用
		*{
			
		}
		
		7.伪类选择器：在一个元素处于某种状态下进行样式化。
		link:未被访问的链接
        visited:已被访问的链接
        hover:鼠标移动到链接上
        active:选定的链接(按住不松开)

			a:visited {
				color: blue;
			}
			
			a:link {
				color: black;
			
			a:hover {
				color: red;
			}
			
			a:active {
				color: springgreen;
			}


		
		
    	
    -->

	<body>
		<div>这是第一个div</div>
		<div>这是第二个div</div>
		<div>这是第三个div</div>
		<div>这是第四个div</div>
		<div class="input">这是第无个div</div>

		<hr />
		<form>
			<input type="text" placeholder="用户名" class="input" /><br />
			<input type="password" placeholder="密码" class="input" /><br />

			<input type="submit" value="登陆" id="submit" /><br />
		</form>

		<a href="css基本语法.html">css定义</a><br />
		<a href="http://www.sina.com">新浪</a>
	</body>

</html>