CSS学习2

元素选择符

元素选择符包括：通配符选择器（*）、标签选择器（element）、id 选择器（#）、
class 选择器（.）。
1.统配符选择器( * )

可以选择所有元素的选择器

*{
margin:0;
padding:0;
}

但是他的作用范围过大，相当消耗资源，故不推荐过度使用。

2.标签选择器(element)
标签选择器也可以叫做元素选择器，他可以将在这个范围内的所有的标签进行作用效果。
选择a,p元素

a{
color::blue

p{
clor:blue;
}

3.Class选择器(.)
作用于指定类的所有元素的范围中

.student"{
color:blue;
}
student为定义的类的名称：class="student"

4.id选择器(id）
选取具有ID样式的元素标签

#student{
height:100px;
}
选择ID为student的元素

这些都是最常见到的也是最常用的选择器

关系选择符

1.后代选择器(A、B)
后代选择器将选取B为A的子代所有匹配的子元素，无视层级元素，使用此元素应该考虑是否要求对所有的子孙元素都起作用

div a{
color:red;
}
选择div 标签下面的a标签

2.直接子元素选择器(A>B)
子选择器只对A标签下的B标签起作用。故使用此选择器比上面的选择器更普遍。

.student>li{
text-decoration:none;
}
使用类选择器选择stuent下面的子选择器li

3.相邻选择器（A+B）
选择A之后紧跟的同级元素B

div+p{
color:red;
}

4.兄弟选择器(A~B)
选取出现在A后面的B，AB必须拥有同一个父元素

div~p {
 color: red;
 }
 与 div 同级的所有 p 标签选中

5.并列选择器(A,B)
用于多个选择器共用同一属性

*,div,p{
color:red;
}

属性选择器

1.基本的属性选择器
用于选取带有特定属性的元素。

选择p标签属性的元素
[p]{
color:red;
}
选择带有div标签的元素
[div]{}
......

2.改良版属性选择器

选择class属性中含有一个li的元素:
[class~="li"]{
text-decoration;
}
选择选择具有href属性并且href 属性以 http 开头的元素:
 [href^="http"] {
 color: red;
 }
 选择选择具有href属性并且href 属性以 .com结尾的元素:
[href$=".com"]{
color:red;
}