CSS的选择器
作用：选择页面上的某一个或者某一类元素
1、基本选择器
1、标签选择器
2、类选择器
3、id选择器
1.1 标签选择器
标签选择器，会选择到页面上所有这个标签的元素。
HTML代码为：
CSS代码为：
h1{
color: red;
}
p{
color: #000000;
}
效果为：
1.2 类选择器
标签选择器，会选择到页面上所有这个标签的元素。
如果只向改变同样标签中的某一个元素，就要采用类选择器。
此外，类选择器也可以跨标签，即如果是同一类，不管是标签还是段落等，都可以同时改变。
综上所述，类选择器，不分是何标签，是看是否为同一类。
HTML代码为：
CSS代码为：
/*
类选择器的格式： .class的名称{}
*/
.第1类{
color: red;
}
.第2类{
color: blue;
}
1.3 id选择器
标签选择器：会选择到页面上所有这个标签的元素。
类选择器：如果只向改变同样标签中的某一个元素，就要采用类选择器。
此外，类选择器也可以跨标签，即如果是同一类，不管是标签还是段落等，都可以同时改变。
综上所述，类选择器，不分是何标签，是看是否为同一类。
id选择器：与类选择器的区别在于，全局唯一，不可言多个id，每个标签或者段落等，id彼此不同。
HTML代码为：
CSS代码为：
/*
id选择器的格式： #id的名称{}
*/
#第1类{
color: red;
}
#第2类{
color: blue;
}
#第3类{
color: #000000;
}
1.4 标签选择器、类选择器、id选择器的优先级
id选择器 > 类选择器 > 标签选择器
2、层次选择器
2.1 层次结构如下
第一层：p1、p2、p3、ul。其中，p是段落标签、ul是无序列表标签
第二层：ul下，li、li、li，这是无序列表
第三层：每个li下，有一个p，段落标签
HTML代码为：
效果为：
某个元素的后面 祖爷爷 爷爷 父亲 自己。CSS代码为：
//后代选择器
body p{
background: red;
}
效果：
2.3 子选择器
一代，儿子。CSS代码为：
//子选择器
body>p{
background: #3cbda6;
}
效果：
2.4 相邻兄弟选择器(同辈)
只有一个，向下相邻。CSS代码为：
//后代选择器
.active + p{
background: #a13d30;
}
效果：
2.5 通用选择器
当前选中元素的向下所有兄弟元素。 ：
//后代选择器
.active~p{
background: #02ff00;
}
效果：
3.3 属性选择器(class选择器和id选择器的结合，推荐使用)
HTML搭建的丑框架和代码如下：
效果：
CSS初步优化效果和代码如下：
/*
.demo a{]是后代选择器
*/
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
3.3.1 选中a标签中含有id属性的元素——将其变黄
a[id] {
background: yellow;
}
效果：
3.3.2 选中a标签中id属性为first的元素——将其变绿
a[id=first]{
background: green;
}
效果：
3.3.3 选中a标签中class中含有links的元素——变为黄
a[class*=links]{
background: yellow;
}
效果为：
3.3.4 选中href标签中以http开头的元素——将其变绿
a[href^=http]{
background: green;
}
效果：
3.3.5 选中href标签中以pdf结尾的元素——将其变黄
a[href$=pdf]{
background: yellow;
}
效果：
