设计中最常用的CSS选择器

准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器:顾名思议,标签选择器是直接将HTML标签作为选择器,如p.h1.dl.strong等HTML标签. 如: p { font:12px;} em { color:blue;} dl { float:left; margin-top:10px;} 二.id选择器:我们通常给页面元素定义id.如<…

前端开发中常用的CSS选择器解析(一）

你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的介绍css中最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1.* * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. #container * { border: 1px soli…

css3种引入方式,样式与长度颜色,常用样式,css选择器

# CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; background-color: red"></div>``` #### 2.内联式 ```html<head> <style> div { width: 100px; height: 100px; background-color: red; } </styl…

网页设计中11 款最好CSS框架

网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生错误,使网页能在浏览器上轻松加载出来.此外,还要在网页设计中留出足够的空间以充许日后的功能增加和改善,这样做才能让更多与时俱进的特征能加入到网页设计中. 网页设计员和研发者可用的最好工具之一便是 CSS 框架,它提供高端解决方案来适应高端网页研发需求.CSS 框架减化了编码结构.减少了编码时间,为研…

前端页面设计常见的30个CSS选择器

1. * --> 通配符选择器 * { margin: 0; padding: 0; } 星号符会选择页面每个元素.很多开发者用它把所有margin和padding归零.这当然是快捷测试方法.不过我建议你不使用它,它给浏览器带来太多的负担,这不必要.通配选择器也可以用到子选择器上. /* 选中容器中所有子元素*/ #container * { border: 1px solid black; } 兼容性 IE6+ Firefox Chrome Safari Opera 2. #X …

常用的css选择器

1.最基本的 * * 选择所有元素. #id #firstname 选择 id="firstname" 的元素. .class .intro 选择 class="intro" 的所有元素. element p 选择所有 <p> 元素. element,element div,p 选择所有 <div> 元素和所有 <p> 元素. element element div p 选择 <div> 元素内部的所有 <p&g…

测开之路三十六：常用的css选择器

在static下新建一个css,并写入内容 /*标签选择器,label标签的颜色为红色*/label {color: red;} /*.代表类选择器,绿色*/.test {color: green;} /*#代表id选择器,黄色*/#test {color: yellow;} /*div标签下的魔偶写标签下的lable标签(相对关系),内容的颜色为蓝色*/div label {color: blue;} /*div标签下的直接的lable标签(父子关系),,灰色*/div > label {co…

简单说说常用的css选择器

这里先来一段HTML代码 <div id="div" class="div"> <p class="div_P1"></p> <span></span> </div> 先来看看我们的简单选择器:以id和class为主,其次还有属性通配符和标签等等,但是这些都是不常用的这个我们就不举例子来说了,大家都会关系选择器来说的话:存在子代,兄弟等等,不多说简单来点常用例子 .div…

30个最常用css选择器解析(zz)

你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. #container * { border: 1px…

30个最常用css选择器解析

转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的m…

CSS选择器命名及常用命名

CSS选择器命名及常用命名 CSS选择器命名及常用命名规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率.为了达到这种效果我们就要规范化命名(语义化命名)! 说个题外话,规范化命名的代码,会显着你更加专业! 关于CSS命名法,和其他的程序命名差不多,主要有三种:骆驼命名法,帕斯卡命名法…

CSS选择器(一)

CSS选择器包括标签选择器.ID选择器.类选择器.伪类和伪对象选择器.子选择器.相邻选择器.属性选择器.通用选择器.包含选择器.分组选择器.指定选择器等选择器,分为标签选择器.ID选择器.类选择器.特殊选择器这四类. 以下是我总结的5种常用的CSS选择器. 1.标签选择器 eg: p{ color:#333; } a{ display:block; } 优点:能快速为页面中同类型的标签统一样式. 缺点:不能设计差异化的样式,有时会造成样式的相互干扰. 2.ID选择器 eg:…

第二天（CSS 选择器）

1.常用的CSS选择器类型选择器: 例如: p { color : red ; } 后代选择器: 例如: h2 span { font-weight : bold ; } 类选择器: 例如 : . content { width : 200px ; } ID选择器: 例如: #nav { height : 40px ; } 应用时,应注意html的结构,使结构合理,综合运用以上的选择器.防治页面中多…

html5--6-11 CSS选择器7--伪类选择器

html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点掌握常用的CSS选择器了解不太常用的CSS选择器什么是选择器当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象. 插入样式的三种方法内联样式表(行内) 内部样式表(style中) 外部样式表创建一个外部样式表在head中使用link元素插入样式表 CSS语法单一元素的多个属性之间用分号隔开:若只有一个可以省略多个元素之间用逗号隔开如…

html5--6-10 CSS选择器7--伪类选择器

html5--6-10 CSS选择器7--伪类选择器实例学习要点掌握常用的CSS选择器了解不太常用的CSS选择器什么是选择器当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象. 插入样式的三种方法内联样式表(行内) 内部样式表(style中) 外部样式表创建一个外部样式表在head中使用link元素插入样式表 CSS语法单一元素的多个属性之间用分号隔开:若只有一个可以省略多个元素之间用逗号隔开如果值为若干单词,则要给值加引号;除了这种…

html5--6-9 CSS选择器6--伪类选择器

html5--6-9 CSS选择器6--伪类选择器实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-child{color: red}*/ /*选择ul的元素里面是第一个子元素的*/ /*ul>li:first-child{color: red}*/ /*li:last-child{color: red}*/ /*li:only-child{color: green}*/ p:only-of-type{co…

html5--6-8 CSS选择器5

html5--6-8 CSS选择器5 实例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>6-8课堂演示</title> <link rel="stylesheet" type="text/css" href="style.css"…

html5--6-7 CSS选择器4

html5--6-7 CSS选择器4 实例学习要点掌握常用的CSS选择器了解不太常用的CSS选择器什么是选择器当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象. 插入样式的三种方法内联样式表(行内) 内部样式表(style中) 外部样式表创建一个外部样式表在head中使用link元素插入样式表 CSS语法单一元素的多个属性之间用分号隔开:若只有一个可以省略多个元素之间用逗号隔开如果值为若干单词,则要给值加引号;除了这种情况外其他时候不…

html5--6-6 CSS选择器3

html5--6-6 CSS选择器3 实例学习要点掌握常用的CSS选择器了解不太常用的CSS选择器什么是选择器当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象. 插入样式的三种方法内联样式表(行内) 内部样式表(style中) 外部样式表创建一个外部样式表在head中使用link元素插入样式表 CSS语法单一元素的多个属性之间用分号隔开:若只有一个可以省略多个元素之间用逗号隔开如果值为若干单词,则要给值加引号;除了这种情况外其他时候不…

html5--6-5 CSS选择器2

html5--6-5 CSS选择器2 实例学习要点掌握常用的CSS选择器了解不太常用的CSS选择器什么是选择器当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象. 插入样式的三种方法内联样式表(行内) 内部样式表(style中) 外部样式表创建一个外部样式表在head中使用link元素插入样式表 CSS语法单一元素的多个属性之间用分号隔开:若只有一个可以省略多个元素之间用逗号隔开如果值为若干单词,则要给值加引号;除了这种情况外其他时候不…

html5--6-4 CSS选择器

html5--6-4 CSS选择器实例学习要点掌握常用的CSS选择器了解不太常用的CSS选择器什么是选择器当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象. 插入样式的三种方法内联样式表(行内) 内部样式表(style中) 外部样式表创建一个外部样式表在head中使用link元素插入样式表 CSS语法单一元素的多个属性之间用分号隔开:若只有一个可以省略多个元素之间用逗号隔开如果值为若干单词,则要给值加引号;除了这种情况外其他时候不可…

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s…

CSS 选择器(转)

原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E,选择所有指定元素名称的元素,例如 p,选择所有的 p 元素. 通用选择器 *,选择所有元素,例如: * { box-sizing: border-box; } 类选择器 .class,用一个…

精通 CSS 选择器

CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E,选择所有指定元素名称的元素,例如 p,选择所有的 p 元素. 通用选择器 *,选择所有元素,例如: * { box-sizing: border-box; } 类选择器 .class,用一个点号加类名表示,例如 .header,选择所有 class 属性中包含 header 的元素. <div cl…

30个你不可不知的CSS选择器

30个你不可不知的CSS选择器一.五大基本选择符 1. *(通配符)*通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源.*在css的优先级中是最低的. * {margin: 0; padding: 0;} 也可以用*来匹配某一元素下的所有子元素: #container * {border: 1px solid black;} 2. #X(ID)#+id名,这是日常常用的css选择器,用于匹配id为XX…

CSS选择器大汇总

CSS选择器是学习CSS以及Web编程的基础. 整理出常用的CSS选择器,供自己和大家一起学习. 基本选择器 * /*通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)*/ #id /*id选择器,匹配id是'id'的元素*/ .class /*类选择器,匹配所有类名中包含'class'的元素*/ E /*标签选择器*/ ## 组合选择器 E,F /* 多元素选择器,用,(半角)分隔,同时匹配元素E和元素F*/ E F /*后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素.子…

牢记 31 种 CSS 选择器用法

原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2011 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种,变成了牢记 31 种选择器用法.其他 CSS3 选择器用法请查看 CSS3 selectors explained 这篇文章,此外,W3C CSS3 选择器官方文档 Selectors Level 3 W3C Recommendation 29 September 2011 记录在这里留待有疑问的时…

你须知道的30个CSS选择器 »

你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * 1 * {margin: 0; padding: 0;} 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. 1 #container * { border: 1p…

sublime课程3 emmet插件中的常用符号有哪些

sublime课程3 emmet插件中的常用符号有哪些一.总结一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的innerHTML 3.*号是干嘛的? 数量呗 4.$符号是干嘛的? 数字替代 5.{$$$$}*10的结果是什么? 从0001到0010. 6.smmet插件如何安装到sublime编辑器? 直接解压覆盖到sublime插件文件夹里面,有两个文件二.emmet插件中的常用符号有哪些 1.相关知识 6.…

前端开发HTML&css入门——CSS&选择器练习

CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的. 而css就可以分别为网页的各个层次设置样式. CSS的样式表由一个一个的样式构成,一个样式又由选择器和声明块构成. 语法: – 选择器 {样式名:样式值:样式名:样式值 ; } – p {color:red ; font-size:12px;} 方法一: 内联样式 <!doctype html…

【设计中最常用的CSS选择器】的更多相关文章