第二天(CSS 选择器)
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>覆盖
⑤自我提示
⑥删除注释和优化样式表