1.css中的选择器：

1.类选择器，又叫class选择器

2.id选择器

3.html元素选择器(又叫标签选择器)

4.通配符选择器

5.伪类选择器

6.组合选择器(多元素选择器,子元素选择器,后代选择器)

简单来说，选择器就是在css中创建，而在网页页面(html,jsp,php,asp.net)中使用

选择器的名称命名规范:

一般使用中划线形式:xxx-yyy,一般是小写字母

2.类选择器

基本语法:

  1. .类选择器名称{
  2. CSS属性:属性值;
  3. CSS属性:属性值;
  4. }

一般来说,类选择器是提供给多个html元素来使用的.

实例代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .span-news{
  8.             font-weight:bold;
  9.             background-color:pink;
  10.             color:black;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <span class="span-news">新闻一</span>
  16. <span class="span-news">新闻二</span>
  17. <span class="span-news">新闻三</span>
  18. <span class="span-news">新闻四</span>
  19. <span class="span-news">新闻五</span>
  20. </body>
  21. </html>

刷新浏览器后显示效果如下:

3.id选择器

基本语法:

  1. #id选择器名称{
  2. CSS属性:属性值;
  3. CSS属性:属性值;
  4. }

在类选择器代码的基础上增加一行字体,并设置其自己的样式.

实例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .span-news{
  8.             font-weight:bold;
  9.             background-color:pink;
  10.             color:black;
  11.         }
  12.         #span-news-tb{
  13.             font-weight:bold;
  14.             font-size:25px;
  15.             background-color:silver;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <span class="span-news">新闻一</span>
  21. <span class="span-news">新闻二</span>
  22. <span class="span-news">新闻三</span>
  23. <span class="span-news">新闻四</span>
  24. <span class="span-news">新闻五</span>
  25. <hr>
  26. <span id="span-news-tb">这是一个比较重要的新闻</span>
  27. </body>
  28. </html>

刷新浏览器后显示的效果:

关于id选择器的一些说明 :

1.一般来说,id选择器是提供给某一个html元素来使用

2.当不确定时,有多个html元素来使用该样式时,请使用类选择器.

CSS中的选择器之类选择器和id选择器的更多相关文章

  1. css选择器(1)——元素选择器、类名和id选择器

    css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式.当然它是通过选择器来实现这一点的. 基本规则结构: 语法= 选择器 +声明块 1.元素选择器——直接使用html元素名,指向文档元素 ...

  2. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  3. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  4. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  5. css中最基本几个选择器

    css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器 ...

  6. css中的选择器

    选择器            说明    *                通用元素选择器,匹配任何元素    E                标签选择器,匹配所有使用E标签(所有HTML元素)的元 ...

  7. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  8. 有趣：256个class选择器可以干掉1个id选择器——张鑫旭

    我们应该都知道,从选择器得分权重上将,id选择器(#aaa{})和class选择器(.aaa{})完全不是一个数量级的,前者:1-0-0; 而后者为0-1-0.因此: #id { color:dark ...

  9. 课时70.id选择器和类选择器（理解）

    1.id和class的区别? id相当于人的身份证不可以重复 class相当于人的名称可以重复 1.2 一个HTML标签只能绑定一个id名称 一个HTML标签可以绑定多个class名称 2.id选择器 ...

  10. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

随机推荐

  1. Codeforces Round #356 (Div. 1) C. Bear and Square Grid

    C. Bear and Square Grid time limit per test 3 seconds memory limit per test 256 megabytes input stan ...

  2. oracle erp 表结构

    BOM模块常用表结构 表名: bom.bom_bill_of_materials 说明: BOM清单父项目 BILL_SEQUENCE_ID NUMBER 清单序号(关键字)ASSEMBLY_ITEM ...

  3. [学习OpenCV攻略][009][从摄像机读入数据]

    cvCreateCameraCapture(设备ID) 创建一个摄像机视频,返回值是CvCapture*类型.设备ID表示设备的编号,如果有多个摄像机设备,-1表示随机选择一个设备. #include ...

  4. Oracle_group by分组查询_深入

    Oracle_group by分组查询_深入 本文导读:在实际SQL应用中,经常需要进行分组聚合,即将查询对象按一定条件分组,然后对每一个组进行聚合分析.                    创建分 ...

  5. java的运算符和表达式

    )1.算数运算符:java中常用的算术运算符除了 +.-.*./之外,还有%(取余).++(自增).--(自减). )1.1%(取余):可适用于整数,char,浮点数的取余中.在取余中,如果进行运算的 ...

  6. MySql Host is blocked because of many connection errors;

    错误:Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' 原因: 同一个i ...

  7. Git学习记录--git仓库

    Git是一款强大的版本控制工具,与svn相比git的分布式提交,本地仓库等在使用时确实比较方便.当然两者之间各有优劣,我在这里不多做比较.由于之前少有接触git,只是零星大致地了解一点,所以找时间系统 ...

  8. sqlite入门基础(一)：sqlite3_open,sqlite3_exec,slite3_close

    打开数据库链接sqlite3_open用法 原型: int sqlite3_open( const char *filename, /* Database filename (UTF-8) */ sq ...

  9. QTP10破解方法及mgn-mqt82.exe下载

    经试验可以成功安装license,具体步骤如下:一.从HP官方网上下载QTP10.0并安装.二.安装成功后,在C:\Program Files\Common Files\Mercury Interac ...

  10. 一个故事讲明白线程的私家领地：ThreadLocal

    张大胖上午遇到了一个棘手的问题,他在一个AccountService中写了一段类似这样的代码: Context ctx = new Context(); ctx.setTrackerID(.....) ...