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

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

标志：[ ]

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

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

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

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

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

行内选择器 > id选择器 > 类选择器 > 标签选择器
行内选择器: 


 
如何设置样式
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% }

 
前端 - CSS
标签：text   after   one   height   href   get   idt   pre   over   
原文地址：https://www.cnblogs.com/JackShi/p/12842115.html