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/
1.1 CSS信息可以来自
- 作者样式
- 独立的CSS文件（外部样式表），其优先级最低
- 包含在HTML文件内（内部样式表）
- 作指令内结合CSS指令（内联样式），其优先级最高。一般这样做是为了在特殊情况下，把上面来源的CSS抵消掉
- 客户端自定义样式（client-side style sheet）
- 浏览网页的用户可以自己在本地计算机上自己写1个CSS文件，然后就可以在浏览器内通过设置好特定选项，来加载自己的CSS文件。这个CSS文件可以用在所有的HTML文件上。当网页作者没有设定某项规则，但存在对应的用户自定义规则时，用户的规则就会起作用。假如作者的CSS文件与读者的相冲突，浏览器会采用作者的规则。如果读者有特殊要求，可以通过在自定义规则末尾添加!important提升自定义规则的显示优先权。(网页作者也可以使用!important给规则提升权限，但是优先级别比不过由用户写的!important声明，!important对于网页作者的意义仅在于网页开发阶段的规则冲突测试)
- 浏览器样式
- 假如外部没有特别指定一个样式的话，一般浏览器自己有一个内在的样式。由于不同浏览器的默认样式并不一致，所以讲究美观的网页的设计者一般喜欢去掉这个默认的样式。
1.2 采纳样式效果的优先级顺序为
- 行内样式
- 内部样式
- 在HTML中通过<link>标签直接引入的外部样式表
- 在CSS中通过@import语句间接引入的外部样式表
- 浏览网页的用户自己定义的样式表（需要手动加载，主要适用于色盲或色弱的上网用户）
- 浏览器默认的样式（如标题有默认大小、段落之间有默认间距等，不同浏览器的默认样式不完全一样）
CSS中还有用!important修饰的重要性声明。如果计入重要性声明，那么在以上规则的最前面还需要加上2条规则：
- 用户从本地加载的重要自定义样式
- 网页设计者设定的重要样式
2. Selectors
https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Selector
https://zh.wikipedia.org/wiki/层叠样式表#選擇器
2.1 Selectors 适用于情况
- 特定类型的所有元素,例如第二级标头<h2>
- 由attribute指定的元素,尤其是:
- #id:文档中唯一的标识符
- .class:可以注释文档中多个元素的标识符
- 元素取决于它们相对于文档树中其他元素的放置方式。
class 和 id 区分大小写,以字母开头,并且可以包括字母数字字符,连字符和下划线。class 可以应用于任何元素的任意数量的实例。id 只能应用于单个元素。
2.2 Selectors 类型
CSS里现在共有5种基本选择器(Basic Selectors)和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。 基本选择器
- id选择器 (id) #elementname
- class选择器 (class) .elementname
- 标签选择器 (h1, p)elementname
- 万用选择器 * ns|* *|*
- 属性选择器 [attribute]
* 属性选择器(也翻译为“通配符选择器”) 属性选择器允许用户自定义属性名称，而不仅仅限于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 | 后代选择器，包含选择符 |
3. Selectors List
- 综合以下页面整理的列表，最后几个字段表示来源如下页面的序号
- [jquery]https://api.jquery.com/category/selectors/
- [w3s] https://www.w3schools.com/cssref/css_selectors.asp
- [wiki] https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Selector
| 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 | 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 |
4. See also
4.1 浏览器引擎支持对比
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
4.2 RWD响应式网页设计
https://en.wikipedia.org/wiki/Responsive_web_design
https://zh.wikipedia.org/wiki/响应式网页设计
响应式网页设计（英语：Responsive web design，通常缩写为RWD），或称自适应网页设计、回应式网页设计、对应式网页设计。
是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为。
- 采用 RWD 设计的网站使用CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备：
- 流式网格概念要求页面元素使用相对单位如百分比或字体排印学调整大小，而不是绝对的单位如像素或点。
- 灵活的图像也以相对单位调整大小（最大到 100%），以防止它们显示在包含它们的元素外面。
- Media queries允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是浏览器的宽度。
https://en.wikipedia.org/wiki/Adaptive_web_design
自适应网页设计（Adaptive Web Design AWD）促进了网页的多个版本的创建，以更好地适应用户的设备，而不是单个静态页面在所有设备上加载（并显示）相同的静态页面，或者单个页面对内容进行重新排序和调整大小根据用户的设备/ 屏幕尺寸 / 浏览器进行响应。
4.3 CSS框架列表及对比
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
4.4 Bootstrap(前端框架)
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多颗星。
4.5 JQuery
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插件
- jQuery UI基于jQuery的用户界面库，包括拖放、缩放、对话框、标签页等多个组件。
- jQuery ToolsjQuery Tools是一个第三方的包，基于jQuery。包括了标签页、窗体验证、鼠标滚轮事件等多个组件。
- jQuery Mobile基于jQuery的手机网页制作工具，jQuery Mobile的网站上包含了网页的设计工具、主题设计工具。另外jQuery Mobile的js插件包含了换页、事件等的多项功能。
https://en.wikipedia.org/wiki/JQTouch
https://en.wikipedia.org/wiki/JQuery_Mobile