CSS 是什么？
CSS 指层叠样式表 (Cascading Style Sheets)，用来解决内容和变现分离的问题。
CSS 规则由两部分组成， 选择器+ 声明，声明包括属性+值
CSS 选择器的分组
h1,h2,h3,h4,h5,h6 { ?color: green; ?}表明以上标题都是绿色的。
body ?{ ????font-family: Verdana, sans-serif; ????}td, ul, ol, ul, li, dl, dt, dd ?{ ????font-family: Verdana, sans-serif; ????}p ?{ ????font-family: Times, "Times New Roman", serif; ????}当父类元素具有某个属性，子元素从父类元素那里继承属性，上面例子boby中的元素都是 Verdana ,san-serf 字体，为了摆脱父类元素的拘束，可以像上面一样，重新定义一个选择器。
CSS 派生选择器
li strong { ???font-style: italic; ???font-weight: normal; ?}表示的是在父元素 li 中 strong 标签内的内容拥有此属性。
CSS id 选择器
id 选择器指定某个id时，使用”#“。
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>#para1{ ???text-align:center; ???color:red;} </style></head><body><p id="para1">Hello World!</p><p>这个段落不受该样式的影响。</p></body></html>Id选择器和派生选择器
id选择器常配合派生选择器使用。下面的例子表示使用sidebar 这个id 元素中只有p元素就会拥有该属性。
#sidebar p { ???font-style: italic; ???text-align: right; ???margin-top: 0.5em; ???}CSS 类选择器
一个“.”号显示，
<h1 class="center">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>
还可以这样 ，表示的意思是使用了fancy类的元素中要是该元素中有 td 标签，那么将会匹配到。
.fancy td { ???color: #f60; ???background: #666; ???}或是
td.fancy { ???color: #f60; ???background: #666; ???}<td class="fancy">
CSS 元素选择器
html {color:black;}p {color:gray;}h2 {color:silver;}CSS 多类选择器
.important.urgent {background:silver;}对同时拥有这两个class 的元素才有用.
CSS 子元素选择器
对于某个元素的直接的子元素有用.
h1 > strong {color:red;}<!DOCTYPE HTML><html><head><style type="text/css">h1 > strong {color:red;}</style></head><body><h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1></body></html>CSS 伪类
CSS 伪类用于向选择器添加特殊的效果.
超链接
<html><head><style type="text/css">a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}</style></head><body><p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p><p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p><p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p></body></html>超链接的几个状态事件,当某个事件触发时会发生的效果.
:first-child
匹配第一个 <p> 元素
<html><head><style type="text/css">p:first-child { ?color: red; ?}</style></head><body><p>some text</p><p>some text</p></body></html>匹配所有 <p> 元素中的第一个 <i> 元素
<html><head><style type="text/css">p > i:first-child { ?font-weight:bold; ?}</style></head><body><p>some <i>text</i>. some <i>text</i>.</p><p>some <i>text</i>. some <i>text</i>.</p></body></html>- 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
<html><head><style type="text/css">p:first-child i { ?color:blue; ?}</style></head><body><p>some <i>text</i>. some <i>text</i>.</p><p>some <i>text</i>. some <i>text</i>.</p></body></html>: after
在元素之后添加内容.例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">h1:after {content:url(/i/w3school_logo_white.gif)}</style></head><body><h1>This is a heading</h1><p>The :before pseudo-element inserts content before an element.</p><h1>This is a heading</h1><p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。</body></html>CSS 选择器优先级
- !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
用一个例子加深一下印象
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" type="text/css" href="../../assets/css/test.css"></head><body><img src="../../assets/apple-icon.png" alt=""><img src="../user5.png" alt=""><p class="pClass">hello</p><p>world</p></body></html>
.pClass { ???font-size: 35px;}img>p{ ???font-weight: 700;}CSS选择器的解析顺序 是从右到左的,详细的见参考资料
参考资料:
1.http://https://blog.csdn.net/jinboker/article/details/52126021
2.前端代码规范
CSS学习（一）
原文地址：https://www.cnblogs.com/Benjious/p/9557336.html