精通CSSversion2笔记之⒈选择器_html/css_WEB-ITnose

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.覆盖样式

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