一、指定选择器

有时个会希望控制某个元素在一定范围内的对象样式，这时就可以把元素与Class或者Id选择器结合起来使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>指定选择器</title>

<style type="text/css">

span.red{

    color:red;

}

div#top{

    color:blue;

    }

</style>

</head>

<body>

<span class="red">这是个SPAN类名为CLASS</span>

<span>这是个SPAN</span>

<div id="top">这是个DIVID是TOP</div>

<div >这是个DIV</div>

</body>

</html>

指定选择器对象定义样式限定为class或者id属性的某种元素非常有用，它对元素的控制精度介于标签选择器与id或者类选择器之间，是一种非常实用的选择器类型

如下面模块中如何控制新闻的正文

<div>

<h2 class="news">新闻标题</h2>

<p class="news">新闻正文</p>

<span class="news">新闻说明</span>

<p>其它文件信息</p>

</div>

css

div p.news{

    font-size:18px;

    color:#FF00FF;

    }

或者

p.news{

    font-size:18px;

    color:#00FFFF;

    }

CSS 指定选择器(十一)的更多相关文章

  1. CSS :first-child 选择器 和 HTML DOM firstChild 属性

    CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...

  2. jquery内容选择器（匹配包含指定选择器的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  4. CSS id 选择器

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

  5. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  6. CSS样式选择器

    <!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...

  7. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  8. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

  9. css以及选择器基础

    CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...

随机推荐

  1. Weblogic 10.3.6生产模式启动

    生产模式启动里需要输入用户名和密码,很麻烦.在域的/security目录下创建文件boot.properties,内容为: username=weblogic password=weblogic123 ...

  2. 事务复制中的msrepl_ccs

    在事务复制里,如果一个article被更新,distributionagent会调用相应的存储过程将数据更新到订阅端. 这些存储过程分别是[sp_MSins_dboTableName],[sp_MSd ...

  3. multi-CPU, multi-core and hyper-thread--转

    原文地址:http://stackoverflow.com/questions/680684/multi-cpu-multi-core-and-hyper-thread Multi-CPU was t ...

  4. 《微信小程序七日谈》- 第四天：页面路径最多五层？导航可以这么玩

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  5. [转载]基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

    在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...

  6. 免费素材下载：iOS 8 矢量 UI 素材套件

    小伙伴们,苹果终于在今天凌晨推送了 iOS 8 的正式版.虽然该系统并未与 iPhone6 发布会同时亮相,但对于已经提前体验尝鲜过测试版的同学来说并不陌生.iOS 8 几乎每个图标都进行了重新设计, ...

  7. iOS-nil，Nil，NULL的区别

    一.简述 1.nil用来给对象赋值(Objective-C中的任何对象都属于id类型) 2.NULL则给任何指针赋值,NULL和nil不能互换 3.nil用于类指针赋值(在Objective-C中类是 ...

  8. Android 学习笔记之使用多线程实现断点下载...

    PS:莫名其妙的迷茫... 学习内容: 1.使用多线程实现文件下载...   多线程下载是加快下载速度的一种方式..通过开启多个线程去执行一个任务..可以使任务的执行速度变快..多线程的任务下载时常都 ...

  9. 100行JS实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  10. 3D拓扑自动布局之Web Workers篇

    2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了,随着OpenGL特别是WebGL技术的普及,3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家,似乎和最近高档会所被整改为普通茶馆是一样的 ...