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、类名区分大小写。
但它也有它的优点，它可以被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、百分比
4.3 其他属性
关键字
比如指定一个图片：url(images/title.gif)，URL中可选加引号。
4.2 继承、层叠
如果样式冲突时，谁的特指度大谁起作用。
一个标签选择符记1分；
一个类选择符记10分；
一个ID选择符记100分；
一个行内样式记1000分。
因为ID的特指度太高，所有我们一般避免使用id选择器。
