CSS选择器精讲-优快云博客

1.选择器入门

a.css简单语法:
       在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

   <head>
       <style>
                   选择器{
                   属性名称:属性的值;
                   属性名称2: 属性的值2;
                   }
               </style>
   </head>

b.CSS选择器: 帮助我们找到我们要修饰的标签或者元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器入门</title>
		
		<style>
			div{
				color: red;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div>Hello CSS</div>
		<div>Hello CSS</div>
		<div>Hello CSS</div>
		<div>Hello CSS</div>
		<div>Hello CSS</div>
		<div>Hello CSS</div>
		<div>Hello CSS</div>
	</body>
</html>

2.元素选择器

元素选择器语法:
   元素的名称{
           属性名称:属性的值;
           属性名称:属性的值;
           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
	   
		<style>
			
			span{
				color:blue;
			}
		</style>
	</head>
	<body>
		<span>欢乐圣诞节开发和文件反馈</span>
		<span>欢乐圣诞节开发和文件反馈</span>
		<span>欢乐圣诞节开发和文件反馈</span>
		<span>欢乐圣诞节开发和文件反馈</span>
		<span>欢乐圣诞节开发和文件反馈</span>
		<span>欢乐圣诞节开发和文件反馈</span>
		<span>欢乐圣诞节开发和文件反馈</span>
		<span>欢乐圣诞节开发和文件反馈</span>
	</body>
</html>

3.ID选择器

ID选择器语法:
   以#号开头 ID在整个页面中必须是唯一的
           #ID的名称{
           属性名称:属性的值;
           属性名称:属性的值;
           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		
        <style>
        	#d1{
        		color:red;
        	}
        	#d2{
        		font-size: 50px;
        		color: blue;
        	}
        </style>
	</head>
	<body>
		<div id="d1">谷歌</div>
		<div id="d2">火狐</div>
		<div>百度</div>
		<div>欧朋</div>
		<div>CDSN</div>
	</body>
</html>

4.类选择器

类选择器语法:
   以 . 开头
               .类的名称{
               属性名称:属性的值;
                   属性名称:属性的值;
               }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
        <style>
        	.fruit{
        		color: red;
        		font-size: 40px;
        	}
        	.vegetables{
        		color:blue;
        		font-size: 60px;
        	}
        </style>
	</head>
	<body>
		<div class="fruit">香蕉</div>
		<div class="vegetables">白菜</div>
		<div class="fruit">苹果</div>
		<div class="vegetables">黄瓜</div>
		<div class="fruit">葡萄</div>
	</body>
</html>

CSS----选择器