基本选择器包括标签选择器、类选择器和ID选择器三类，其他选择器都是在这三类选择器的基础上组合形成

标签选择器

示例：

    <style type="text/css">

        p{

            font-size:12px;

            color:red;

         }

    </style>

类选择器

标签选择器虽然方便，但是也存在缺陷，因为每个标签选择器所定义的样式不仅仅影响某一个特定对象，而且会影响到页面中所有同名的标签。

类选择器可以为网页对象定义不同的样式类，实现不同元素拥有相同的样式、相同的元素拥有不同的样式。

类选择器以一个"."为前缀开头，让后跟随一个自定义的类名

如图：



示例1：

<!doctype html>

<html>

<head>

	<style type="text/css">

		p{

			font-size: 12px;

			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

			color: aqua;

		 }

	</style>

<meta charset="utf-8">

<title>示例</title>

</head>

<body>

	<p>问君能有几多愁，恰似一江春水向东流</p>

	<p>剪不断，理还乱，是离愁，别是一番滋味在心头</p>

	<p>独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间</p>

</body>

</html>

运行结果：



示例2：



示例3：

<!doctype html>

<html>

<head>

	<style type="text/css">

		p{

			font-size: 12px;

			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

			color: aqua;

		 }

		.font18px{font-size: 18px;}

		.underline{text-decoration: underline;}

		.italic{font-style: italic;}

	</style>

<meta charset="utf-8">

<title>示例</title>

</head>

<body>

	<p class="underline">问君能有几多愁，恰似一江春水向东流</p>

	<p class="font18px">剪不断，理还乱，是离愁，别是一番滋味在心头</p>

	<p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间</p>

</body>

</html



类选择器可以精确控制界面中的每一个对象样式，而不管这个对象属于是什么类型的标签，同一个类样式可以被多个对象引用，也不管这个对象是属于什么类型的标签。

通过类选择器指定的标签范围，能够更精确的控制页面元素的样式，避免类样式对于所有元素的影响。

<!doctype html>

<html>

<head>

	<style type="text/css">

		p{

			font-size: 12px;

			color:brown;

		 }

		.font18px{font-size: 18px;}

		.underline{text-decoration: underline;}

		.italic{font-style: italic;}

		p.font18px{/*指定段落的类样式*/font-size: 24px;}

	</style>

<meta charset="utf-8">

<title>示例</title>

</head>

<body>

	<div class="font18px">问君能有几多愁，恰似一江春水向东流</div>

	<p class="font18px">剪不断，理还乱，是离愁，别是一番滋味在心头</p>

	<p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间</p>

</body>

</html>

CSS标签选择器&类选择器的更多相关文章

  1. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  2. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  3. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

  4. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

  5. 前端 CSS的选择器 基本选择器 类选择器

    类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...

  6. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  7. css之伪类选择器:before :after(::before ::after)

    一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before  :after的区别:css3中修订后的伪元素使用:: ...

  8. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  9. a标签伪类选择器以及伪元素:hover的案例

    1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...

随机推荐

  1. excel矩阵运算操作-转置 行列式 相乘 逆阵

    excel矩阵运算操作-转置 行列式 相乘 逆阵 https://jingyan.baidu.com/article/154b463128e13928ca8f41a4.html Excel中矩阵的相关 ...

  2. Win10 cmd控制台程序会被鼠标单击暂停的解决办法

    右键单击顶部白框,选择属性或默认值,将快速编辑模式的勾取消就可以了,最后记得点击确定

  3. tp3.2升级tp5需要注意的变化

    I方法用input代替:D和M方法没了,需要的话自己封装.C方法没了,需要自己封装,配置文件说明官方文档写的不对,无法使用 Session的使用发生很大变化 模板渲染,控制器传空值会报错 模板内置标签 ...

  4. [LeetCode] 190. Reverse Bits 翻转二进制位

    Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...

  5. java面试 （六）

    1 String.split(String regex), 传入的参数是正则表达式,有一些特殊字符(比如.[]()\| 等)需要转义. 2  关于枚举类型,一般用作常量,理想情况下,枚举中的属性字段是 ...

  6. Apollo环境配置

    一.背景 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理 ...

  7. Oracle spatial空间查询的选择度分析

    在上一篇中,我用一个案例演示了对于数值或字符串类型的字段,选择度的计算方法.并证明了当字段值的选择度不同时,将会影响CBO选择最终的执行计划.对于可排序的字段类型,选择度计算模型已经有很多人写博客介绍 ...

  8. idea关闭sonarLint自动扫描

    手动运行SonarLint 停止SonarLint自动检测代码之后,可以使用Ctrl+Shift+S手动运行SonarLint检查代码

  9. LeetCode 240. 搜索二维矩阵 II(Search a 2D Matrix II) 37

    240. 搜索二维矩阵 II 240. Search a 2D Matrix II 题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性 ...

  10. IDEA的一个设置, 关系到maven的运行, 默认是使用jre的, 有时候不够用需要改成jdk