2.选择器

元素选择器

html{color:black;}
h2{color:gray;}
h1{color:silver;}

分组

选择器分组

分组用，分隔开

h2, p{color:gray;}

通配选择器

*

*{color:red;}

类选择器和ID选择器

类选择器.  

    
    
    


    
这是一个测试
    
什么对不对

多类选择器：

css顺序可以随便写

    
    
    


    
这是一个测试
    
什么对不对

匹配：

p.urgent.warning{background: #CCC;}
可以匹配下面
这是一个测试

ID选择器#

#title{font-size: 40px;}
这是一个标题

ID选择器的ID只能出现一次

属性选择器

简单属性选择器

如果希望选择有某个属性的元素，而不论该属性的值是什么。可以用简单属性选择器

h1[class]{color:green;}
这是简单属性选择器

h1有class属性都添加color为green的css属性。

例如：对img的alt属性，添加css属性

img[alt]{border:3px solid #CCC;}

可以多个属性一起：

a[href][title]{font-weight:blod;}

根据具体属性值选择

[属性=属性值]

a[title="t1"]{font-size:12px;}
a[title="t1"][href="http://www.xxx.xx"]{font-size:20px;}

a[class="h1 title"]{color:green;}

a[class="h1 title"]{color:green;} 这个顺序就是h1 title 顺序不能随便

根据部分属性值选择~

取反号 ~  匹配的是空格隔开的属性值

下面匹配有 title的class

h1[class~="title"]{color:yellow;}
这是简单属性选择器

子串匹配选择器

[foo^="bar"]     foo属性bar开头
[foo$="bar"]     foo熟悉bar结尾
[foo*="bar"]     foo包含bar

特定属性选择类型

h1[class|="nav"]{color:red;}
这是简单属性选择器
这是简单属性选择器
这是简单属性选择器
最后一个不会有变化， |是选择nav-开头的

后代选择器

用空格 

h1 em{color:red;}
p b,blockguote b{color:red;}
两个元素之间的层次间隔可以是无限的， p 继承的所有b元素，不论b嵌套层次有多深

选择子元素 >

比如：选择h1元素子元素（而不是 后代元素）的strong元素

h1>strong{color:red;}

选择相邻兄弟元素+

h1旁边的p的字体色：

h1+p{color: #CCC;}

html > body table + ul{margin-top:1.5em;}

选择紧接在一个table元素后出现的所有ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素。

伪类和伪元素

伪类选择器 :

a:link{color:black;}
a:visited{color:green;}

伪类动态

前两个是静态的，后三个是动态，伪类的顺序很重要

a:link{color:black;}
a:visited{color:green;}
a:focus{color: red;}
a:hover{color:yellow;}
a:active{color: pink;}

顺序：

link-visited-focus-hover-active
动态伪类可以应用到任何元素

例如：对body下所有子元素鼠标悬浮的时候设置黄色背景：

body *:hover {background:yellow;}

选择第一个子元素 first-child

静态伪类:first-child：用来选择第一个子元素

    
第一个P
    

        
1
        
2
        
3
    
    

        
h1
        
p1
        
p2
        
p3
    

这个div里面的第一个子元素有：p（div第一个） li（ul第一个） h1（div第一个）

相当于：

li:first-child {
    color: red;
}

p:first-child {
    color: green;
}

h1:first-child {
    color: green;
}


    
div的第一个子元素P
    

        
ul的第一个子元素
        
2
        
3
    
    

        
div的第一个子元素
        
p1
        
p2
        
p3
    

根据语言选择 lang() 相当于 |=

*:lang(fr) {font-style:italic;}
匹配fn fn-

伪类结合 

不要把互斥对的伪类结合在一起！！！

a:link:hover{color:red;}
a:visited:hover{color:yellow;}
//互斥的不能放一起 还可以加上语言哦
a:link:hover:lang(de){color:gray;}
a:visited:hover:lang(de){color:red;}

伪元素选择器

CSS2.1定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和设置之后元素的样式

1.设置首字母样式：:first-letter

p:first-letter{font-size:40px;color:red;}
这是设置首字母样式例子 first-letter

2.设置第一行样式：: first-line

p:first-line{font-size:40px;color:red;}
first-line
这是设置首行样式例子 

CSS2 first-letter 和 first-line 的限制：只能应用于标记和段落之类的块元素，不能应用于超链接等行内元素

3.设置之前和之后的元素的样式 :before :after

在每个h2元素之前加一对红色的中括号

h2:before{content:"[]";color:red;}
before测试1
before测试2

在每个h2之后插入end

h2:after{content:"end";color:red;}
after测试1
after测试2