CSS selector 选择符是我们进行CSS网页布局的基矗CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自己命名的,在进行命名时,注意包含语义,或者添加必要的注释,使我们的代码更清晰,易读。HTML selector 标签选择符HTML selector就是HTML的标签,如:DIV,TD,P,H1等等,如你用 CSS 定义了它们,在CSS文章所控制的页面中这个标签的性质就按照你的定义来显示。比如我们想叫H1的颜色是红的,则:H1 {color: red}。这里我们学习一个CSS的特点,它可定义好几个 selector在一个rule里。如:H1, H2, TD {color: red}。这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色。在具体使用中,可以将几个设置相同的属于合并起来编写,减小我们的代码。Class selector 类选择符 Class selector有两种,一种叫相关 class selector,它跟一个 HTML 的标签有关系它的语法是tag.Classname {property:value}。如:我们想设置一些而不是全部 H1 的颜色是红的 H1.redone {color: red}则:第一个 H1 是红色的,而第二个就不是了。第二种是独立class selector。它可被任何 HTML标签所应用。它的语法如下 .Classname {property:value}假如我们有下面这个定义.blueone {color: blue}那么我们可以把他应用到不同的标签中去。非常明显class selector 给了我们更多的自由与发挥的空间。ID selector ID选择符ID selector 其实跟独立 class selector 的功能很相似。而区别在于它们的语法和用法不同,以及对于 javascript 操纵 HTML元素有帮助。我们在布局中,对不同的结构区域的定义,往往用ID选择符。它的语法如下#IDname {property:value}。假如我们有下面的定义#yelowone {color: yellow}。我们可以运用这个定义到任何的有同样 ID 名字的标签,如:text here你可能觉得既然 ID selector 和独立 class selector 功能一样,为什么两者都存在呢?有 ID 的 HTML元素可以被JavaScript来操纵。class 与 ID 的区别 参考这里该用id还是用class呢 参考这里。
CSS selector 选择符有哪些 如何合理运用?
来源:互联网 发布日期:2016-03-25 16:21:56 浏览:1763次
下一篇:用CSS制作具有亲和力的表格
相关内容
AiLab云推荐
最新资讯
本月热点
热门排行
-
最坏时期已过,美国5G市场即将迎来回暖?
阅读量:47333
-
华为5G-A实现规模组网,下载速度超过4Gbps,比5G快10倍
阅读量:46669
-
回望2023年5G发展:释放和提升价值成最大课题
阅读量:12241
-
全球吹响5G-A商用号角
阅读量:11126
-
5.5G在欧洲突破,DNA首次将5.5G技术引入现网
阅读量:10231
-
首发新款麒麟5G芯片!曝华为nova 12系列12月26日登场
阅读量:10003
推荐内容
- 2024年香港礼品及赠品展览会
- 2024第26届山东国际水展
- 2024第七届中国(昆明)南亚社会公共安全科技博览会
- 2024第二十六届山东国际供热供暖、暖炉及空调技术与设备展览会(JINNOC国际供热展)
- 2024中国昆山第二十四届国际机床及智能装备展览会
- 2024晋冀鲁豫国际门窗幕墙展览会
- 2024第10届深圳国际IP授权产业博览会(CIPE)
- 2024深圳国际文创新品展
- 2024厦门日化产品技术供应链博览会-打造东南国际市场新坐标!
- 2024CXBE厦门美妆供应链博览会
- 2024第19届潍坊春季茶业博览会暨紫砂展
- 2024长春第十八届连锁加盟创业项目展览会暨2024 东北长春餐博会暨首届预制菜展览会
- 海名·2024第九届西安餐饮供应链博览会
- 2024第三十二届中国(深圳)国际礼品及家居用品展览会(深圳礼品展)
- 2024第二十届中国(上海)国际医疗旅游展览会
- 2024年科隆东盟少儿用品展览会 (Kind+Jugen ASEAN 2024)
- 2024中国(太原)国际锂电池技术设备展览会
- 2024年法国巴黎国际工程机械展
- 2024年俄罗斯第23届国际石油和天然气工业设备及技术展览会
- 第四届中国国际数字产品博览会