1. CSS 1.1 CSS信息可以来自 1.2 采纳样式效果的优先级顺序为 2. Selectors 2.1 Selectors 适用于情况 2.2 Selectors 类型 3. Selectors List 4. See also 4.1 浏览器引擎支持对比 4.2 RWD响应式网页设计 4.3 CSS框架列表及对比 4.4 Bootstrap(前端框架) 4.5 JQuery
https://developer.mozilla.org/en-US/docs/Web/CSS
https://developer.mozilla.org/zh-CN/docs/Web/CSS
https://zh.wikipedia.org/wiki/层叠样式表
CSS 是开放网络的核心语言之一,由 W3C 规范 实现跨浏览器的标准化。CSS节省了大量的工作。
样式可以通过定义保存在外部.css文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上编辑布局的麻烦。
CSS 被分为不同等级:CSS1 现已废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块且正在标准化中。
CSS 档内也可以包含注释，注释放在/*和*/之间。一般的浏览器也识别以双斜杠(//)开头的这种注释，但是这是不规范的做法。
W3C的CSS校验服务: http://jigsaw.w3.org/css-validator/
CSS中还有用!important修饰的重要性声明。如果计入重要性声明，那么在以上规则的最前面还需要加上2条规则：
https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Selector
https://zh.wikipedia.org/wiki/层叠样式表#選擇器
class 和 id 区分大小写,以字母开头,并且可以包括字母数字字符,连字符和下划线。class 可以应用于任何元素的任意数量的实例。id 只能应用于单个元素。
CSS里现在共有5种基本选择器(Basic Selectors)和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。 基本选择器
* 属性选择器(也翻译为“通配符选择器”) 属性选择器允许用户自定义属性名称，而不仅仅限于id，class属性。属性选择器共有7种。
| 代码 | 说明 |
| [attribute] | 元素有attribute的属性。 |
| [attribute="value"] | 属性attribute里是value |
| [attribute~="value"] | 属性attribute里使用空白分开的字符串里其中一个是value |
| [attribute|="value"] | 属性attribute里是value或者以value-开头的字符串 |
| [attribute^="value"] | 属性attribute里最前的是value |
| [attribute$="value"] | 属性attribute里最后的是value |
| [attribute*="value"] | 属性attribute里有value出现过至少一次 |
CSS里现在共有4种组合选择符(Combinators):
<colgroup
| 符号 | 说明 |
| A > B | 子代选择器，选择A下一层的元素B |
| A ~ B | 兄弟选择器，选择与A同层的元素B |
| A + B | 相邻兄弟选择器，选择与A相邻的元素B(不能被任何元素相隔) |
| A B | 后代选择器，包含选择符 |
| Selector | Example | 描述 | https://www.w3schools.com/cssref/css_selectors.asp | CSSv | wiki | w3s | jquery |
| ::after | p::after | 在每个<p>元素的内容之后插入一些内容 | Insert something after the content of each <p> element | 2 | w20 | s21 | |
| ::before | p::before | 在每个<p>元素的内容之前插入内容 | Insert something before the content of each <p> element | 2 | w19 | s22 | |
| ::first-letter | p::first-letter | 选择每个<p>元素的首字母 | Selects the first letter of every <p> element | 1 | w05 | s29 | |
| ::first-line | p::first-line | 选择每个<p>元素的第一行 | Selects the first line of every <p> element | 1 | w04 | s30 | |
| ::placeholder | input::placeholder | 选择指定了"占位符"属性的输入元素 | Selects input elements with the "placeholder" attribute specified | s50 | |||
| ::selection | ::selection | 选择用户选择的元素部分 | Selects the portion of an element that is selected by a user | s55 | |||
| :active | a:active | 选择活动链接 | Selects the active link | 1 | w03 | s20 | |
| :animated | 选择器运行时，选择动画进行中的所有元素。 | Select all elements that are in the progress of an animation at the time the selector is run. | j27 | ||||
| :button | 选择所有按钮元素和按钮类型的元素。 | Selects all button elements and elements of type button. | j46 | ||||
| :checkbox | 选择所有类型的元素复选框。 | Selects all elements of type checkbox. | j35 | ||||
| :checked | input:checked | 选择每个选中的<input>元素 | Selects every checked <input> element | 3 | w40 | s23 | j09 |
| :default | input:default | 选择默认的<input>元素 | Selects the default <input> element | s24 | |||
| :contains() | 选择所有包含指定文本的元素。 | Select all elements that contain the specified text. | j13 | ||||
| :disabled | input:disabled | 选择每个禁用的<input>元素 | Selects every disabled <input> element | 3 | w39 | s25 | j47 |
| :empty | p:empty | 选择每个没有子元素的<p>元素(包括文本节点) | Selects every <p> element that has no children (including text nodes) | 3 | w36 | s26 | j21 |
| :enabled | input:enabled | 选择每个启用的<input>元素 | Selects every enabled <input> element | 3 | w38 | s27 | j03 |
| :eq() | 选择匹配集中索引n处的元素。 | Select the element at index n within the matched set. | j41 | ||||
| :even | 选择零索引的偶数元素。另请参阅。 | Selects even elements, zero-indexed. See also odd. | j55 | ||||
| :file | 选择文件类型的所有元素。 | Selects all elements of type file. | j02 | ||||
| :first | 选择第一个匹配的DOM元素。 | Selects the first matched DOM element. | j48 | ||||
| :first-child | p:first-child | 选择作为其父级的第一个子级的每个<p>元素 | Selects every <p> element that is the first child of its parent | 2 | w17 | s28 | j58 |
| :first-of-type | p:first-of-type | 选择作为其父级的第一个<p>元素的每个<p>元素 | Selects every <p> element that is the first <p> element of its parent | 3 | w32 | s31 | j43 |
| :focus | input:focus | 选择具有焦点的输入元素 | Selects the input element which has focus | s32 | j42 | ||
| :hover | a:hover | 在鼠标悬停时选择链接 | Selects links on mouse over | s33 | |||
| :in-range | input:in-range | 选择值在指定范围内的输入元素 | Selects input elements with a value within a specified range | s34 | |||
| :indeterminate | input:indeterminate | 选择处于不确定状态的输入元素 | Selects input elements that are in an indeterminate state | s35 | |||
| :invalid | input:invalid | 选择具有无效值的所有输入元素 | Selects all input elements with an invalid value | s36 | |||
| :gt() | 选择索引大于匹配集中索引的所有元素。 | Select all elements at an index greater than index within the matched set. | j17 | ||||
| :has() | 选择包含至少一个与指定选择器匹配的元素的元素。 | Selects elements which contain at least one element that matches the specified selector. | j14 | ||||
| :header | 选择所有作为标头的元素，例如h1，h2，h3等。 | Selects all elements that are headers, like h1, h2, h3 and so on. | j40 | ||||
| :hidden | 选择所有隐藏的元素。 | Selects all elements that are hidden. | j07 | ||||
| :image | 选择图像类型的所有元素。 | Selects all elements of type image. | j25 | ||||
| :input | 选择所有输入，文本区域，选择和按钮元素。 | Selects all input, textarea, select and button elements. | j28 | ||||
| :lang(language) | p:lang(it) | 选择每个<p>元素的lang属性等于" it"(意大利语) | Selects every <p> element with a lang attribute equal to "it" (Italian) | 2 | w18 | s37 | j32 |
| :last | 选择最后一个匹配的元素。 | Selects the last matched element. | j16 | ||||
| :last-child | p:last-child | 选择作为其父级的最后一个子级的每个<p>元素 | Selects every <p> element that is the last child of its parent | 3 | w31 | s38 | j50 |
| :last-of-type | p:last-of-type | 选择作为其父级的最后一个<p>元素的每个<p>元素 | Selects every <p> element that is the last <p> element of its parent | 3 | w33 | s39 | j34 |
| :link | a:link | 选择所有未访问的链接 | Selects all unvisited links | 1 | w02 | s40 | |
| :visited | a:visited | 选择所有访问的链接 | Selects all visited links | s58 | |||
| :visible | 选择所有可见的元素。 | Selects all elements that are visible. | j15 | ||||
| :lt() | 选择索引小于匹配集中索引的所有元素。 | Select all elements at an index less than index within the matched set. | j61 | ||||
| :not(selector) | :not(p) | 选择不是<p>元素的每个元素 | Selects every element that is not a <p> element | 3 | w41 | s41 | j30 |
| :nth-child(n) | p:nth-child(2) | 选择作为其父级的第二个子级的每个<p>元素 | Selects every <p> element that is the second child of its parent | 3 | w27 | s42 | j44 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个<p>元素作为其父级的第二个子级，从最后一个子级开始计数 | Selects every <p> element that is the second child of its parent, counting from the last child | 3 | w28 | s43 | j54 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 从最后一个子元素开始，选择作为其父元素的第二个<p>元素的每个<p>元素 | Selects every <p> element that is the second <p> element of its parent, counting from the last child | 3 | w30 | s44 | j39 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父级的第二个<p>元素的每个<p>元素 | Selects every <p> element that is the second <p> element of its parent | 3 | w29 | s45 | j37 |
| :odd | 选择零索引的奇数元素。另请参见。 | Selects odd elements, zero-indexed. See also even. | j06 | ||||
| :only-child | p:only-child | 选择作为其父级唯一子级的每个<p>元素 | Selects every <p> element that is the only child of its parent | 3 | w34 | s47 | j01 |
| :only-of-type | p:only-of-type | 选择作为其父级的唯一<p>元素的每个<p>元素 | Selects every <p> element that is the only <p> element of its parent | 3 | w35 | s46 | j59 |
| :optional | input:optional | 选择没有"必需"属性的输入元素 | Selects input elements with no "required" attribute | s48 | |||
| :out-of-range | input:out-of-range | 选择值超出指定范围的输入元素 | Selects input elements with a value outside a specified range | s49 | |||
| :read-only | input:read-only | 选择指定了"只读"属性的输入元素 | Selects input elements with the "readonly" attribute specified | s51 | |||
| :read-write | input:read-write | 选择未指定"只读"属性的输入元素 | Selects input elements with the "readonly" attribute NOT specified | s52 | |||
| :required | input:required | 选择指定了"必需"属性的输入元素 | Selects input elements with the "required" attribute specified | s53 | |||
| :root | :root | 选择文档的根元素 | Selects the document‘s root element | 3 | w26 | s54 | |
| :parent | 选择具有至少一个子节点的所有元素(元素或文本)。 | Select all elements that have at least one child node (either an element or text). | j08 | ||||
| :password | 选择类型为password的所有元素。 | Selects all elements of type password. | j57 | ||||
| :radio | 选择单选类型的所有元素。 | Selects all elements of type radio. | j60 | ||||
| :reset | 选择所有类型为reset的元素。 | Selects all elements of type reset. | j11 | ||||
| :root | 选择作为文档根的元素。 | Selects the element that is the root of the document. | j29 | ||||
| :selected | 选择所有选定的元素。 | Selects all elements that are selected. | j36 | ||||
| :submit | 选择类型为Submit的所有元素。 | Selects all elements of type submit. | j33 | ||||
| :target | #news:target | 选择当前活动的#news元素(单击包含该锚名称的URL) | Selects the current active #news element (clicked on a URL containing that anchor name) | 3 | w37 | s56 | j04 |
| :text | 选择文本类型的所有输入元素。 | Selects all input elements of type text. | j23 | ||||
| :valid | input:valid | 选择具有有效值的所有输入元素 | Selects all input elements with a valid value | s57 | |||
| .class | .intro | 选择所有带有class =" intro"的元素 | Selects all elements with class="intro" | 1 | w06 | s01 | j53 |
| .class1 .class2 | .name1 .name2 | 选择名称为name1的元素的后代的所有名称为name2的元素 | Selects all elements with name2 that is a descendant of an element with name1 | s03 | |||
| .class1.class2 | .name1.name2 | 选择其class属性中同时设置了name1和name2的所有元素 | Selects all elements with both name1 and name2 set within its class attribute | s02 | |||
| [attribute] | [target] | 选择具有目标属性的所有元素 | Selects all elements with a target attribute | 2 | w13 | s13 | j62 |
| [attribute*=value] | a[href*="w3schools"] | 选择其href属性值包含子字符串" w3schools"的每个<a>元素 | Selects every <a> element whose href attribute value contains the substring "w3schools" | 3 | w25 | s19 | j45 |
| [attribute^=value] | a[href^="https"] | 选择其href属性值以" https"开头的每个<a>元素 | Selects every <a> element whose href attribute value begins with "https" | 3 | w23 | s17 | j22 |
| [attribute=value] | [target=_blank] | 选择所有具有target =" _ blank"的元素 | Selects all elements with target="_blank" | 2 | w14 | s14 | j49 |
| [name!="value"] | 选择不具有指定属性或具有指定属性但不具有特定值的元素。 | Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value. | j24 | ||||
| [attribute|=value] | [lang|=en] | 选择所有以" en"开头的lang属性值的元素 | Selects all elements with a lang attribute value starting with "en" | 2 | w16 | s16 | j05 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词" flower"的所有元素 | Selects all elements with a title attribute containing the word "flower" | 2 | w15 | s15 | j10 |
| [attribute$=value] | a[href$=".pdf"] | 选择每个href属性值以" .pdf"结尾的<a>元素 | Selects every <a> element whose href attribute value ends with ".pdf" | 3 | w24 | s18 | j51 |
| [name="value"][name2="value2″] | 匹配与所有指定的属性过滤器匹配的元素。并且 | Matches elements that match all of the specified attribute filters. | j26 | ||||
| * | * | 选择所有元素 | Selects all elements | 2 | w12 | s05 | j52 |
| #id | #firstname | 选择id =" firstname"的元素 | Selects the element with id="firstname" | 1 | w07 | s04 | j31 |
| element | p | 选择所有<p>元素 | Selects all <p> elements | 1 | w01 | s06 | j38 |
| element element | div p | 选择<div>元素内的所有<p>元素. 后代("祖先 后代") | Selects all <p> elements inside <div> elements | 1 | w11 | s09 | j56 |
| element,element | div, p | 选择所有<div>元素和所有<p>元素. 多选 | Selects all <div> elements and all <p> elements | s08 | j20 | ||
| element.class | p.intro | 选择所有带有class =" intro"的<p>元素 | Selects all <p> elements with class="intro" | 1 | w08 | s07 | |
| element+element | div + p | 选择紧接在<div>元素之后的所有<p>元素. 下一个相邻("上一个+下一个") | Selects all <p> elements that are placed immediately after <div> elements | 2 | w22 | s11 | j19 |
| element>element | div > p | 选择所有<p>元素，其中父元素是<div>元素. 子选择("父>子") | Selects all <p> elements where the parent is a <div> element | 2 | w21 | s10 | j18 |
| element1~element2 | p ~ ul | 选择每个以<p>元素开头的<ul>元素. 下一个兄弟姐妹("上一个?兄弟姐妹") | Selects every <ul> element that are preceded by a <p> element | 3 | w42 | s12 | j12 |
| .c#myid | class =" c"和ID等于" myid"的元素 | the element with class="c" and ID equal to "myid" | 1 | w10 | |||
| E#myid | ID等于" myid"的E元素 | an E element with ID equal to "myid" | 1 | w09 |
https://zh.wikipedia.org/wiki/瀏覽器引擎CSS支援比較
https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support)
https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(HTML_support)
https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(graphics_support)
https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(typography_support)
https://en.wikipedia.org/wiki/Comparison_of_browser_engines
https://en.wikipedia.org/wiki/Comparison_of_web_browsers
https://en.wikipedia.org/wiki/HTML_attribute
https://en.wikipedia.org/wiki/Responsive_web_design
https://zh.wikipedia.org/wiki/响应式网页设计
响应式网页设计（英语：Responsive web design，通常缩写为RWD），或称自适应网页设计、回应式网页设计、对应式网页设计。
是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为。
https://en.wikipedia.org/wiki/Adaptive_web_design
自适应网页设计（Adaptive Web Design AWD）促进了网页的多个版本的创建，以更好地适应用户的设备，而不是单个静态页面在所有设备上加载（并显示）相同的静态页面，或者单个页面对内容进行重新排序和调整大小根据用户的设备/ 屏幕尺寸 / 浏览器进行响应。
http://cssframeworks.org/
https://en.wikipedia.org/wiki/CSS_framework#List_of_notable_CSS_frameworks
http://usablica.github.io/front-end-frameworks/compare.html?v=2.0
https://getbootstrap.com/
https://github.com/twbs/bootstrap
https://zh.wikipedia.org/wiki/Bootstrap
https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
Bootstrap是一个免费的开放源代码 CSS框架，用于响应式，移动优先的 前端Web开发。它包含用于排版，表单，按钮，导航和其他界面组件的CSS和（可选）基于JavaScript的设计模板。
Bootstrap是GitHub上排名第六的项目，拥有135,000多颗星。
https://en.wikipedia.org/wiki/JQuery
https://zh.wikipedia.org/wiki/JQuery
https://github.com/jquery/jquery
https://jquery.com/
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。
由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上发布第一个版本。当前是由Dave Methvin领导的开发团队进行开发。
全球前10,000个访问最高的网站中，有65%使用了jQuery，是当前最受欢迎的JavaScript库。
子项目
以下项目均是源自于Interface插件
https://en.wikipedia.org/wiki/JQTouch
https://en.wikipedia.org/wiki/JQuery_Mobile
原文：https://www.cnblogs.com/sztom/p/12589152.html