CSS引入方式与选择器

一、CSS引入方式

• 在head元素下引入：

<link //rel="stylesheet" href="xx.css"> 

• 在CSS文件的开头中导入

@import url(xx.css) 

• 在style元素下写样式

<style //>...</style> 

• 在元素标签里直接设定

<p //style="color: red"></p> 

二、CSS选择器

1. 元素选择器

例如：HTML中有一个<p>元素，在CSS中选中该元素改变样式：

p {
    ...} 

2. 类选择器

（1）首先在HTML定义一个类：

<div  class = "a"></div>

然后在CSS中选中该类：

.a {
    ...} 

（2）若某元素同时属于多个类（a,b两个类是并列的）：

<div  class = "a" class = "b"></div>

CSS中用紧挨着多个“.”号选中：

.a.b {
    ...} 

3. ID选择器

每个元素的ID都是唯一的，在CSS中用“#”号选中：

#a {
    ...}

4. 属性选择器

在HTML中给某一元素定义一个属性：

<a title = "abcdefg">

(1)可在CSS中以这种方式选中含有“title”属性的元素：

[title] {
        ...}

(2)可在CSS中以这种方式选中”title”属性为”abcdefg”的元素：

[title = "abcdefg"] {
    ...}

(3)可在CSS中以这种方式选中选中”title”属性最前面一部分内容为”abc”的元素：

[title ^= "abc"] {
    ...}

(4)可在CSS中以这种方式选中选中”title”属性最后面一部分内容为”fg”的元素：

[title $= "fg"] {
    ...}

5. 后代选择器

CSS中用空格隔开的类选择器选中某元素的某后代元素
如：选中类a下所有的类b后代：【 .a .b{…} 】；用“*”表示某元素的所有后代元素。
HTML：

<div  class = "a"><div class = "b"></div></div>

CSS(.a和.b之间有空格)：

.a  .b {
        ...} 
.a * {
        ...} 

6. 相邻选择器及通用相邻选择器

1）用“+”来选择紧接在某元素后的一个元素（二者要有相同的父元素）
如：选择类a的后一个相邻的兄弟div：.a + div {...}
2）用“~”来选择紧接在某元素后的所有元素（二者要有相同的父元素）
如：选择类a后面所有的兄弟div：.a ~ div {...}

7.伪类

用“:”来选择某伪类

常用伪类：
【 a:link {…} //未访问过的链接 】
【 a:visited {…} //已访问过的链接 】
【 a:hover {…} //鼠标移动到链接上 】
【 a:active {…} //鼠标点击链接瞬间 】
【 input:focus {…} //鼠标选中输入框 】
【 p:first-child {…} //选择元素的第一个子元素】
【 p:lang() {…} //为不同的语言定义特殊的规则】

（ps： a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后）

8. 伪元素

用“:”或“::”来选择某伪元素

常用伪元素：
【 p:first-leter {…} //段落的首字母 】
【 p:first-line {…} //向文本的首行添加特殊样式。 】
【 h1:before {content: “xx”;} //在h1元素前插入内容“xx”】
【 h1:after {content: url(logo.gif);} //在h1元素后插入一幅图片】

9. 选择器权重

！important >style属性（内联） > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器