一、指定选择器

有时个会希望控制某个元素在一定范围内的对象样式，这时就可以把元素与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. 在android中如何通过点击edittext之外的部分使软键盘隐藏

    我们知道在android中点击edittext框就会自动弹出软键盘,那怎么通过点击edittext之外的部分使软键盘隐藏呢?(微信聊天时的输入框就是这个效果,这个给用户的体验还是很不错的) 首先我们要 ...

  2. php和egret的配合

    egret对资源路径和js的应用都是相对路径,而在现在许多流行的框架里,一般都把js和资源放到专门的文件夹下,如public. 修改步骤: 1.修改index.html,改为全路径,如: <sc ...

  3. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  4. [ML] Naive Bayes for email classification

    20 Newsgroups (Original) Author: Jeffrey H 1. Introduction This is only a test report for naive baye ...

  5. 解决两台centos虚拟机Telnet服务无法联机的问题

    关闭防火墙 [root@localhost ~]# service iptables stopiptables: Flushing firewall rules:                    ...

  6. jQuery+Ajax滚屏异步加载数据实现（附源码）

    一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...

  7. ASP.NET MVC3 在_ViewStart設定Layout後用RenderAction的注意事項

    ASP.NET MVC3 在_ViewStart設定Layout後用RenderAction的注意事項 3/24 TW MVC第一次活動圓滿的結束了,雖然是RC,但也來了不少願意聽我們分享的好朋友. ...

  8. 《HelloGitHub月刊》第01期

    <HelloGitHub月刊> 因为现在这个项目只有我自己做,只敢叫"月刊",希望有志同道合者,快点加入到这个项目中来!同时,如果您有更好的建议或者意见,欢迎联系我.联 ...

  9. sprint 1 总结

    1.之前已经总结了一下了.. 提前完成了任务,明天还要继续测试一下,看有没有BUG.这次搭建,遇到好多问题,服务器经常不稳定崩毁,毕竟免费...不能完美..途中经常小细节没注意,导致错误连连,卡了好几 ...

  10. 使用RazorEngine对ASP.NET MVC的Views进行UnitTest

    有的时候我们需要对Razor最后生产的文本(HTML OR XML OR..)进行单元测试. 使用Nuget安装RazorEngine. 新建一个ASP.NET MVC项目,并且带有测试项目. 修改I ...