选择器03-理解CSS基本选择器
1 /8
5-3-1理解CSS基本选择器
同学们好欢迎同学们学习Web前端设计基础课程。课程将围绕一个网站建设项目进行相关知识和操作技术的学习。本次课程的任务是理解CSS的基本选择器。
CSS基本语句的结构: 选择器{属性1 :值1;属性2:值2;……} 。
选择器用来指定本语句所定义的样式是为HTML文件中哪个标记或为哪些内容所定义的选择器分为基本选择器、复合选择器。本次课程我们将学习CSS基本选择器包括标记选择器、类选择器、 ID选择器、伪类选择器和伪元素选择器等。
1.标记选择器
标记选择器有两种应用情况。一种是用于为文档中某个特定的HTM L标记定义相同的样式语法结构 标记名{属性值;...... }用于样式声明。
这个例子就是定义标题h1标记的样式。下面这个定义的是h1 、 h2、 h3三个标记的文本颜色 同时声明了三个标记样式使用的是并集三个标记之间使用逗号来进行分割。
标记选择器的第二种用法是为具有嵌套关系的HTML标记定义样式。 h1 a{color:red;font-size:18pt;}定义h1标记中链接a标记的样式内容表示位于h1标记元素内的a标记的内容显示为红色、字体大小为18pt。
这是标记选择器的应用实例在<style>区中定义了段落p标记的样式。 <body>区中有两个段落p标记这两个段落p标记都要应用段落p标记定义的样式。这是
2/8
它的预览效果后两行就是段落p定义的内容都是应用了样式的设置。
2.类选择器
大多数时候不需要为具体的HTM L标记定义样式而是定义一些开放的格式在内容需要时再引用这些格式或者样式可以通过用户自定义的类来实现。类选择器是以一个点号开头类选择器的名称第一个字符不能够使用数字。
类选择器的应用主要有两种情况一种是在网页中多处使用相同的标记但是每处标记又定义了不同的属性选择器类名{属性值……}。例如在网页中有两处要使用h2标记但每处的文本具有不同的颜色那么我们就可以进行如下的定义h2.color-red{color:red; }h2.color-blue {color:blue; }
然后在网页中需要的地方使用class属性引用样式例如
<h2 class="color-red">第五章html</h2>
<h2 class="color-blue">第六章css</h2>
另一种类选择器的命名方式是点加类名然后再加上样式的具体的声明 类名{属性值……}。例如创建了一个类样red定义其颜色color为红色然后在所有需要引用该类的标记中也是使用class属性来进行样式应用。那么大家看到
3/8
段落p标记中可以应用class类样式还可以是h2标记也应用这个类样式。
这个是类选择器的应用实例。我们先看下样式的定义既定义了li列表项的标记样式 同时还定义了txt类样式。我们看看<body>区中样式的具体应用 <body>区中的无序列表中有4个列表项第一个列表项和第三个列表项都应用了类样式。在预览效果中列表的第一项和第三项使用的类样式而其他的列表项则应用的是标记li的样式。
3.ID选择器
ID选择器的使用方法和c lass选择器基本相同不同之处就在于一个ID选择器只能应用于HTML文档中的一个元素 因此它的针对性更强。而class选择器可以
4/8
应用于多个元素上。
ID选择器是以半角“#”开头 ID选择器名称第一个字符不能够为数字。这是ID选择器的结构图。
这个是ID选择器的应用实例其中定义了两个ID选择器名字是red和green分别设置颜色显示红色和绿色。在<body>区中有两个段落p元素第一个段落p应用的是ID选择器red的样式所以显示为红色第二个段落p应用的是ID选择器gre e n的设置所以第二行显示的是绿色。
5/8
4.伪类选择器
CSS伪类是用来添加一些选择器的特殊效果。在CSS中是已经定义好的选择器不能够随便改名。 同一个选择器根据其不同的状态有不同的样式我们就称为伪类。
伪类选择器通常使用冒号来表示用在选择器之后用于指明元素在某种状态下才能够被选中。这是常用的伪类选择器的列表其中我们用的比较多的是超链接四个状态涉及到的伪类选择器主要包括 act ive状态就是将样式添加到被激活的元素 ho ver状态是指当鼠标悬停在元素上时 向元素添加样式 link状态是指将特殊的样式添加到未被访问过的链接上 vis ited状态是将特殊的样式添加到被访问过了的链接上。
下面我们就看下使用伪类选择器来进行超链接四个状态的设置。 a:link状态用于定义超链接普通状态的样式 a:vis ited的状态用于定义被访问了的链接的显示样式 a:ho ver状态用于定义将鼠标置于超链接之上的显示状态 我们又称为超链接的悬停状态 a:ac tive状态用于定义超链接即将点击时的显示样式 active状态我们又称为超链接的激活状态。
在超链接状态的CSS定义中需要遵循LVHA顺序。这个是伪类选择器的应用实例就是定义超链接四个状态样式的设置情况。我们看到在<style>标记中就是按照LVHA的顺序来定义超链接的四个状态。 <body>区中有两个超链接的设置第
6/8
一个超链接的设置是使用<a>标记中的na me属性来定义个锚点第二个超链接是使用<a>标记中的hre f属性来定义超链接。在预览效果中我们看到只有第二个超链接应用了所定义的样式而第一个链接是锚点链接则没有应用所定义的样式。
a样式和a:l ink样式的区别。其中a定义的样式针对所有的超链接包括锚点而a:link定义的样式针对的是所有写了hre f属性的超链接不包括锚点。
5.伪元素选择器
并不是针对真正的元素使用的选择器而是针对CSS中已经定义好了的伪元素使用的选择器。伪元素通常以“ ”或“ ”开头在选择器之后用于选择指定的元素。
表中列出了常用的伪元素选择器主要有 first-le tte r将特殊的样式添加到文本的首字母 firs t-line将特殊的样式添加到文本的首行 be fore在某元素之前插入某些内容 a fter在某元素之后插入某些内容。
这个是伪元素选择器的实例其中进行了首字符、首行 以及段落p三个样式的设置。我们看下预览效果第一行是加粗显示看到其样式中就定义了{fo nt-we ight:bo ld}的样式设置就是让第一行进行加粗。我们再看第一个字母它是原来字母的两倍样式中进行了firs t-letter { fo nt-s ize:2 e m; }设置是原字体大小的两倍。我们看到段落首行缩进一个字符主要是定义了段落p标记p{te xt-inde nt:1 e m;}
7/8
文本缩进1个字符。
在C S S基本选择器这个知识点中我们学习了标记选择器、类选择器、 ID选择器、伪类选择器、伪元素选择器需要注意各类选择器的应用场景、选择器命名的要求。例如类选择器在命名时要求是以点开头而且要求第一个字符不能是数字 ID选择器命名要求是以半角“#”开头。伪类选择器我们主要介绍了超链接四个状态的应用需要强调的是超链接四个状态在进行CSS样式定义时遵循LVHA的顺序。对于伪元素选择器我们通过具体实例讲解了首字母、首行样式的设置及应用。
8/8
美国cera机房 2核4G 19.9元/月 宿主机 E5 2696v2x2 512G
美国特价云服务器 2核4G 19.9元杭州王小玉网络科技有限公司成立于2020是拥有IDC ISP资质的正规公司，这次推荐的美国云服务器也是商家主打产品，有点在于稳定 速度 数据安全。企业级数据安全保障，支持异地灾备，数据安全系数达到了100%安全级别，是国内唯一一家美国云服务器拥有这个安全级别的商家。E5 2696v2x2 2核 4G内存 20G系统盘 10G数据盘 20M带宽 100G流量 1...
老用户专享福利 腾讯云 免费领取轻量云2核4G服务器一年
感恩一年有你!免费领取2核4G套餐!2核4G轻量应用服务器2核 CPU 4GB内存 60G SSD云硬盘 6Mbps带宽领取地址：https://cloud.tencent.com/act/pro/lighthousethankyou活动规则活动时间2021年9月23日 ~ 2021年10月23日活动对象腾讯云官网已注册且完成实名认证的国内站用户（协作者与子用户账号除外），且符合以下活动条件：账号...
SugarHosts新增Windows云服务器sugarhosts六折无限流量云服务器六折优惠
SugarHosts糖果主机商我们较早的站长们肯定是熟悉的，早年是提供虚拟主机起家的，如今一直还在提供虚拟主机，后来也有增加云服务器、独立服务器等。数据中心涵盖美国、德国、香港等。我们要知道大部分的海外主机商都只提供Linux系统云服务器。今天，糖果主机有新增SugarHosts夏季六折的优惠，以及新品Windows云服务器/云VPS上线。SugarHosts Windows系统云服务器有区分限制...
