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选择器的更多相关文章

  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. 树莓派搭建WEB服务器

    树莓派搭建WEB的教程网上有许多,但感觉每一篇都有一些问题,这次我将网上的教程汇总,并亲身实践,将注意的问题都写进去,方便新手学习! 目录:1,安装nginx+sqlite+php5打造轻量级服务器, ...

  2. SQL数据开发(经典) 基本操作

    数据开发(经典) 1.按姓氏笔画排序: Select * From TableName Order By CustomerName Collate Chinese_PRC_Str oke_ci_as ...

  3. python写一个翻译的小脚本

    起因: 想着上学看不懂English的PDF感慨万分........ 然后就有了翻译的脚本. 截图: 代码: #-*- coding:'utf-8' -*- import requests impor ...

  4. BZOJ 1002: [FJOI2007]轮状病毒【生成树的计数与基尔霍夫矩阵简单讲解+高精度】

    1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 5577  Solved: 3031[Submit][Statu ...

  5. 【Java学习笔记之二十】final关键字在Java继承中的用法小结

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...

  6. HDU 2563 统计问题(递归,思维题)

    统计问题 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  7. 来说说datatype

    今天敲代码一直卡在一个问题上面好久那就是--datatype的未定义,起初不晓得datatype的含义,遇到这种情况首先想到的就是自己又忘记加上面头文件了.随即写了个stdlib.h上去.可是问题并没 ...

  8. Java应用开发中的字符集与字符编码

    事出有因 在向HttpURLConnection的输出流写入内容时,因没有设置charset,导致接收方对数据的验签不一致. URL url = new URL(requestUrl); //打开连接 ...

  9. 布隆(Bloom)过滤器 JAVA实现

    前言 Bloom过滤器,通过将字符串映射为信息指纹从而节省了空间.Bloom过滤器的原理为,将一个字符串通过一定算法映射为八个Hash值,将八个Hash值对应位置的Bitset位进行填充.在进行校验的 ...

  10. 关于STM32驱动DS1302实时时钟的一点思考

    之前用51驱动过DS1302,没用多久就输出了正确的时间.当时以为这块芯片其实没啥,很简单.但是现在用STM32做项目,用到同样的芯片,以为这有何难,只要把那个程序拿过来复制黏贴改一下IO设置不就行了 ...