基本选择器包括标签选择器、类选择器和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. Windows本地搭建Edusoho环境

    Windows搭建Edusoho比Linux还要轻松的多.因为有很多环境集成工具如xampp.wampserver.phpstudy等.基本上安装号wampserver工具,直接将edusoho项目扔 ...

  2. ACR Code Pacs

    ACR Index for Radiological Diagnosis 简称ACR Index,ACR Key或ACR Code,是一种应用于影像学分类的病理编码,由美国放射学院(American ...

  3. mocha单元测试简易教程

    mocha单元测试简易教程 写在前面 其实mocha单元测试的教程网上有很多,也都很简单易懂,但是每个人对同一份的教程也会产生不同的理解,像我这种大概就是走遍了所有弯路才到达终点的人,想通过给大家分享 ...

  4. 转:sql 经典50题--可能是你见过的最全解析

    题记:从知乎上看到的一篇文章,刚好最近工作中发现遇到的题目与这个几乎一样,可能就是从这里来的吧.^_^ 里面的答案没有细看,SQL求解重在思路,很多时候同一种结果可能有多种写法,比如题中的各科成绩取前 ...

  5. mysql查询、子查询、连接查询

    mysql查询.子查询.连接查询 一.mysql查询的五种子句 where子句(条件查询):按照“条件表达式”指定的条件进行查询. group by子句(分组):按照“属性名”指定的字段进行分组.gr ...

  6. java里的数组和list分别在什么情况下使用？

    数组长度固定,List未限定长度,且支持的功能更多,最常用的ArrayList底层实际上也是使用数组实现. 不需要复杂功能和确定长度的情况下,使用数组效率更高,通常情况建议使用List.

  7. ESXi6.5上的Ubuntu虚机在远程SSH时宕机

    情况是这样的, 有一个ESXi6.5上跑的Ubuntu虚机, 版本是18.04.1, 今天升级成18.04.2后, 就发现远程连接SSH不对劲, 在本地登录和操作都好好的, 只要远程SSH一连接, 服 ...

  8. typescript - 3.函数

    (1)函数的定义 ## 函数声明法 // function run():string{ // return 'run'; // } //错误写法,返回类型错误 // function run():st ...

  9. mysql 如何减少InnoDB关闭时间

    原文连接: https://www.percona.com/blog/2009/04/15/how-to-decrease-innodb-shutdown-times/ 有时,运行InnoDB的MyS ...

  10. CNeo编程语言概述

    C语言诞生于1970年,当时在AT&T实验室由Dennis Ritchie主导开发的.据说当时仅用了一周的时间就做好了C语言编译器,所以尽管C语言从90年正式纳入ISO标准委员会,其编号为IS ...