Home > Web Front-end > HTML Tutorial > 精通CSS version2笔记之⒈选择器 - 周起

精通CSS version2笔记之⒈选择器 - 周起

WBOY
Release: 2016-05-21 08:42:27
Original
1294 people have browsed it

1.常用的选择器:
①元素选择器   指定希望应用样式的元素.比如:p {color:#fff;}
②后代选择器   寻找特定元素或者元素的后代. 比如:body p{color:#ccc;}   这个选择器和子选择器body>p的区别是:body>p是指body下作为子元素的所有节点P,而后代选择                    是body下面所有的节点P,可以说子元素选择器是一种特殊的后代选择器。

 ③类选择器  指定特定的类应用样式比如.a{color:#ccc;} 类选择器命名最好根据它用作什么而不是表现什么来命名。如果在文档中添加了许多不必要 的类,那么这可能是文档结                      构不合理的信号。最好根据祖先选择器的后代选择器来选定。
④伪类选择器根据文档结构之外的其他条件对元素应用样式 比如:a:hover{color:red},    :link    :visited称为链接伪类,只能用于锚元素,而:hover :active :focus称为动态伪                    类,理论上可以应用于任何元素,这些伪类可以层叠,创建更复杂的行为                      
⑤通用选择器匹配所有可用元素应用样式(相当于全选),由一个*表示,它可以用来对某个元素的所有后代应用样式,或者跳过一级的后代。
⑥高级选择器之子选择器:如前文  略。
⑦相邻同胞选择器  选取同一个父元素下某个元素之后的第一个同级兄弟元素。可以认为是和JS中的:after选择一个效果

 比如 p+div{color:#00f;}就可以实现应用样式

 ⑧属性选择器可以根据属性的值来寻找元素  比如acronym[title='practise']{bgc:blue;}寻找拥有title属性且值为practised元素应用样式

ps:为了避免样式过分混乱,尽量保持一般样式非常一般,特殊样式非常特殊

继承是指应用样式的元素的后代会继承样式的某些属性,可以通过设置父元素的一般样式来避免子元素标签的过分使用。

现在样式表最常见的是链接样式,这样方法比导入方法快,使用结构良好的单一CSS文件可以显著提高下载速度,但是可以根据实际情况,尽量使代码美观不混乱。

                          代码的结构设计(!important)

                             为了便于维护,最好将样式分块

                          1.一般样式

                                     ⑴主体样式

                                     ⑵reset样式

                                     ⑶链接

                                     ⑷标题

                                     ⑸其他元素

                          2.辅助样式

                                     ⑴表单

                                     ⑵通知和错误

                                     ⑶一致的条目

                           3.页面结构

                                     ⑴标题、页脚、导航

                                     ⑵布局

                                     ⑶其他页面结构元素

                            4.页面组件

                                     各个页面

                             5.覆盖样式

               在需要的地方加上注释是一种良好的习惯                          

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template