2.CSS选择器-CSS基础
一、元素的id和class
id 和 class
是元素最基本的两个属性,一般情况下,id 和 class
都是用来选择元素,进而进行CSS
操作或JavaScript
操作。
1.id属性
id属性
具有唯一性,也就是说一个页面中相同的id
只能出现一次。 若出现多个相同id
,那么CSS
或JavaScript
会无法识别,这个id
对应的是哪个元素。
2.class属性
class,类。思想和别的编程语言相似。 我们可以通过为同一个页面的相同元素或不同元素设置相同的
class
,然后使得具有相同class
得元素具有相同的样式。
3.形象理解
因为
id属性
具有唯一性,所以它其实和我们的身份证号码一样,全国唯一。 而class
不具唯一性,它就和我们的名字一样,全国有的人名字就是一模一样的。
二、选择器是什么
选择器,就是用一种方式把我们想要的那个元素选中。只有把它选中,我们才可以为这个元素添加
CSS样式
。 在CSS
中,有很多方式可以把我们想要的元素选中,这些不同的方式其实就是不同的选择器。选择器的不同,在于选择方式不同,但是它们的最终目的是一样的,那就是把想要的元素选中,然后才可以定义该元素CSS样式
。 我们也可以用一种选择器来代替另一种选择器,这仅仅是选择器不同而已,但目的都是一样的。
三、CSS选择器
CSS选择器
非常多,以下是最常用的 5 种选择器:
- 元素选择器
- id 选择器
- class 选择器
- 后代选择器
- 群组选择器
可千万不要小看它们,这 5 种选择器使用频率占所有选择器的 80%
以上。
CSS选择器格式
选择器{
属性1 : 取值1;
...
属性n : 取值n;
}
1.元素选择器
元素选择器,就是选中指定的相同的所有元素,然后给相同的元素定义同一个
CSS样式
。
(2)示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title></title>
<style type="text/css">
div{ /*元素选择器,选择所有的div标签*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span>見贤思齊</span>
<p>見贤思齊</p>
<strong>見贤思齊</strong>
<em>見贤思齊</em>
<div>見贤思齊</div>
</body>
</html>
元素选择器示例1.png
2.id 选择器
其实,id 选择器就像是我们的身份证号码一样,在同一个页面中,不允许出现 2 个相同的
id
。 我们可以为元素设置一个id属性
,然后针对设置了这个id
的元素定义CSS样式
,这就是id 选择器
。
(1)#前缀
对于
id 选择器
,id
名前必须加上前缀#
。 不加的话,id 选择器
无法生效,只有加上前缀#
,才表示这是一个id 选择器
。
(2)示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title></title>
<style type="text/css">
#hope{ /*id选择器*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span>見贤思齊</span>
<p>見贤思齊</p>
<strong id="hope">見贤思齊</strong>
<em>見贤思齊</em>
<div>見贤思齊</div>
</body>
</html>
id选择器示例1.png
3.class 选择器
class 选择器,即类选择器,就是可以对相同的元素 或 不同的元素定义相同的
class属性
,然后针对拥有同一个class属性
的元素进行CSS样式
操作。
(1).前缀
对于
class 选择器
,class名前必须要加上前缀 .(注意:一定是英文的点)。 否则class 选择器
无法生效,只有加上前缀.
,才表示这是一个class 选择器
。
(2)减少大量重复代码
要为两个及以上元素定义相同的样式,建议使用
class 选择器
,因为可以减少大量重复代码。
(3)示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
.dream{ /*class选择器*/
color:#00FFFF;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<span class="dream">見贤思齊</span>
<p>見贤思齊</p>
<strong class="dream">見贤思齊</strong>
<em>見贤思齊</em>
<div class="dream">見贤思齊</div>
</body>
</html>
class选择器示例1.png
4.后代选择器
后代选择器,就是选择元素内部中所有的某一种元素,包括子元素和其它后代元素。
(1)空格隔开
父元素和后代元素必须用空格隔开,从而表示选中某个元素内部的后代元素。
(2)示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
/*后代选择器*/
#first div{
color:#00FFFF;
}
#second p{
color:#66A9FE;
}
</style>
</head>
<body>
<div id="first">
<span>見贤思齊</span>
<div>見贤思齊</div>
</div>
<div id="second">
<p>見贤思齊</p>
<span>見贤思齊</span>
<p>見贤思齊</p>
</div>
</body>
</html>
<!--
#first div,表示选中id为first元素下的所有div元素。
#second p,表示选中id为second元素下的所有p元素。
-->
后代选择器示例1.png
5.群组选择器
群组选择器,就是同时对几个选择器进行相同的操作。
(1)英文逗号,隔开
对于群组选择器,每个选择器之间必须用英文逗号“ , ”隔开。 如若不这么做,群组选择器无法生效。
(2)示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS选择器</title>
<style type="text/css">
/*群组选择器*/
h3,#first div,p{
color:#00FFFF;
}
</style>
</head>
<body>
<h3>見贤思齊</h3>
<div id="first">
<span>見贤思齊</span>
<div>見贤思齊</div>
</div>
<p>見贤思齊</p>
<span>見贤思齊</span>
</body>
</html>
<!--
通过元素选择器,选择了所有 h3、p标签,
通过后代选择器,选择了id为first下的div标签。
另外,若再加上span标签,所有span标签都会被选中,此处未写上。
-->
群组选择器示例1.png
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- docker安装官方redis集群并集群连接测试 的正确姿势 自用 实践笔记
- Asp.net Core 使用Jenkins + Dockor 实现持续集成、自动化部署(一):Jenkins安装
- Centos7安装轻量级TCP转发工具rinetd注册为服务的正确姿势 并设置开机自启 实践笔记 自用
- Connection open error . Connection Timeout Expired. The timeout period elapsed during the post-login
- macbook-12-2015款 安装win10系统 自用 实践笔记
- OpenGL ES 之attribute
- windows server 2012 r2 搭建文件服务器 问题记录 自用 实践笔记
- OpenGL ES 之uniform和varying
- OpenGL ES 绘制纹理
- Win10+Unlocker3+VMware15.5+MacOS10.14+xcode+QT for ios+虚拟机苹果系统 自用 实践笔记
- OpenGL ES 纹理过滤模式-glTexParameteri
- Jenkins时间修改为北京时间
- OpenGL ES for Android 绘制一个点
- OpenGL ES for Android 绘制线
- Jenkins自定义主题