登录 | 地图 欢迎访问【UZ导航】
当前位置:网站首页 > 推荐 > 正文

HTML的id选择器&类选择器

admin 2019-10-03 199 浏览 0 评论

1.jpg

一、问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式

二、id选择器

1.定义:根据指定的id名称找到对应的标签,然后设置属性

2.格式:

id名称{

 属性:值;

3.例如:

<style>
 p{
 color: rgb(255,45,45);
 }
 #label1{
 color:black;
 }
 #label2{
 color: #37fa1e;
 }
 #label3{
 color: blue;
 }
 #label4{
 color:green;
 }
</style>
</head>
<body>
<b id="label1"></b>
<p id="label2">迟到毁一生</p>
<p id="label3">早退穷三代</p>
<p id="label4">按时上下班</p>
<p id="label5">必成高富帅</p>

2.jpg

4.注意:

(1)每个HTML标签中都有一个属性叫做id ,也就是说每个标签都可以设置id

(2)在同一个界面中id名称是不可以重复的

(3)在编写id选择器的时候一定要在id名称前面加上#

(4)id名称是有规范的:只能由字母、数字、下划线组成的,且不能以数字开头;id名称不能以HTML标签名来命名

(5)在企业开发中一般情况下如果仅仅是为了设置样式,我们一般不会使用id,因为在前端开发中id是留给js使用的,可以使用类选择器

三、类选择器

1.定义:根据指定的类名称找到对应的标签,然后进行设置属性

2.格式:

(1)写在HTML中的与id的格式是一致的

(2)在style中:

.类名{

 属性:值;

3.例子:

 <style>
 .pp2{
 color: aqua;
 }
 .pp3{
 color:blue;
 }
</style>
</head>
<body>
<p class="pp2">迟到毁一生</p>
<p class="pp3">早退穷三代</p>
<p class="pp2">按时上下班</p>
<p class="pp2">必成高富帅</p>

</body>

3.jpg

4.注意点:

(1)每个HTML标签中都有一个属性叫做class ,也就是说每个标签都可以设置class

(2)在同一个界面中class名称是可以重复的

(3)在编写class选择器的时候一定要在class名称前面加上.

(4)class名称是有规范的:只能由字母、数字、下划线组成的,且不能以数字开头;class名称不能以HTML标签名来命名(和id的命名规范一样)

(5)使用类选择器就是为了设置样式的

(6)在HTML中每个标签可以同时绑定多个类名

格式:

<标签名称 class=“class名1 class名2 class名3”>

例如:

 .ppp{
 font-size: 50px;
 }
 .pppp{
 color:red;
 }
 .ppppp{
 font-family: 微软雅黑;
 }

.......(省略中间的)
<p class="ppp pppp ppppp">实验一下</p>

相关推荐

3月共有5亿海外用户涌入速卖通,App下载量已超过亚马逊
3月共有5亿海外用户涌入速卖通,App下载量已超过亚马逊

5月23日消息英国金融债券媒体LearnBonds近日发布报告称,受疫情影响,网购在海外迅速普及开来,全球手机购物用户激增。阿里巴巴旗下中国最大的跨境电商...

6小时前 admin

拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
  • 拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
  • 拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
  • 拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
  • 拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
受疫情影响 2020纽约车展正式宣布取消
受疫情影响 2020纽约车展正式宣布取消

当地时间5月22日,纽约车展组委会宣布受新冠肺炎疫情的影响,2020年纽约车展正式取消,下一届纽约车展将于2021年3月31日-4月11日期间举行,其中3月31...

1天前 admin

京东正式上线“自营房产”
京东正式上线“自营房产”

5月22日,京东房产与中骏集团在京签署战略协议,中骏集团成为首个在京东开设自营旗舰店的房产开发商,这也标志着京东正式上线“自营房产”业务。据京东方面介绍,通过此...

2天前 admin

重量级第一人泰森-富里:我很丑还秃顶,但没有人能战胜我
重量级第一人泰森-富里:我很丑还秃顶,但没有人能战胜我

近日,现WBC/《拳坛》杂志重量级拳王英国“吉普赛皇帝”泰森-富里(30-0-1,21KO)在接受媒体采访时表示,他现在是引领拳坛的超级巨星,而且是战无不胜的。...

3天前 admin

我国开通5G基站超20万个 运营商详解如何推进5G融合应用
我国开通5G基站超20万个 运营商详解如何推进5G融合应用

央广网北京5月17日消息(记者吕红桥)据中央广播电视总台经济之声《天下财经》报道,5月17日是世界电信日,工信部、几大运营商在世界电信日大会上重点聚焦5G,介绍...

7天前 admin

加入了太多微信群,该怎么管理
  • 加入了太多微信群,该怎么管理
  • 加入了太多微信群,该怎么管理
  • 加入了太多微信群,该怎么管理
  • 加入了太多微信群,该怎么管理
一个美团成功的背后,是上千家类似企业的倒闭
一个美团成功的背后,是上千家类似企业的倒闭

2010年3月4日,是美团第一次上线的日子,当时美团的噱头是,一周只卖七件商品。和所有被指抄袭的公司一样,美团的模仿对象,是明星创业公司Groupon。在这种团...

1周前 (05-16) admin

百度正式上线快速收录功能
百度正式上线快速收录功能

百度熊掌天级收录正式下线,新上线快速收录功能,接替天级收录保持熊掌ID权益不变。以下是百度快速收录上线公告原文:1.工具说明快速收录可用于提交站点新增的时效性...

1周前 (05-16) admin

招聘4巨头入驻支付宝!1000家名企开“数字招聘办”
招聘4巨头入驻支付宝!1000家名企开“数字招聘办”

“刚开学就毕业,我该上哪儿找工作?”“疫情前辞职,我还能找到工作吗?”今年应届毕业生高达874万,再创新高,“史上最难就业季”来临。而随着全国复工复产的加速,求...

1周前 (05-15) admin

小米新路由器AX1800正式发布
小米新路由器AX1800正式发布

5月13日讯,小米今天正式发布全新路由器小米路由器AX1800,目前该款路由器已经开始预约,将会在本周五开启预售。小米路由器AX1800首发高通5核企业级芯片,...

2周前 (05-13) admin

欢迎 发表评论: