CSS选择器|青训营笔记

这是我参与【第五届青训营】伴学笔记创作活动的第五天。

• 通配选择器
  作用：选中页面中的所有元素
  语法：
  例子：{}

*{
color:red;
}

• 元素选择器
  也叫类选择器标签选择器
  作用：根据标签名来选中指定的元素
  语法：element name{}
  例子：p{} h1{} div{}
  

p{
color:red;
}
div{
color:green;
}

• 类选择器
  作用：根据元素的class属性选中一组元素
  语法：.classname
  例子：.blue{}
  

.blue{
color:blue;
}
.size{
font-size:20px;
}

class是一个标签属性，它和id类似，不同的是class
可以重复使用，
可以通过class属性来为元素分组，
可以同时为一个元素指定多个class属性

<p class="blue size">类选择器</p>

• ID选择器
  作用：根据元素的id属性值选中一个元素
  语法：#idname{}
  例子：#box{} #red{]

#red{
color:red;
}

• 属性选择器
  作用：根据元素的属性值选中一组元素
  语法1:[属性名]选择含有指定属性的元素
  语法2：[属性名=属性值]选择指定属性和属性值的元素
  语法3:[属性名^=属性值]选择属性值以指定值开头的元素
  语法4：[属性名￥=属性值]选择属性值以指定值结尾的元素
  语法5：[属性名*=属性值]选择属性值中含有某值的元素
  例子：p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title*=e]{}
  

p[title]{
color:orange;
}

p[title="e"]{
color:orange;
}
p[title^="e"]{
color:orange
}
p[title$="e"]{
color:orange;
}
p[title*="e"]{
color:orange;
}

• 复合选择器
  1.交集选择器
  作用：选中同时复合多个条件的元素
  语法：选择器1选择器2选择器3选择器4选择器n{}
  注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头。
  

div.red{
font-size:39;
}
.a.b.c{
color:blue;
}

2.并集选择器(选择器分组)
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
例子：#b1,p,h1,span,div.red{}

p,#b1,div.red{
color:green;
}