CSS 指定选择器(十一)

一、指定选择器

有时个会希望控制某个元素在一定范围内的对象样式,这时就可以把元素与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;
    }
时间: 2024-10-14 03:02:52

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

CSS基础学习十一:选择器的优先级

在CSS基础学习的篇章中,从第四篇博客开始说选择器,到昨天基本已经说完了.今天我们总结一下,选择器作 用:告知浏览器需要设置哪个dom元素的样式.最后来说说选择器一个重要的问题,选择器的优先级.判断优先级的 方法就是尝试!!! 一简单选择器的优先级 简单的选择器包括我们在第四篇,第五篇,第六篇博客的元素选择器(标签选择器),类选择器和id选择器. 我们来试验: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

css以及选择器基础

CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

【css】css常用选择器

css常用选择器 * 通配选择器 选择文档中所以HTML元素 E 元素选择器  选择指定类型的HTML元素 #id ID选择器  选择指定ID属性值为"id"的任意类型元素 .class 类选择器   选择指定class属性值为"class"的任意类型的任意多个元素 selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并 E F 后代选择器(包含选择器)  选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选

css的选择器效率分析

我们都知道,CSS具有叠加性(同一个元素被多条样式规则指定),继承性(后代元素会继承前辈元素的一些样式和属性)和优先级 (由于CSS的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用于指定的元素,他只遵循一条规则,指定的越具体,优先级越高) 由上可知,选择器指定的越具体,那么他的优先级就越高, 在这里,我们来总结一下css的选择器: 一.基本选择器(标签选择器.通用选择器.类和ID选择器) 选择器 描述 CSS版本 E 标签选择器,匹配所有使用E标签的元素   * 通用元素选择器,匹

CSS类选择器和ID选择器

ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的. ID也可以用来标识持久的结构性元素,例如主导航或内容区域. ID还可以用来标识一次性元素,例如某个链接或表单元素. 一个ID只能应用于页面上的一个元素. 同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多.类非常适合表示内容的类型或其他相似的条目.例如有一个新闻页面,其中包含多篇新闻,代码如下所示 <div id="story-id-1"> <h2>ID</h2> <p

Css之选择器

一.CSS选择器之标签选择器(元素选择器) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /**  * 标签选择器  * 作用:通过元素选择器可以选择页面中的所有指定元素  * 语法:标签名{}  */ p{ background-colo

Css3之基础-2 Css 基础选择器

一.Css 基础选择器 通用选择器 通用选择器 - 通用选择器,显示为一个星号(*) - 可以与任何元素匹配 - 常用于设置一些默认样式,比如设置整个文档的文本的默认字体和大小 元素选择器 - html文档的元素就是选择器 - 比如<p>.<h1>等 类选择器 - 语法为: .className {color:read;} - 类名称不能以数字开头 - 所有能够附带class属性的元素都可以使用此样式声明 - 将元素的class属性的值设置为样式类名 - 可以将多个类选择器应用于同

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

CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有主流浏览器都支持 :first-child 选择器. 注释:对于 IE8 及更早版本的浏览器中的 :first-child,必须声明 <!DOCTYPE>. 定义和用法 :first-chil