CSS中的选择器之类选择器和id选择器
1.css中的选择器：
1.类选择器，又叫class选择器
2.id选择器
3.html元素选择器(又叫标签选择器)
4.通配符选择器
5.伪类选择器
6.组合选择器(多元素选择器,子元素选择器,后代选择器)
简单来说，选择器就是在css中创建，而在网页页面(html,jsp,php,asp.net)中使用
选择器的名称命名规范:
一般使用中划线形式:xxx-yyy,一般是小写字母
2.类选择器
基本语法:
.类选择器名称{
CSS属性:属性值;
CSS属性:属性值;
}
一般来说,类选择器是提供给多个html元素来使用的.
实例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span-news{
font-weight:bold;
background-color:pink;
color:black;
}
</style>
</head>
<body>
<span class="span-news">新闻一</span>
<span class="span-news">新闻二</span>
<span class="span-news">新闻三</span>
<span class="span-news">新闻四</span>
<span class="span-news">新闻五</span>
</body>
</html>
刷新浏览器后显示效果如下:
3.id选择器
基本语法:
#id选择器名称{
CSS属性:属性值;
CSS属性:属性值;
}
在类选择器代码的基础上增加一行字体,并设置其自己的样式.
实例代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span-news{
font-weight:bold;
background-color:pink;
color:black;
}
#span-news-tb{
font-weight:bold;
font-size:25px;
background-color:silver;
}
</style>
</head>
<body>
<span class="span-news">新闻一</span>
<span class="span-news">新闻二</span>
<span class="span-news">新闻三</span>
<span class="span-news">新闻四</span>
<span class="span-news">新闻五</span>
<hr>
<span id="span-news-tb">这是一个比较重要的新闻</span>
</body>
</html>
刷新浏览器后显示的效果:
关于id选择器的一些说明 :
1.一般来说,id选择器是提供给某一个html元素来使用
2.当不确定时,有多个html元素来使用该样式时,请使用类选择器.
CSS中的选择器之类选择器和id选择器的更多相关文章
- css选择器(1)——元素选择器、类名和id选择器
css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式.当然它是通过选择器来实现这一点的. 基本规则结构: 语法= 选择器 +声明块 1.元素选择器——直接使用html元素名,指向文档元素 ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- css中最基本几个选择器
css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器 ...
- css中的选择器
选择器 说明 * 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有使用E标签(所有HTML元素)的元 ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- 有趣：256个class选择器可以干掉1个id选择器——张鑫旭
我们应该都知道,从选择器得分权重上将,id选择器(#aaa{})和class选择器(.aaa{})完全不是一个数量级的,前者:1-0-0; 而后者为0-1-0.因此: #id { color:dark ...
- 课时70.id选择器和类选择器（理解）
1.id和class的区别? id相当于人的身份证不可以重复 class相当于人的名称可以重复 1.2 一个HTML标签只能绑定一个id名称 一个HTML标签可以绑定多个class名称 2.id选择器 ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
随机推荐
- (a == 1 && a == 2 && a == 3),何时为true？
今天浏览一些技术网站,看到这个题目.虽然觉着代码这么写的可能性低之又低,但是却也考验对js了解的程度. 在 JavaScript 中 (a ==1 && a== 2 && ...
- 将数据按照gzip当时解压的工具类
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; impo ...
- 1.移植3.4内核-分析内核启动过程,重新分区,烧写jffs2文件系统
1.在上章-移植uboot里.我们来分析下uboot是如何进入到内核的 首先,uboot启动内核是通过bootcmd命令行实现的,在我们之前移植的bootcmd命令行如下所示: bootcmd=nan ...
- [学习OpenCV攻略][008][Canny边缘检测]
cvGetSize(输入图片) 得到输入图片的大小 cvCanny(输入图片,输出图片,lowThresh,highThresh,aperture) 把输入图片按设定光圈值进行Canny边缘检测,然后 ...
- 分享给有需要的你，精选了10套web开发免费视频教程~~
在这里给大家精选百度传课里的一些比较好的视频教程,比较适合新手们,有需要的可以收藏着学习!! 蓝鸥微信小程序全方位深度解析 链接:http://www.chuanke.com/v4702151-19 ...
- Web API <五> 序列化
在 Asp.Net Web Api 中提供了两种 媒体类型格式化器(mime-type formatter),分别用于支持 JSON 和 XML 数据的格式化处理.默认两种格式化器已集成到了 Asp. ...
- 一天浓缩学习webpack经过
熟话说浓缩就是精华,哈哈,所以就这么简单粗暴的介绍下吧,写下的都是精华. 已经不是第一次听说webpack,但是我的起步有点晚,现在才看.开门见山~~ 1.什么是webpack? webpack是当下 ...
- linux下用iptables做本机端口转发方法（转载）
一 :从一台机到另一台机端口转发 启用网卡转发功能 #echo 1 > /proc/sys/net/ipv4/ip_forward 举例:从192.168.0.132:21521(新端口)访问1 ...
- Java多线程异常处理
在java多线程程序中,所有线程都不允许抛出未捕获的checked exception,也就是说各个线程需要自己把自己的checked exception处理掉.这一点是通过java.lang.Run ...
- SpringMVC图片上传与显示
@RestController @Scope("prototype") @RequestMapping("/xxxx/xxx/main") public cla ...