基本选择器包括标签选择器、类选择器和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. go 牛顿法开平方

    func main() { fmt.Println(sqrt(3)) } func sqrt(x float64)float64{ z := x for i := 0; i < 10 ; i++ ...

  2. Runtime Only和Runtime + Compiler

    如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版 当使用 vue-loader ...

  3. Redis配置讲解及实战

    前言 Redis是一个开源的内存k-v数据库,同时也可用作缓存,消息队列.支持多种数据类型,如字符串,列表,字典,集合,有序集合. 演示环境 $ uname -a Darwin Darwin Kern ...

  4. 006 vue监控

    一:监视 1.使用keyup <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. np.concatenate

  6. unable to lock the administration错误解决

    在ubantu系统上,使用 apt-get 命令或者其相对更新的APT 管理工具时,遇到 unable to lock the administration directory (/var/lib/d ...

  7. 数据分析入门——pandas之DataFrame数据丢失

    一.数据丢失分类 1)nd中分为两种:None和np.nan(NaN) 其中,None是python中的对象,是一个object:而nan是一个float类型 两种不同的类型,运算速度也是不同的 2) ...

  8. Laya的版本管理

    参考: Laya项目发布详解 发布时,勾选开启版本管理 点击上图“是否开启版本管理”右边的+号. 可以选择加入版本管理,或者排除版本管理的文件夹. 比如我要排除bin/test这个文件夹下的文件,不使 ...

  9. [LeetCode] 151. Reverse Words in a String 翻转字符串中的单词

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  10. C/C++ 面试-内存对齐 即不同数据类型存储空间

    下面列举了Dev-C++下基本类型所占位数和取值范围: 基本型                          所占位数              取值范围                输入符举例 ...