1.元素选择器

常见的html标签元素

h1 {   color: red;}body {   background: red;}

2.分组选择器

例如body和h2标签的字体颜色都是red,使用逗号将其隔开。

body, h1 {    color: red;}

3.通配符选择器

* {    color: red;}

4.类选择器

　在html标签中使用class属性,然后使用样式属性。

hello,world hello,world

　样式表：

.customClassName1 {    color: red;    background: blue;} a.customClassName2 {
        font-weight: bold; } .nameOne.nameTwo {
        background: silver; } //不能匹配到，没有nameThree .nameOne.nameThree {
        font-weight: bold; }

5.Id 选择器

id选择器前面使用#。id是html元素唯一标识符

hello, use id selector

css文件

#customId {    font-size: 12px;}

6.属性选择器

通过标签属性来设置样式。两种方式：

1.具体属性名称的值,属性值需要全值匹配：标签名[属性名=‘属性值’] 

2.属性名称： 标签名[属性名]

hello, world

hello, world

css样式：

a[name] {    background: red;} a[name="atriName2"] {
        background: red; }

7.文档结构方面选择器

7.1 后代选择器

html是文档结构模型的，都有父子节点。可以通过节点关系进行选择。

     
    
      
1
    
               2     
     

css编写：

div h1 {    color: red;}div span b {    color: blue;}

7.2 选择子元素

     
    
      
this is first h1
    
      
this is second h2
     

子元素css

div > h1 {    font-weight: bold;}

7.3 选择相邻兄弟元素

     
    
      
1
    
      
2
      
     

css:

.target + .getTarget {    color: red;}

8 伪类和伪元素

8.1 a链接伪类

a链接相关的伪类有5个：

a.静态伪类： :link , :visited

b.动态伪类 ： :focus, :hover , :active

使用顺序一般为： link - visited - focus-  hover - active

8.2 选择第一个子元素

     
    
      
first 
    
      
second
      
     

css:

div:first-child {    color: red;}

8.3 伪元素选择器

first line

first letter

css: 

//a. 设置首字母样式 p:first-letter {    font-size: 20px;} //b.设置首行 p:first-line {
        color: purple; }