基本选择器包括标签选择器、类选择器和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. Python3 fake_useragent 模块的使用和报错解决方案

    在使用 Python 做爬虫的时候,我们需要伪装头部信息骗过网站的防爬策略,Python 中的第三方模块 fake_useragent 就很好的解决了这个问题,它将给我们返回一个随机封装了好的头部信息 ...

  2. Java_jdbc 基础笔记之十四 数据库连接（元数据）数据库信息及连接信息

    public class MetaDatatest { /** * DatabaseMetaData 是描述 数据库的元数据对象 可以由Connection得到 */ @Test public voi ...

  3. centos 添加／删除用户和用户组

    centos系统添加/删除用户和用户组     在centos中增加用户使用adduser命令而创建用户组使用groupadd命令,这个是不是非常的方便呀,其实复杂点的就是用户的组与组权限的命令了,下 ...

  4. django -xadmin 详解 功能实现及orm 的复习

    django 在xadmin中自定义内容的变量及优化汇总 一: 首先下载xadmin pip install git+git://github.com/sshwsfc/xadmin.git@djang ...

  5. 必须要注意的 C++ 动态内存资源管理(一)——视资源为对象

    必须要注意的 C++ 动态内存资源管理(一)——视资源为对象 一.前言         所谓资源就是,一旦你用了它,将来必须还给系统.如果不这样,糟糕的事情就会发生.C++ 程序中最常见使用的资源就是 ...

  6. nginx自定义错误页面

    这里配置注意是在 server 443端口 ,蓝色部分为主要部分.这个server不是全部代码. server{ #监听443端口 listen ; #对应的域名,把baofeidyz.com改成你们 ...

  7. PyTorch之DataLoader杂谈

    输入数据PipeLine pytorch 的数据加载到模型的操作顺序是这样的: ①创建一个 Dataset 对象②创建一个 DataLoader 对象③循环这个 DataLoader 对象,将img, ...

  8. k8s添加凭证

    请参照:https://www.cnblogs.com/effortsing/p/10013441.html

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

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

  10. [LeetCode] 543. Diameter of Binary Tree 二叉树的直径

    Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...