CSS选择器

CSS选择器

选择器有基础选择器、层次选择器、伪类选择器、伪元素选择器、属性选择器

基础选择器:
元素选择器(选择元素名) \ 如:p{
     color:red;}
ID选择器(#号+ID名)\ 如:#csdn{
     color:black;}
类选择器(.+class名) \ 如:.csdn{
     color:blue;}
通配符选择器(选择全部元素,不建议使用)\如:* {
     color:green}
并集选择器/组合选择器(多个不同的标签,应用相同的样式/声明冲突时,需要分开计算)\如:p,h1,span{
     color:red;}
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>class选择器测试</title>
	<style type="text/css">
		/*对所有class为myclass的元素起作用*/
		.myclass{
     
			width:240px;
			height: 40px;
			background-color: #dddddd;
		}
		/*对class为myclass的div元素起作用*/
		div.myclass{
     
			border:2px dotted black;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<div class="myclass">HTML</div>
	<p class="myclass">CSS</p>
</body>
</html>

CSS选择器_第1张图片


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>id选择器测试</title>
	<style type="text/css">
		/*对所有div元素起作用*/
		div{
     
			width:200px;
			height: 40px;
			background-color: #dddddd;
			padding: 3px;
		}
		/*对id为xx的元素起作用*/
		#xx{
     
			border:2px dotted black;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div id="xx">id属性值为xx的div元素</div>
	<p id="xx">sdfghjk</p>
</body>
</html>

CSS选择器_第2张图片

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>包含选择器测试</title>
	<style type="text/css">
		/*对所有div元素起作用*/
		div{
     
			width:350px;
			height: 60px;
			background-color: #dddddd;
			margin: : 5px;
		}
		/*对div中属性为a的元素起作用*/
		div .a{
     
			width:200px;
			height: 35px;
			border:2px dotted black;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div><div class="a">处于div之内且class属性为a的元素</div></div>
	<p class="a">没有处于div之内但class属性为a的元素</p>
</body>
</html>

CSS选择器_第3张图片

你可能感兴趣的:(CSS选择器)