1. css入门基础知识(选择器)

1 介绍及语法

介绍：css指层叠样式表，用来定义样式，使用css样式表极大地提高了工作效率。

1.1 css基础语法

selector{
        property : value
}

说明：多个属性之间用分号隔开；属性值为多个单词时需加引号。

元素选择器：根据元素便签进行使用

h1{
  color: red;
  font-size: 14px;
  font-family: sans-serif;
}
p{
  color: green;
}


  css基础语法
  单独设置元素样式

说明：p元素、a元素等等都可单独设置其样式。

1.2 css高级语法

选择器分组：为多个元素设置同一个样式

h1,h2,h3,h4,h5,h6,a{
  color: red;
  font-family: sans-serif;
}


  css高级语法
  为多个元素设置同一个样式

通配符*：标签未指定样式时都将使用通配符定义的的样式（通配符常用来设置内外边距为0px，需要为元素单独设置该属性时可覆盖）。如

*{
  color: gray;
  margin: 0px;
  padding: 0px;
}
h1,h2,h3,h4,h5,h6,a{
  color: red;
  font-family: sans-serif;
}
p{
  margin: 10px;
}


  通配符
  标签首先使用通配符的样式，自身定义的样式会覆盖通配符的样式

继承：子元素未被设置样式时，采用父元素定义的样式

body{
  color: green;
}
h1{
  color: red;
  font-size: 14px;
  font-family: sans-serif;
}


  子元素被设置样式，采用自身样式
  子元素未被设置样式时，采用父元素定义的样式

2 选择器

元素选择器(参考1.1)
选择器分组(参考1.2)
派生(后代)选择器
id选择器
类选择器
属性选择器/属性和值选择器
子元素选择器
相邻兄弟选择器

说明：元素选择器和选择器分组在上面的css基本语法和高级语法中已经讲述，这里不再重复叙述。

2.1 派生选择器(后代选择器)：根据元素在其位置的上下文关系来定义样式

li strong{
  color: green
}
/* p strong i{
  color: blue;
} */
p i{
  color: blue;
}
strong{
  color: red;
}


  p标签中的strong属性-未具体指定的会采用strong的样式
  
   li标签中的strong属性-已经定义的效果不会被覆盖

2.2 id选择器：可以为标有id的html元素指定特定的样式

说明：id选择器以#定义；id选择器常常用于建立派生选择器，两者结合起来使用。
(1)id选择器简单单独使用

#divid{
  color: green
}


  
  id选择器可以为标有id的html元素指定特定的样式

(2)id选择器+派生选择器组合使用(可看做id选择器+元素选择器)

#divid p{
  color: red
}


  
  id选择器可以为标有id的html元素指定特定的样式
  id选择器和派生选择器组合使用

区别类选择器和id选择器：id选择器类似于类选择器但又有一些重要差别。

id选择器是唯一的，类选择器是可重复的


  id选择器在文档中只能使用一次
  类选择器可使用多次
  类选择器可使用多次
  类选择器可使用多次

id选择器不能结合使用(元素选择器+id选择器不能组合使用，但id选择器+元素选择器可组合使用)
当使用js时需用到id选择器(getElementById)
资源加载上，id选择器先找结构内容再加载样式，类选择器先加载样式再找结构内容
应用上，id选择器常用于框架级的设计上，类选择器常用于内部具体数据的构造来引用一些效果

2.3 类选择器

说明：类选择器以点.定义；类选择器也可用于派生选择器，两者结合起来使用。
(1)类选择器简单单独使用

.pclass{
  color: red;
}


  类选择器简单单独使用

(2)类选择器+派生选择器组合使用(可看做类选择器+元素选择器)

.divclass p{
  color: red;
}


  
   类选择器
   类选择器和派生选择器组合使用

(3)元素选择器+类选择器组合使用

a.div{
  color: blue;
}


  类选择器
  元素选择器和类选择器结合使用

(4)多类选择器

.p1{
  color: blueviolet;
}
.p2{
font-size: 20px;
}
.p1.p2{
  font-style: italic;
}


  
    选择器p1的效果
    选择器p2的效果
    既有选择器p1和p2的效果，又有多类选择器自定义的效果

2.4 属性选择器/属性和值选择器:对带有指定属性的html元素指定样式

简单属性选择：选择器不指定其值
根据具体属性值选择：常用于缩小范围，只选择具有特殊属性值的元素（如a标签有特定的href属性可缩小范围）
属性和属性值必须完全匹配：常用于元素有相同的属性，但是分别需要不同的效果
根据部分属性值选择：模糊匹配属性值
注意：属性选择器在IE6及更低的版本是不支持的。


  
    
  

  
    简单属性选择->选择器不指定其值时，它的值怎么写无所谓
    简单属性选择->选择器不指定其值时，它的值怎么写无所谓

     根据具体属性值选择->只选择具有特殊属性值的元素

    属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值来写
    属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值写
    属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值写

    根据部分属性值选择
    根据部分属性值选择

说明：“title”为选择器的名称。选择器不指定其值时，它的值怎么写无所谓；如果选择器指定其值，那么它的值必须按照指定的值来写，如果值变化则不再生效等同于不指定其值的情况。

2.5 子元素选择器

分别使用后代选择器和子元素选择器为元素i添加样式


  p标签中的strong属性-未具体指定的会采用strong的样式

(1)后代选择器：可选择作为某元素后代的元素，可多层迭代(不仅可找到子元素，也可直接找到孙子元素以及更深的元素)

/* p strong i{
  color: blue;
} */
p i{
  color: blue;
}

(2)子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

p>strong>i{
  color: blue;
}

2.6 相邻兄弟选择器

说明：相邻兄弟选择器可选择在另一个元素后的元素，且两者有相同父元素。在实际应用中很少使用。


  
    
      item1
      item2
      item3
    
    
      item11
      item22
      item33

li+li{
  font-size: 50px;
  color: yellow;
}

拓展： css3选择器(css3新追加的选择器)

1. css入门基础知识(选择器)

1 介绍及语法

1.1 css基础语法

css基础语法

1.2 css高级语法

css高级语法

为多个元素设置同一个样式

通配符

子元素被设置样式，采用自身样式

子元素未被设置样式时，采用父元素定义的样式