类选择符和ID选择符

类选择符

HTML代码:

CSS代码:

div {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 20px;
}
.one{
box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}

如果想让网页中某些元素的外观与其他同类标签区分开,可以使用类选择符。

首先给选择符起一个名字,然后把这个名字指定给想装饰的HTML标签。例如上一个例子中,我就给第一个div命名为“one”。

类选择符还能精确控制某个元素的外观,而不管元素使用的是哪个标签。比如想要装饰一段话里的一两个词,儿不想影响整个

标签的外观。这时就可以用类选择符选取要装饰的词。

需要注意的是,使用类选择符选取某个标签里的部分单词时,需要借助标签。

类选择符的用法:

在CSS中,类选择符的名称必须以点号开头。这样Web浏览器才能在样式表中找到类选择符。

类选择符的名称中只能包含字母、数字、连字符和下划线。

选择符的名称必须以字母开头。

类选择符区分大小写。

在HTML中,标签设置class属性。

在HTML中,class属性的值前面不用加点号。只有在样式表中类选择符的名称前面需要点号。

一个标签使用多个类

除了可以把同一个类应用到不同的标签上之外,一个标签还可以同时使用多个类。

编写多个类样式,在一个标签中设置多个类,听起来要做很多工作,可在实际开发中却经常这么做。比较火的bootstrap框架就这么做的。

例如我们有多个div,每个div的大小、边框都一样,其他属性各不相同。

HTML代码:

CSS代码:

/*类型选择器 */
div {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 20px;
}
/* 以下三个都是类选择器 */
.one{
background: linear-gradient(#1574A8, #15A892);
box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}
.two{
background: radial-gradient(#E94E65, #15A892);
}
.three{
background:
linear-gradient(to bottom, cyan, transparent),
linear-gradient(225deg, magenta, transparent),
linear-gradient(45deg, yellow, transparent);
}

Web浏览器和HTML都允许为同一个标签设置多个类。在HTML中,类通过class属性指定,其值中的每个类名由空格分开。

浏览器会把各个类的属性合并在一起,然后再应用到元素上。

ID选择符

CSS使用ID选择符选取网页中的特定部分,例如横幅、导航栏或者主内容区域。

在HTML中设置ID的方法与设置类的方法差不多,不过使用的属性不同。

HTML代码:

CSS代码:

div {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 20px;
}
#d1{
background:
linear-gradient(to bottom, cyan, transparent),
linear-gradient(225deg, magenta, transparent),
linear-gradient(45deg, yellow, transparent);
}

在HTML中,元素设置id属性。

在CSS中,用 # 井号开头,后面跟着id名。

正确地使用ID

HTML的id属性有些作用是class属性实现不了的。这些优势与CSS没关系,因此完全可以不适用ID选择符。

ID的优势:

1、为网页重点元素设定ID后,JavaScript程序员可以通过ID轻易定位并处理网页中的某部分内容。例如,程序员经常会为表单的元素设定ID,例如填写访客名字的文本框。JavaScript通过ID定位这个表单元素后可以做很多处理,例如,确保访客提交表单时哪个字段不是空的。

2、使用ID还能链接到网页中的特定部分,对内容多的网页来说,这样便于快速导航。如果有个按字母表顺序排列的术语表,可以使用ID选择符链接到以各个字母开头的部分。

Web设计圈有个趋势,尽量不在CSS中使用ID选择符。

我的理解是因为ID选择符的特指度比较高,后续如果要覆盖样式会增大难度。而且ID的使用程度没类的使用程度广。

ID属性就相当于我们人的身份证,具有唯一的标示性。

类属性就有点类似人的价值观,拥有同一种价值观的人可以有很多,一个人也可以同时拥有几种价值观。

ID选择器和选择器的不同点

一个元素可以有多个类,一个类也可以添加到多个元素中。

一个ID在同一个网页中只能出现一次,一个元素只能有一个ID。

本文来自企鹅号 - Rabbit媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

WAI-ARIA无障碍网页应用属性完全展示

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏...

2404
来自专栏前端新视界

关于 CSS 反射倒影的研究思考

原文:The State of CSS Reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览。该文章篇幅较长,内容庞杂...

3029
来自专栏web编程技术分享

HTML&CSS Table元素详细解说

3678
来自专栏柠檬先生

NEC html规范

HTML规范 - 整体结构 HTML基础设施 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。 必须申明...

2635
来自专栏编程

前端学习自学笔记:day03

嗯,说实话,我写这个的话比较少人看啊,但是还是继续坚持下去吧,可不可能半途而废啊,接下来是第三天的笔记. ? 在此之前先为大家显示下前端工程师的路线图: 第三天...

1915
来自专栏前端学习心得

React三大突出特点

1292
来自专栏阮一峰的网络日志

CSS in JS 简介

1、 以前,网页开发有一个原则,叫做"关注点分离"(separation of concerns)。 ? 它的意思是,各种技术只负责自己的领域,不要混合在一起,...

3057
来自专栏向治洪

React Native之样式

样式 React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定,你可以阅读那些幻灯片,了解...

2185
来自专栏Micro_awake web

JQuery基础

学习jQuery的时候,很快过了一遍,发现好多知识点不清晰。看来还是要写出来加深印象,平时多练习! jQuery是一个Javascript函数库,轻量级,“写得...

2305
来自专栏一直在跳坑然后爬坑

里程表式跑马灯自定义控件

https://github.com/nelson1110/MarqueeView

1102

扫码关注云+社区