1、常用的CSS选择器

        类型选择器: 例如: p { color : red ; }
        后代选择器: 例如: h2 span { font-weight : bold ; }
        类选择器:     例如 : . content { width : 200px ; }
        ID选择器:     例如: #nav { height : 40px ; }
        应用时,应注意html的结构,使结构合理,综合运用以上的选择器。防治页面中多 class 或者是 id
2、伪类
        例如: a : hover { color : red ; }
3、通用选择器
        例如: * { margin : 0px ;  padding : 0px ; }
         通用选择器一般可以匹配所有的元素,为他们重新制定样式;在与其他选择器结合使用时,通用选择器可以用来对某个元素的所有后代应用样式,或者跳过一级后代。
4、高级选择器
        子选择器: 例如: div > p { color : red ; }  只用于选择div元素的子元素 p。
        相邻同胞选择器: 例如:h2 + p { color : yellow ; }    选择h2元素的下一个兄弟元素 p元素。
        兄弟选择器: 例如:h2 ~ p { color : red ; }  选择h2元素的兄弟元素p元素
5、属性选择器:
 
Element [attr]  
选择拥有该属性的元素
 Element [attr = "val"]
选择拥有特定属性值的元素
Element [attr ~= "val" ]
选择属性的之中包含该属性值的元素
Element [attr ^= "val" ]
选择拥有以该值开头的属性的元素
Element [attr $= "val" ]
选择拥有以该值结尾的属性的元素
Element [attr *= "val" ]
选择该属性的值中包含该字符串的元素
Element [attr |= "val" ]
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。

6、伪类选择器:

E: link 超链接未点击前的样式
E:visited
超链接点击后的样式
E:hover
鼠标移到超链接的样式
E:active
超链接点击时的样式
E:focus
获得焦点的样式
E:lang(en)
匹配使用特殊语言的元素
E:not(伪类选择器)
匹配不含有伪类选择器的元素E
E:root
匹配该元素在文档中的根元素
E:first-child
匹配元素的第一个子元素
E:last-child
匹配元素的最后一个子元素
E:only-child
匹配父元素仅有的一个子元素E
E:nth-child(n)
匹配第几个子元素
E:nth-last-child(n)
匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。
E:first-of-type
匹配同类型中的第一个同级兄弟元素E
E:last-of-type
匹配同类型中的最后一个同级兄弟元素E
E:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E
E:empty
选择内容为空的元素
E:checked
匹配用于选中的表单元素(radio/checkbox)
E:enabled
匹配可用的表单元素
E:disabled
匹配不可用的表单元素
E:target
匹配相关URL指向的E元素。(锚点连接)
 
7、样式表的层叠性与特殊性(样式的应用优先)
        层叠性:
            ①标有!important 的用户样式
            ②标有!important 的作者样式
            ③作者样式
            ④用户样式
            ⑤浏览器/用户代理应用的样式
        特殊性:
            ①行内样式  >  内嵌样式  >  外联样式
            ②id  >  class  >  element
            ③选择符的特指度计算。
8、样式的继承性
        一般子元素会从其祖先元素处,继承相应的一些样式。
        继承的样式一般为 font、color等有意义的样式,像 margin、padding 将不会被继承。
9、规划、组织、维护样式表。
        ①尽量使用外联样式表。
                <link rel="stylesheet" type="text/css" href="#" />  相比于 @import("#") , 要快。
        ②所有代码是否分割,应根据站点的实际情况来决定。
                分割代码:按照一定的逻辑进行代码的分割,有利于后期的维护,与代码的复用。但是需要向服务器进行多次的申请,浪费资源。
        ③应用注释
        ④设计代码的结构
                <1>一般性样式:主体样式、reset样式、链接样式、标题、其他元素
                <2>辅助样式:表单、通知和错误、一致的条目
                <3>页面结构:标题、页脚、导航、布局、其他页面结构元素
                <4>页面组件:各个页面
                <5>覆盖
        ⑤自我提示
        ⑥删除注释和优化样式表
 
 
 
 
 

第二天(CSS 选择器)的更多相关文章

  1. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  2. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  3. CSS系列:CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  4. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  5. CSS 选择器(转)

    原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...

  6. 总结30个CSS选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  7. CSS选择器的一些记录

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  8. 第 13 章 CSS 选择器[上]

    学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...

  9. 精通 CSS 选择器

    CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E, ...

随机推荐

  1. 《Linux命令行与shell脚本编程大全》 第十四章 学习笔记

    第十四章:呈现数据 理解输入与输出 标准文件描述符 文件描述符 缩写 描述 0 STDIN 标准输入 1 STDOUT 标准输出 2 STDERR 标准错误 1.STDIN 代表标准输入.对于终端界面 ...

  2. 2.Visual Studio 2013中的默认快捷键

    这篇大致是IDE的使用技巧,常用的也就那么几个. 我自己用的最多的是注释.取消注释.格式调整.运行测试.开始调试.断开调试.重新开始调试.删除行ctrl+L.保存.全部保存.打开资源管理器.搜索等几个 ...

  3. JavaScript之面向对象的概念,对象属性和对象属性的特性简介

    一.大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象.但ECMAScript(指定JavaScript标准的机构,也就是说JavaScri ...

  4. c# 第三方控件 闪退

    使用了第三方控件之后 出现了闪退的情况!  该第三方控件的软件没有注册或没有安装改第三方控件的软件

  5. 字符串分割--Java中String.split()用法

    转载自:http://blog.163.com/zs_note/blog/static/199386112201110804233558/ 在java.lang包中有String.split()方法, ...

  6. Jsp连接Mysql数据库取数方法

    我将Jsp连接Mysql数据库方法整理如下,供大家学习交流! 1.首先在myslq数据库中新建mldn数据库,并新建emp表.(方法不展开介绍) 插入数据如下: create table `emp` ...

  7. ASP.NET MVC Controller向View传值方式总结

    Controller向View传值方式总结 总结发现ASP.NET MVC中Controller向View传值的方式共有6种,分别是: ViewBag ViewData TempData 向普通Vie ...

  8. Linux学习之chage命令

    功能:修改帐号和密码的有效期限用法:chage[-l][-m mindays][-M maxdays][-I inactive][-E expiredate][-W warndays][-d last ...

  9. 搭建Hadoop集群 (三)

    通过 搭建Hadoop集群 (二), 我们已经可以顺利运行自带的wordcount程序. 下面学习如何创建自己的Java应用, 放到Hadoop集群上运行, 并且可以通过debug来调试. 有多少种D ...

  10. 使用PHP把下划线分隔命名的字符串 转换成驼峰式命名方式 , 把下划线后面的第一个字母变成大写

    最近项目使用symfony框架,这个框架对数据库的操作在这个团队里使用的是ORM进行操作,说实话使用ORM的开发效率和运行效率不一定高多少,到是它的实体命名和现有数据库字段的命名不太一样,ORM实体属 ...