巧妙地使用CSS选择器

可以通过不同规则来定义不同内容块里的链接样式。类似这样：#nav a:link或者 #main a:link或者#footer a:link。也可以定义不同内容块中相同元素的样式不一样。例如，通过#main p和#sider p分别定义#main p和#sider p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中（PDA还是手机或者网络电视）有影响，它们可以被定义为任何的表现外观。

　　一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的text-indent规则就可以实现缩进目的。p是结构化标签，text-indent是表现属性，前者属于HTML，后者属于CSS。（这就是传说中的结构与表现相分离）

　　良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码<table width="778" cellpadding="3" border="0" align="center">，现在可以只在HTML中写<table id="MrJin">，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么（更不能被用来布局和定位）。

　　当然，CSS选择器不只是这么简单，除了id还有class还有后代选择器，属性选择器等等。

赞 (0)

相关推荐

  • 巧妙地使用CSS选择器

    可以通过不同规则来定义不同内容块里的链接样式.类似这样:#nav a:link或者 #main a:link或者#footer a:link.也可以定义不同内容块中相同元素的样式不一样.例如,通过#main p和#sider p分别定义#main p和#sider p的样式.从结构上讲,你的页面是由图片.链接.列表.段落等组成的,这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观. 一个仔细结构化的HTML页面非常简单,每一个元素都被用

  • flex4.5中CSS选择器的应用小结

    CSS选择器可以包括,标签选择器.类别选择器.ID选择器.交集选择器.并集选择器.后代选择器.全局选择器.伪类等,这些样式应用都已经在flex得到支持 1.标签选择器标签选择器是根据MXML文件中组件的类型来设置的,示例如下: 复制代码 代码如下: <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx&qu

  • jquery css 选择器演示代码

    jquery css 选择器演示代码

    效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所

  • jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

  • Jquery中CSS选择器用法分析

    Jquery中CSS选择器用法分析

    本文实例讲述了Jquery中CSS选择器用法.分享给大家供大家参考.具体如下: jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下: 1. 标签选择器 用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$("element"),如$("div"),同getElementByTagName 2. ID选择器 用于获取某个具有id属性的元素,格式如下:$("id"),同get

  • Python CSS选择器爬取京东网商品信息过程解析

    CSS选择器 目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup使用的技术书籍和博客软文并不多,而在这仅有的资料中介绍CSS选择器的少之又少.在网络爬虫的页面解析中,CCS选择器实际上是一把效率甚高的利器.虽然资料不多,但官方文档却十分详细,然而美中不足的是需要一定的基础才能看懂,而且没有小而精的演示实例. 京东商品图 首先进入京东网,输入自己想要查询的商品,向服务器发送网页请求.在这里小编仍以关键词"狗粮"作为搜索对象,之后得到后面这一串网址: https://s

  • jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法. 第一:nth-child(number) 直接匹配第number个元素.参数number必须为大于0的整数. (EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二:nth-child(an) 匹配所有倍数为a的元素.其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n.

  • CSS教程之css选择器 、属性、值

    body {      font-size: 0.8em;      color: navy;  }  上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜色是navy字体大小是0.8ems. 长度和百分比 CSS里面有许多属性值要指定单位,但有些基本单位被使用在一些属性上,在这之前值得属性下它们.  em比如font-size:2em给于字体计算出的大小,所以2em就是实际字体大小

  • jquery CSS选择器笔记

    去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查看.这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步. 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器.今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定. 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info c

  • 远离JS灾难css灾难之 js私有函数和css选择器作为容器

    尽管js可以想面向对象那样去构造对象,隐藏私有方法,但需求变化的往往比你写程序还要快时,就连设计js对象的时间也没有了,所以我比较倾向于用js私有函数和js方法:jquery私有函数和jquery对外暴露方法的形式也可以实现,而页面生成的html结构则完全在js中生成,包括哪些id和class, 这样可以最大限度的确保统一和重用的方便性,但也有个缺点,就是在重用时,如果需要样式发生变化(结构是死的不能变化),就需要用div将原来的结构包起来,相关的样式也需要用对应的id包裹一遍,如果是新增的事件

随机推荐