html5 css选择器 井号, 句点的区别

一、理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1、选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响;2、属性(如实例中的font-family、color等),规定了布局的什么方面被设置了;3、值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值。

 二、CSS式样中不同符号的区别 #是ID选择器 .是class选择器 *是通配符号 比如*{margin:0;padding:0;所有的元素都会沿用这个属性样式}(还有一种情况是IE hack)比如 .b{margin:0;*margin:10px;}这里IE看到的是margin:10px,其他的浏览器看到的会是前面那个margin:0; 

先来看段代码吧~

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
 padding: 0px;
}
#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
.feature img{
float: left;
padding: 0px 10px 0px 0px;
 margin: 0 5px 5px 0;
}

#号对应id

点号对应class

不加对应html 标签

归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。

在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。

table.hovertable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; } table.hovertable th { background-color: #eed8ae; border-width: 2px; padding: 8px; border-style: solid; border-color: #a9c6c9; } table.hovertable tr { background-color:#d4e3e5; } table.hovertable td { border-width: 2px; padding: 8px; border-style: solid; border-color: #a9c6c9; }

学术或足球分析交流微信:chinamaths(进讨论组)

Don‘t hesitate to comment or add a like    -    Yours Bill
Bill‘s技术博客 足球分析博客 足彩数据视频
比尔极客日志_博客园 比尔足球数据_网易博客 足彩TV_优酷
比尔极客日志_CSDN 比尔足球数据_新浪博客 足彩TV_搜狐视频
比尔极客日志_51CTO 比尔足球数据_新浪微博 足彩TV_喜马拉雅
比尔极客日志_开源中国 比尔足球数据_官方URL 足彩TV_56视频
比尔极客日志_GitHub 比尔足球数据_头条号 微信号:zucai99
时间: 2024-10-12 22:49:29

html5 css选择器 井号, 句点的区别的相关文章

css选择器大于号>的作用是什么

css选择器大于号>的作用是什么:本章节介绍一下CSS选择器中的大于号的作用.由于以前浏览器支持的问题,可能吃选择器较少使用,但是随着时间的推移,版本的更新,兼容性已经不是问题,所以它的应用也就多了起来,下面就通过代码实例做一下简单介绍.此选择器能够匹配指定元素的所有一级子元素.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&quo

html5 css选择器。 井号,句号的区别

.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family.color等),规定了布局的什么方面被设置了:3.值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值. 二.CSS式样中不同符号的区别 #是ID选择器 .是class选择器 *是通配符号 比如*{margin:0:padding:0:所有的元素都会沿用

CSS选择器中nth-child和nth-type-child的区别

在CSS里选择父元素下的第几个子元素我们可以用的方法有nth-child 和nth-of-type,刚开始用的时候觉得这两个应该效果的用法应该是一样的,但是为什么CSS会定义两个一样的选择器呢?今天我来讲讲自己的见解,不喜勿喷: 现在来谈谈他们之间的差别: 代码结构如下(1): <section> <p>第1个</p> <p>第2个</p> <p>第3个</p> <p>第4个</p> </se

[转]ibatis中井号跟美元符号区别(#、$)

Mybatis中如何在SQL语句表名中使用参数 insert into prefix_${table_name} (a, b, c) values (#{a}, #{b}, #{c}) ${} 表示直接使用字面量(literal value) #{} 表示这个是个参数 如果 table_name 是 “ABC” 则 ${table_name} 是 ABC #{table_name} 是 “ABC" Java代码   1.#可以进行预编译,进行类型匹配,#变量名# 会转化为 jdbc 的 类型 $

css选择器中:first-child与:first-of-type的区别

:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: h1:first-child  匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个: span:first-child  匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素: 然后,在css3中又定义了:first-of-type这个选择器,这个跟:first

ibatis中井号跟美元符号区别(#、$)

1.#可以进行预编译,进行类型匹配,#变量名# 会转化为 jdbc 的 类型 $不进行数据类型匹配,$变量名$就直接把 $name$替换为 name的内容 例如: select * from tablename where id = #id# ,假设id的值为12,其中如果数据库字段id为字符型,那么#id#表示的就是'12',如果id为整型,那么#id#就是 12 会转化为jdbc的 select * from tablename where id=?,把?参数设置为id的值 select *

css 选择器 nth-child 系列和nth-of-type系列区别

nth-child是表示选择当前父元素下所有元素中的第几个元素,而nth-of-type则表示选择父元素某一个给定类型的第几个元素, 例如  选择p父元素下的第一个p元素,可以这么写: parent>p:first-child 或者 parent>p:first-of-type,第一种写法在父元素下第一个元素为p时没有什么问题.但是在父元素下第一个元素不是p标签就会出现问题.例如第一个元素是span.那么第一种写法就取不到第一个p元素.而第二种则可以正常的获取父元素下的第一个p元素.由此可见.

熟练掌握HTML5开发中常用五大CSS选择器用法

摘要 本文和大家重点学习一下五类CSS选择器,我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果. 最常用的五类CSS选择器 一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助. 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果

IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2

4  关联选择器 关联选择器只不过是一个用空格隔开的两个或更多的单一选择器组成的字符串.这些选择器可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择器大.这种方式只对在第一个元素里关联的第二个元素定义(只要具有关联关系即可,关系的元素中间可以有多层其他HTML元素),对单独的第一个元素或第二个元素无定义.如下所示: table a { color: red}                          /*  只有在表格<table>内的链接<a>改变了样式