16-CSS选择符详解

Posted 2020-11-26 xiang-liang

CSS选择符命名
　　规范的命名也是Web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义两个div，一个id命名为“div1”，另外一个命名为“news”，肯定第二个比较易读，而且搜索引擎抓取率高，在团队合作中还可以提高工作效率。为了达到这种效果我们就要规范化命名（语义化命名）！
　　关于CSS命名法，和其他的程序命名差不多，主要有三种：驼峰，帕斯卡，匈牙利法。
　　驼峰命名法：除第一个单词首字母小写外，其余所有单词首字母都大写
　　　　例：#headerBlock,.navMenuRedButton
　　帕斯卡命名法：与驼峰相似，区别就是所有单词首字母都大写
　　　　例：#HeaderBlock, .NavMenuRedButton
　　匈牙利命名法：是需要在名称前面加上一个或者多个小写字母作为前缀
　　　　例 head_navigation, .red_navMenuBotton
　　前两种比较常用，其实CSS命名就一个原则“容易理解，方便协同工作”
　　网页模块的常用CSS命名
　　　　头：header 热点：hot 内容：content 新闻：news
　　　　尾：footer 下载：download 导航：nav 广告：banner
　　　　侧栏：sidebar 页面主体：main 栏目：coluumn 子导航：subnav
　　页面外围控制整体布局宽度：prapper 菜单：menu 左右中：left right center
　　子菜单：submenu 登陆条：loginbar 版权：copyright 标志：logo
　　友情链接：friendlinks

　　ID选择符：与类选择符相似，只是以英文 “#” 开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式　　
　　　　如：#main{属性：值}
　　同时给某个元素应用多个类与ID
　　　　<p class="a1 a2" id="a6">......</p>
　　通配选择符： *｛属性：值｝，用于定义所有的html元素
　　包含选择符（嵌套、派生）：语法 e1 e2｛属性：值｝
　　含义是所有被e1包含的e2
　　　　如：table td｛属性：值｝ #header li a｛属性，值｝
　　优点就是不需要再单独为ID为header的标签内，li标签内的a标签再定义class或者ID，css代码就少了、同样优化了css代码
　　选择符分组（集体控制）：将同样的样式定义用于多个选择符，选择符之间用逗号分隔。
　　　　如: p,div,warning｛属性：值｝
　　标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符
　　　　例：h1#content{}表示针对所有id为content的h1标签
　　　　h1.p1{}表示针对所有class为p1的h1标签
　　组合选择符：将以上选择符进行组合使用
　　　　h1.p1,#content h1｛｝