比较两个css的比对器,css选择器对比

1.标签选择器

标签选择器也就是html中的标签，如

,

等

css选择器

/* 标签选择器 */

p{

font-size: 20px;

color: red;

text-align: center;

}

勇气

测试标签选择器

结果如图

图一

2.类选择器

类选择器是css代码中最常用到的使用如下

css选择器

/* 类选择器 命名格式 .类选择器名称{}*/

.setRedColor{

color: red;

font-size:15px;

}

这是测试的

测试类选择器

结果如图

图二

3.id选择器

id选择器和类型选择器类似，命名的时候使用“ # ”号代替“ . ”使用的时候用“ id ”代替“ class ”

css选择器

/* 类选择器 命名格式 .类选择器名称{}*/

#setGreenColor{

color: green;

font-size:15px;

}

这是测试的

测试id选择器

结果如图：

图三

4.子选择器

子选择器用法在选择器后用“>”并接标签

css选择器

/* 这个就是子选择器 */

.food>li{

border: 1px solid red;

}

这是测试的

• 食物
  • 面条
  • 馒头
• 蔬菜
  • 黄瓜
  • 辣椒

结果如图：

图四

5.包含选择器也可以说成后代选择器

用法和子选择类似 把“ > ” 替换成 " "空格

css选择器

/* 这个就是子选择器 */

.food li{

border: 1px solid red;

}

这是测试的

• 食物
  • 面条
  • 馒头
• 蔬菜
  • 黄瓜
  • 辣椒

结果如图：

图五

6.通用选择器

通用选择器是作用于全局的使用如下

css选择器

/* 这个就是子选择器 */

*{

color: red;

}

这是测试的

• 食物
  • 面条
  • 馒头
• 蔬菜
  • 黄瓜
  • 辣椒

结果如图：

图六

7.伪类选择器

初识CSS

/* 这个就是伪类选择器 */

a:hover{

color: yellow;

}

这是测试的

• 食物
  • 面条
  • 馒头
• 蔬菜
  • 黄瓜
  • 辣椒

结果如图：当鼠标停在面条上 颜色就会变成黄色

360截图20190610230556803.jpg

8.并集选择器

各个选择器用逗号“,”隔开

/* 并集选择器 选择器之间用逗号“,”隔开 */

p, div {

color: red;

font-size: 25px;

}

熊大

熊二

• 小猪佩奇
• 猪爸爸
• 猪妈妈

结果如图：

截屏2019-11-1614.35.44.png