CSS 选择器/编码规范/属性值/继承、层叠

一、CSS基础知识

1.1 CSS 选择器

名称	选择器例子	解释
通配选择器	*
标签(类型)选择器	div
类选择器	.hello
ID选择器	#hello
多选择器	p,div	p和div
子元素选择器	p > a	p标签内的直接子标签a
后代选择器	p a	p标签内的所有a标签
兄弟选择器	p + a	p后面紧跟a标签,如果是p ~ a 则选择p同级所有a

通配选择符选择所有元素，比如*选择当前网页上的所有元素。
通配选择符也可以用于后代选择器等，比如div *选择div中的所有元素。

类选择符用于精确控制，一个类选择符可以用于多个元素，一个元素也可以使用多个类选择符。
类选择符有以下命名规则：
1、类选择符必须以点号开头；
2、类选择符的名称只能包含字母、数字、连字符、下划线；
3、点号之后，选择符的名称必须以字母开头；
4、类名区分大小写。

ID选择符因为特指度太高，不易被覆盖，逐渐被设计师弃用，
但它也有它的优点，它可以被JS用于定位元素。

群组选择符也就是多选择器，由一系列逗号分开的选择符组成。
比如 h1, p, .copyright #banner ....，群选择器可以使用任何有效的选择符。

后代选择器注意事项：
像p.intro这样的选择器，看着像是后代选择器，但实际上不是，因为中间没有空格。
因此p.intro会选择类为intro的p标签。
但如果是p .intro则查找的是p的后代.intro元素。

伪类选择器
链接伪类：

语法	描述	备注
a:link	访客尚未访问
a:visited	访客已访问
a:hover	鼠标悬浮	其它元素也可以用
a:active	鼠标按下时

段落伪类：
::first-letter:选中第一个字，可以设置为不同字体。
::first-line:选中第一行，可以设置为不同颜色。
(注：css2的时候用的是一个冒号。)

其他伪类：
:focus:聚集时
:before:在指定元素前添加内容，比如.tip:before{ content: "okk" }
:after:在指定元素后添加内容
::selection:选中的内容，只能设置color和background-color

属性选择器
img[title]：选择设置了title属性的img标签。
img[title="okk"]:选择title属性为okk的img标签
a[href^="http://"]:选择href属性以http://开头的a元素
a[fref$=".pdf"]:选择href属性以.pdf结尾的a元素

first-child:：选择第一个标签，比如h1:first-child
last-child:：选择最后一个标签，比如h1:last-child
only-child:：选择唯一子代，比如p:only-child表示当某元素只有一个p元素的时候生效
nth-child(n):：选择n某个

/* 选择tr的奇数行 */
tr:nth-child(odd)

/* 选择tr的偶数行 */
tr:nth-child(even)

/* 选择第五个 */
li:nth-child(5)

/* 每隔两个项目选择第三个项目 */
li-nth-child(3n)

/* 从第二个项开始每隔两个项目选择第三个项目 */
li-nth-child(3n+2)
/* n前面的倍数可以是负数，代表反向遍历 */
/* 从第三休项开始，选取前面的每个项 */
li-nth-child(-n+3)

/* 选取特定类型的第一个子代 */
:first-of-type
/* 选取.sidebar的第一个段落 */
.sidebar p:first-of-type

/* 选取特定类型的最后一个子代 */
:last-fo-type

/* 选取特定类型的第n个子代，和nth-child类似 */
:nth-of-type

:target选择符：
当网页中有id属性的元素时，我们可以通过锚链接定位。
:target可以设置元素被定位时的特征。

:not()选择符

/* 选择没有设定classy属性的p元素 */
p:not(.classy) { color: red; }
/* 选择以http://开头但不包含mysite.com的a元素 */
a[href^="http://"]:not([href*="mysite.com"])

1.2 名词解释

名词	解释
祖辈	包含当前元素的标签都是当前标签的祖辈
父辈	当前元素的直接祖辈
后代	当前标签内的所有标签都是当前标签的后代
子代	当前标签的直接后代
同辈	当前标签的同级标签

二、CSS编码规范

2.1 使用规则

1、添加注释 /* */
2、把相同的属性抽取出来
3、根据用途起名而不是外观
4、不要体现具体位置
5、不要自我重复，可以对一个元素使用多个类
6、使用属性的简写形式，比如边距和线框
7、把相关的样式放在一起
8、使用注释区分不同的样式分组

使用多用样式表，比如：
创建color.css文件控制颜色，layout.css控制布局
然后创建一个外部样式表导入以上几个表：

@import url(main.css);
@import url(layout.css);
@import url(color.css);
@import url(forms.css);

消除浏览器的默认样式：
有些浏览器会自带一些样式，我们可以在样式表文件中先将其删除，再添加我们自己的样式。

// 去掉内外边距
// 使用一致的字号
// 设置一致的行高
// 改进表格的边框，创建一致的单元格
// 去掉图像链接的边框
// 设置一致的缩进和项目符号
// 去掉引用内容两侧的引号

比如我们这样初始化：

/* reset browser styles */
* {
    box-sizing: border-box;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-slign: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1.2;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol {
    padding-left: 1.4em;
    list-style: decimal;
}

ul {
    padding-left: 1.4em;
    list-style: square;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* end reset browser styles */

9、标识主体
比如我们可以用类来或者标识版块，
可以用类来标识链接（推荐），
这样的类可能没有具体的样式代码，但是方便我们后续使用后代选择器对其它元素进行精准定位。

三、其他技术问题

3.1 缓存问题

我们可以在css文件的名称后面加上查询字符串，比如main.css?v=1，
当我们以后更新css以后，可以将v的值改变，
这样浏览器就会认为这是一个新文件，
从而获取新版本，而不是使用缓存。

四、CSS值

4.1颜色

/* 颜色可以用关键字、RGB、RGBA来表示 */
/* 关键字有以下： */
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

/* 当使用RGB时，有以下几种方法 */
em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
/* 当给定的值不规范时 */
em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

/* RGBA 中A的值在0-1之间*/
em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,1)     /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */

/* 亦支持HSL(色相hue、饱和度saturation、亮度lightness/luminance) */
* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* lime */
* { color: hsl(120, 100%, 25%) } /* dark green */
* { color: hsl(120, 100%, 75%) } /* light green */
* { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */

4.2 长度和尺寸

单位可选：英寸、派卡、点、厘米、毫米、em、ex、像素、百分比
但通常只考虑：像素、em、百分比
em源于印刷领域，表示某个字体中大写字母M的高度。在网页中，1em等于Web浏览器的基准字号(通常是16像素)。em会从外层标签继承字号信息。
rem是一种相对尺寸，基于根元素(HTML)的字号,rem在文档中保持不变，不会从父辈元素继承。
vh是viewport height的简称，1vh等于视区高度（或浏览器窗口的高度)的1/100
vw视区宽度viewport width的简称，1vw等于视区宽度的1/100
vmin等于vh和vw二者的最小值
nmax等于vh和vw二者的最大值

4.3 其他属性

关键字inherit是所有属性共有的，表示强制继承父类的属性。
URL用于指向网络中的其他文件。
比如指定一个图片：url(images/title.gif)，URL中可选加引号。

4.2 继承、层叠

如果样式冲突时，谁的特指度大谁起作用。
一个标签选择符记1分；
一个类选择符记10分；
一个ID选择符记100分；
一个行内样式记1000分。
因为ID的特指度太高，所有我们一般避免使用id选择器。