基本选择器包括标签选择器、类选择器和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. C++之宏、extern关键字与多线程

    理解C++ 宏 1.特殊字符 考虑下面的需求,程序中多处使用文本字符串.我们知道文本字符串前后都要加上双引号,我很讨厌输入双引号.有没有好的办法呢?根据常识,使用下面的宏: #define Str(x ...

  2. NIO Channel 管道

    Java NIO的通道类似流,但又有些不同: 既可以从通道中读取数据,又可以写数据到通道.但流的读写通常是单向的. 通道可以异步地读写. 通道中的数据总是要先读到一个Buffer,或者总是要从一个Bu ...

  3. android -------- 流式布局，支持单选、多选等

    最近开发中有流式标签这个功能,网上学了下,来分享一下 Android 流式布局,支持单选.多选等,适合用于产品标签等. 效果图: 用法: dependencies { compile 'com.hym ...

  4. python 代码性能分析 库

    问题描述 1.Python开发的程序在使用过程中很慢,想确定下是哪段代码比较慢: 2.Python开发的程序在使用过程中占用内存很大,想确定下是哪段代码引起的: 解决方案 使用profile分析分析c ...

  5. Jmeter多业务混合场景如何设置各业务所占并发比例

    在进行多业务混合场景测试中,需要分配每个场景占比. 具体有两种方式: 1.多线程组方式: 2.逻辑控制器控制: 第一种: jmeter一个测试计划可以添加多个线程组,我们把不同的业务放在不同的线程组中 ...

  6. tomcat乱码解决

    一.修改Tomcat的conf的server.xml文件加上 URIEncoding="UTF-8" 二.在tomcat的bin 目录下的catalina.bat 配置文件中,添加 ...

  7. Hadoop记录-Apache hadoop+spark集群部署

    Hadoop+Spark集群部署指南 (多节点文件分发.集群操作建议salt/ansible) 1.集群规划节点名称 主机名 IP地址 操作系统Master centos1 192.168.0.1 C ...

  8. 【449】backup get weekly tweets

    import pandas as pd from datetime import datetime fn = r"D:\OneDrive - UNSW\tweets_flu.csv" ...

  9. 机器学习技法总结（四）（aggregation，vote，bootstrap...）

    研究的动机是:我们采用了不同的模型得到T个不同的g,那么我们是不是可以通过这些不同的g的融合得到更加出色的G呢?因此,便有了以上四种不同的方法:1)(select)直接选择最好的一个作为融合的结果:2 ...

  10. linux下RAR和ZIP安装和使用

    服务器没装rar,对于上传是压缩的文件来说,是个很大的问题. 源码安装rar: 1. 下载: wget http://www.rarlab.com/rar/rarlinux-x64-4.2.0.tar ...