CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
#选择器通常是您需要改变样式的 HTML 元素。
#每条声明由一个属性和一个值组成。
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构：
css_selector.gif
- 选择器
- 元素选择器
指html的某个元素,比如p、h1、div、a甚至html本身html,h1,p { color:black; } #这里有将html,h1.p进行分组,即这三个元素的color属性都是black的 - 类选择器
html中的元素是有class属性,可以指定该属性为选择器#.html <h1 class="aClass bClass"> h1 test. </h1> <p class="aClass"> p test. </p> #.css .aClass { color:red;} #这里的.就是类选择器,即上面的h1,p都被选中,如果只想要p,可以这样: p.aClass { color:red;} #如果只想要h1可以 .aClass.bClass { color:red;} #然后在前在后没区别 .bClass.aClass { color:red;} - id选择器
html中的元素是有id属性,可以指定该属性为选择器#.html <h1 id="aId"> h1 test. </h1> <p class="bId"> p test. </p> #.css #aId { color:red;} #这里的#就是id选择器,即上面的h1被选中,这里特别注意和类选择器的差别 #1.id在一个文档里面只会存在一个,所以 起作用的元素只会有一个 #2.id属性的值不能包含空格,即不存在<h1 id="aId bId">这种情况也就不存在#aId#bId { color:red;} - 属性选择器
html中的元素有很多属性,可以指定该任意属性为选择器#.html <h2 title="Hello world">Hello world</h2> <a title="world" href="http://w3school.com.cn">W3School</a> #.css [title] { color:red; } #这里的[]就是属性选择器,可以看到h2、a都被选中了,当然可以只选a像下面这样 a[title] { color:red; } [title][href] { color:red; } a[title][href] { color:red; } #也可以根据属性的具体值来选定无素 [title="Hello world"] { color:red; } #当然也可以指定值是部分的,下面这样的话h2和a都会被选中 [title~="world"] { color:red; } #这里有还有匹配局部属性值的 [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素 [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素 [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素 [lang|="en"] 选择 lang 属性等于 en 或以 en- 开头的所有元素 - 后代选择器
html元素是可以嵌套的#.html <h1>This is <p> a <em>important</em> </p>heading</h1> <p>This is a <em>important</em> paragraph.</p> #.css h1 em { color:red; } # 空格就是后代选择器 这时候em会被选中,这里你可能注意到他们的层级是这样的h1-p-em,也就是说h1跟em中间不管隔了多少个其它元素都是会被选中的,然后这里选中的是em,不是h1切记。 - 子元素选择器
跟上面的后代选择器很像,但你如果只想指定子元素,中间不允许跨多个其它子元素可以用这个#.html <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> #这可看到 h1-strong strong #h1-em-strong #.css h1 > strong { color:red; } # >就是子元素选择器,只有第一行被作用到了,第二行因为中间有em所以无匹配到.第一行的两个strong都会命中 - 相邻兄弟选择器
选择紧接在另一个元素后的元素，而且二者有相同的父元素#.html <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> #.css h1+p { color:red; } # + 就是相邻兄弟选择器,第一个p被作用到了 - 兄弟选择器
查找某一个指定元素的后面的所有兄弟结点#.html <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> #.css h1~p { color:red; } #~就是兄弟选择器,上面的所有p都会作用到 - 伪类、伪元素
用于向某些选择器添加特殊的效果。#.html <p>some <i>text</i>. some <i>text</i>.</p> <p>some <i>text</i>. some <i>text</i>.</p> #.css p:first-child i { color:blue; } #:指伪类伪元素，第一个p元素内部所有i元素被匹配 #:focus拥有键盘输入焦点的元素 #:link 未访问的链接 #:visited 已访问的链接 #:hover 鼠标移动到链接上(hover必须被置于link和visited之后，才有效) #:active 选定的链接(active必须被置于hover之后，才有效) #:first-child第一个元素 #:lang带有指定 lang 属性的元素 #:first-letter 向文本的第一个字母添加特殊样式 #:first-line 向文本的首行添加特殊样式 #:before 在元素之前添加内容 #:after 在元素之后添加内容 - 总结：
- 无符号即为元素选择器
- ,进行分组,即多个选择器的意思
- .class选择器
- #id选择器
- []属性选择器
- = 完全匹配
- ~=单词匹配
- ^=匹配开头
- $=匹配结尾
- *=子串匹配
- |=开头匹配或加-开头匹配
- 空格后代选择器
- >子元素选择器
- +相邻兄弟选择器
- ~兄弟选择器
- :伪类或伪元素
- 元素选择器
- 属性
常用的属性需要自己去背，不常用的也要了解一下，需要用到的时候，快速查找相关文档 - 值
- 值的不同写法和单位
除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
还可以通过两种方法使用 RGB 值：p { color: #ff0000; }p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } - 如果值为若干单词，则要给值加引号
p {font-family: "sans serif";} - 如果要定义不止一个声明，则需要用分号将每个声明分开
p { text-align: center; color: black; font-family: arial; }
- 值的不同写法和单位
