参考地址：https://www.cnblogs.com/Dominic-Ji/p/10474769.html

选择器：

1. 基本选择器

元素选择器  标签选择器           div {color: red;}
        类选择器   关键性符号  点号.     .c1 {color:green;}
        id选择器   关键性符号  警号#     #d1 {color: blue;}
        通用选择器  选择所有             * {color: orange;}

2、组合选择器

1. 后代选择器（空格）： div span {color:red}  # 找到div下面的所有span，不考虑层级2. 儿子选择器（大于）： div > span{color:red}  # 找到div的字标签span3. 毗邻选择器（加号）： div + span{color:red}  # 找到同级别div后面的一个span标签（必须相邻，中间不能有其他标签，必须是在div后面的span）4. 弟弟选择器（~）  ： div ~ span{color:red}  # 同级别div后面所有的span标签

3. 属性选择器

标志：[ ]1. [name] { color:red }  # 找到所有含有name属性的标签2. [name=‘username‘] { color:red } # 找到所有name值为username的标签3. input [name=‘username‘] {color:red}  # 找到所有name值为username的input标签

4. 分组与嵌套

1. div , span, p { color:red }  # 三者是或的关系，逗号隔开   注意区分 div span,p { color:red }  # div标签内的span，或者p标签2. #d1, .c1, span { color:red }  # 多个选择器可以混合使用

5. 伪类选择器

a标签有四种状态
　　1. 未点击状态： a:link
　　2. 鼠标悬浮态（常用）:  a:hover
　　3. 被点击状态:  a:active　　4. 点击之后的状态: a:visitedinput　　1.input输入框获取焦点时样式（常用）: input:focus

6. 伪元素选择器

作用：可以通过css代码来添加文本内容p:before{ content:‘‘; color:red; }p:after{ content:‘‘; color:red; }  # 可以清楚浮动带来的影响

选择器优先级问题

1. 选择器相同，引入方式不同

就近原则，谁离得近，就按照哪个方式的选择器

2. 选择器不同，引入方式不同

行内选择器 > id选择器 > 类选择器 > 标签选择器行内选择器: <div style="color:red">

如何设置样式

1. 长宽

只有块级标签可以设置长宽
行内标签无法设置长宽
设置方法：使用选择器找到对应标签，设置height，width
div { height:30px, width:50px }

2. 字体属性

div { font-family: 字体样式，font-size:字体大小，　　font-weitht: 粗细等, color:颜色(英文，#ffffff, rgb,rgba) }

3. 文字属性

div { text-align:位置（默认左对齐），text-decoration:下划线，上划线，中间线 text-indent:首行缩进}
a { text-decoration:none }  # 去除a标签的下划线

4. 背景属性

1. 背景颜色：div { height:50px; width:100; background-color:orange; }  
2. 背景图片：div { height:50px; width:100; background-image:url("图片地址"); background-repeat:调节是否平铺； background-position:左右位置 上下位置}
3. 支持简写：div { background:orange, url("") no_repeat center center }  # 没有位置要求

5. 边框属性

基本使用：p { border-style: solid; border-color:red; border-width:2px }
调节某一边的样式：p {  border-left-color:red; border-left-style:solid }支持简写：p { border: solid red 5px; }  # 没有位置要求改为圆形或者椭圆形：p { height:400px; width:300px; background:red; border-radious:50% }