1.基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号""分隔；
"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
3.定义字体
web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif}
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
Lucida Grande字体适合Mac OS X；
Verdana字体适合所有的Windows系统；
Lucida适合UNIX用户
"宋体"适合中文简体用户
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用
4.群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px }
5.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italicfont-weight : normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
6.id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
<div id="menubar"></div>
然后在样式表里这样定义：
#menubar {MARGIN: 0pxBACKGROUND: #FEFEFECOLOR: #666}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持派生，例如：
#menubar p { text-align : rightmargin-top : 10px}
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
6.类别选择器
在CSS里用一个点开头表示类别选择器定义，例如：
.14px {color : #f60 font-size:14px }
在页面中，用class="类别名"的方法调用：
<span class="14px">14px大小的字体</span>
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
7.定义链接的样式
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold text-decoration : none color : #c00 }
a:visited {font-weight : bold text-decoration : none color : #c30 }
a:hover {font-weight : bold text-decoration : underline color : #f60 }
a:active {font-weight : bold text-decoration : none color : #F90 }
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
选择器共有六种类型：1.（元素）标签选择器
2.（类）class选择器
3.id选择器
4.后代选择器
5.子代选择器
6.交集选择器
例子：
器
1、标签选择器：给所有的同种标签制定标准
语法：标签名 {
key:value
}
实例：div {
width:100px
}
2、类名选择器:将标签归为一类来命名
一对多：一个类名可以多个标签使用
多对一：一个标签可以用多个类名
定义一个类名（class="类名"）
语法：.类名 {
key:value
}
实例：.head {
width:100px
}
使用类名（多个类名用空格隔开）
<div class="head"></div>
<div class="类名 类名-1 类名-2"></div>
3、ID选择器：唯一性 只能给一个标签用 同种ID名只能用一次
语法：#名字 {
key:value
}
实例：#foot {
width:100px
}
4、包含选择器：从父元素里面找符合标准的子孙元素
先找到父元素 再找到它的子孙元素 从中筛选出符合条件的元素
用 空格 连接
语法：.类名/标签名 .类名/标签名 {
key:value
}
实例：div .son {
width:100px
}
5、子选择器：找到的只是子元素
先找到父元素 再找到它的子元素 从中筛选出符合条件的元素
语法：.类名/标签名 >.类名/标签名 {
key:value
}
实例：.father>div {
width:100px
}
6、全局选择器： 通配符 * （兼容性不太好）
语法：* {
key:value
}
实例：* {
width:100px
}
7、群组选择器（节省代码）
语法：标签名,标签名 {
key:value
}
实例：div,div {
width:100px
}
8、相邻选择器 :
找到指定元素的相邻的兄弟元素（只能找下方的相邻元素）
语法：.类名/标签名+.类名/标签名 {
key:value
}
实例：.a+div {
width:100px
}
9、兄弟选择器 （css3）:
找到指定元素的同级的所有兄弟元素（只能找下方的同级所有兄弟元素，并且为同种标签）
语法：.类名/标签名~.类名/标签名 {
key:value
}
实例：.a~div {
width:100px
}
伪类选择器
1、:hover
指的是给指定元素加上鼠标悬停状态下的样式（该元素必须有宽高）
2、:active
指的是给指定元素加上鼠标激活状态下的样式
3、:after
指的是给指定元素后面添加一个伪元素 必须携带 content："" 属性
4、：before
指的是给指定元素前面添加一个伪元素 必须携带 content: "" 属性
5、 ： focus
设置焦点（聚焦）状态
6、
（1）：first-child
指的是父元素下的第一个子元素
（2）：last-child
指的是父元素下的最后一个子元素
（3）：nth-child（n）n为几 就是第几个子元素 从前面开始指定
2n
3n
odd 奇数
even 偶数
（4）：nth-last-child（n） 从后面开始指定
（5）：only-child只有一个子元素 需加空格
（6）：empty 没有子元素的 没有任何文本 不加空格
（7）：not（）取反（反选）
（8）：root 根元素
（9） E：first-of-type
先找到元素E，再找到其中的第一个
（10） E：last-of-type
先找到元素E，再找到其中的最后一个
（11） E：only-of-type
先找到元素E，再找到其中的只有一个的
（12） E：nth-of-type（n）
先找到元素E，再找到其中的第n个
（13） E：nth-last-of-type（n）
先找到元素E，再找到其中倒数的第n个
（14） ：first-letter/：last-letter （：：first-letter）
第一个字符/最后一个字符
（15） ：first-line /：last-line （：：first-line）
第一个行/最后一个行
属性选择器
1、 元素[属性] {}
找到某个元素，并且携带这个属性
<div class></div>
<div></div>
div[class='box'] {
width: 200px
height: 200px
background: green
}
// 只会给第一个设置属性
2、 元素[属性='属性值'] {}
找到某个元素，且携带这个属性，并且属性值相等的(有且只有一个属性值)
<div class></div>
<div class="box"></div>
<div class="box box2"></div>
div[class='box'] {
width: 200px
height: 200px
background: green
}
// 只会给第二个设置属性
3、 元素[属性~='属性值'] {}
找到某个元素，且携带属性，并且属性值中包含指定的属性值
<div class="box2"></div>
<div class="box box2"></div>
div[class~='box2'] {
width: 300px
height: 300px
background: purple
}
// 只要属性之中含有 box2就设置属性，给所有的div标签设置属性
4、 元素[属性|='前缀'] {}
找到元素，并且携带属性，并且属性值要以指定的形式: '前缀-xxxx'
<div class="key box1 box2"></div>
<div class="key-box box1 box2"></div>
<div class="key-box2 box1 box2"></div>
div[class|='key'] {
width: 50px
height: 50px
background: pink
}
// 只给后面两个设置属性
5、 元素[属性^='前缀'] {}
找到元素，并且携带属性 ,并且属性值以'前缀'开头（属性中只有一个属性值）
<div class="ax"></div>
<div class="baox"></div>
div[class^='a'] {
width: 20px
height: 20px
background-color: #000
}
// 只给第一个设置属性
6、元素[属性$='后缀'] {}
找到元素，并且携带属性 ,并且属性值以'后缀'结尾
<div class="baox"></div>
<div class="axb"></div>
div[class$='b'] {
width: 20px
height: 20px
background-color: blue
}
// 只给第二个设置属性
7、 元素[属性*='中间'] {}
找到元素，并且携带属性 ,并且属性值中包含'中间'
<div class="ax"></div>
<div class="axb"></div>
div[class*='x'] {
width: 10px
height: 10px
background-color: palegreen
}
// 两个都会设置属性
还有一点就是当我们写程序时，可能会遇到代码写上了，但是效果却不是我们想要的，这里就遇到了选择器权重的问题：
权重： 通配符<标签选择器<类名/伪类选择器<ID选择器<行内样式<！important
本人学识有限，如有错误，希望界内大牛可以指正，万分感谢！！！
image
©
著作权归作者所有,转载或内容合作请联系作者
点赞赚钻最高日赚数百
赞 (5)
敲键盘的那些年
小礼物走一走，来简书关注我
赞赏
下载简书，随时随地看好文
暂无评论
写评论
智慧如你，不想
发表一点想法
咩~
取消确认
推荐阅读
更多精彩内容
下载简书App
你也可以写文章赚赞赏
2016年5月Swift 2 学习 --- 117个注意事项与要点
Jenaral
App中阅读
233029h5常见的面试题
kismetajun
App中阅读
26362145面向对象的用电信息数据交换协议
庭说
App中阅读
9126613网络技术与应用
阿啊阿吖丁
App中阅读
264600css选择器的分类
败于化纤
App中阅读
8703css 伪类选择器
zhao_ran
App中阅读
67021408. 数组中的字符串匹配（难度：简单）
