一 基础选择器
标签选择器：选择的标签的‘共性’，而不是特性
div{}、ul{}、ol{}、form{}
类选择器：.box{}
id选择器：#box{} 只能选择器的特性，主要是为了js
*通配符选择器：重置样式
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
/*#标签选择器*/
p{
color: red;
}
/*类选择器*/
.c1{
color:green;
}
/*id选择器*/
#d2{
color: yellow; }
</style>
</head>
<body>
<div>div标签</div>
<div id="d2">div标签2</div>
<p class="c1">p标签</p>
<span class="c1">我是span标签</span>
<span>我是span2号</span> </body>
</html>
二 高级选择器
1 后代选择器 子带选择器（儿子选择器） 毗邻选择器 弟弟选择器
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*后代选择器(儿子，孙子，子子孙孙)*/
div a{
color: red;
}
/*儿子选择器*/
div>a{
color:blue
}
/*毗邻选择器，就是a和span紧挨着*/
a+span{
color:yellow
}
/*弟弟选择器,相当于这个标签下面的所有标签都生效*/
a~span{
color:aqua;
}
</style>
</head>
<body>
<div>
<div>
<p>
<a>我是孙子p标签</a>
</p>
</div>
<a>我是儿子p标签</a>
<span>我是span1号</span>
<span>我是span2号</span> </div> </body>
</html>
2 交集选择器
交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器
form input.active{
width:200px;
}
3 伪类选择器
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*去除超链接的下划线*/
a{
text-decoration:none;
}
/*鼠标放到超链接上线显示的样式*/
a:hover{
color: red; } /*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px; }
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content: 'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p::after{ /*解决浮动带来的问题*/
content:'.';
display: block;
/*width: 100px;
height: 100px;
background-color: red;*/
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<p>我是p标签1</p>
<a href="http://www.baidu.com">百度一下</a> </body>
</html>
三 样式权重问题
1 行内的样式>内接样式>外接
例子：
<!--外接式和导入式只能同时存在一个-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<!--文件类型内接式-->
<style type="text/css">
p{
color: green;
width: 100px;
height: 100px;
}
</style>
<!--外接式，不用写style-->
<link rel="stylesheet" href="./css/index.css">
<!--导入式-->
<style type="text/css" media="screen">
@import url('./css/index.css'); </style>
</head>
<body>
<div style="color:red;">
我是一个div
</div>
<p>段落</p>
<a href="#">百度</a> </body>
</html>
2 权重问题比较
100>010>001
id>类>标签
例子：
<!--优先级大小-->
<!--id class 标签 三者依次从左到右的个数，那个左边的数字大，那个就会生效，所以pa生效-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!--下面这个是把默认的样式重置-->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/reset-css@4.0.1/reset.css">
<style type="text/css" media="screen">
/*1 0 0*/
#pa{
color: yellow; }
/*0 1 0*/
.app{
color:red;
}
/*0 0 1*/
p{
color: blue;
} </style>
</head>
<body>
<div id="box">
<div>
<div>
<div class="child">
<p id="pa" class="app">猜猜我是什么颜色</p> </div>
</div>
</div> </div>
<p>段落</p> </body>
</html>
四 样式继承问题
继承来的属性权重为0，如果权重都为0，谁描述的近谁优先，就是写的越详细越优先
继承和权重
记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height:100px;
background-color: green;
color:red;
font-size: 20px;
text-align:center;
line-height: 100px;
/*设置行高可以让文字居中显示*/
}
</style>
</head>
<body>
<div>
<p>德国</p>
</div> </body>
</html>