0
点赞
收藏
分享

微信扫一扫

【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )


文章目录

  • ​​一、 ID 选择器​​
  • ​​1、简介​​
  • ​​2、代码示例​​
  • ​​二、通配符选择器​​
  • ​​1、简介​​
  • ​​2、代码示例​​
  • ​​三、CSS 选择器使用注意事项​​






一、 ID 选择器



1、简介



ID 选择器 使用 " #id " 选择 指定的 某一个 标签

  • 首先 , 在 HTML 中 设置 标签的 ID ;

<p id="name">标签内容</p>

  • 然后 , 在 CSS 样式中使用 ID 选择器 ;

#name  {   
color: blue;
font-size:20px;
}



在一个 HTML 页面中 , 标签的 ID 是唯一的 , 不允许重复 ;

** ID 选择器 与 类选择器 的使用方法基本一致 ;**

在开发时 , ID 选择器 不推荐使用 , 使用频率不高 , 推荐使用 类选择器 ;



2、代码示例



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google</title>
<base target="_blank"/>
<style>
.fontsize80 {
font-size: 80px;
}
#blue {
color: blue;
}
#red {
color: red;
}
#orange {
color: orange;
}
#green {
color: green;
}
</style>
</head>
<body>
<span class="fontsize80" id="blue">G</span>
<span class="fontsize80" id="red">o</span>
<span class="fontsize80" id="orange">o</span>
<span class="fontsize80" id="blue">g</span>
<span class="fontsize80" id="green">l</span>
<span class="fontsize80" id="red">e</span>
</body>
</html>

运行效果 :

【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )_html






二、通配符选择器



1、简介



通配符选择器 * 可以 选择所有标签 ;

语法如下 : 下面的样式会 将 html 中所有的标签都设置如下 样式 ;

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



通配符选择器 会降低 页面的 打开速度 , 如果没有特殊情况 , 不推荐使用 ;



2、代码示例



通配符选择器代码示例 : 使用通配符选择器 * 将 HTML 所有页面标签的文本设置成了 黑色 ;

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google</title>
<base target="_blank"/>
<style>
.fontsize80 {
font-size: 80px;
}
* {
color: black;
}
</style>
</head>
<body>
<span class="fontsize80" id="blue">G</span>
<span class="fontsize80" id="red">o</span>
<span class="fontsize80" id="orange">o</span>
<span class="fontsize80" id="blue">g</span>
<span class="fontsize80" id="green">l</span>
<span class="fontsize80" id="red">e</span>
</body>
</html>

运行效果 :

【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )_前端_02






三、CSS 选择器使用注意事项


CSS 选择器使用注意事项 :

  • 尽量不使用 ID 选择器 ;
  • 尽量不使用 通配符选择器 ;
  • 使用标签选择器时 , 尽量不对 无意义的标签 进行选择


举报

相关推荐

0 条评论