16-CSS选择符详解
2021-04-03 05:27
标签：嵌套 两种 组合 区别 navig 常用 索引 控制 而且 CSS选择符命名 ID选择符：与类选择符相似，只是以英文 “#” 开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式 ...... 16-CSS选择符详解 标签：嵌套 两种 组合 区别 navig 常用 索引 控制 而且 原文地址：https://www.cnblogs.com/xiang-liang/p/12545408.html
规范的命名也是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
如：#main{属性：值}
同时给某个元素应用多个类与ID
通配选择符： *｛属性：值｝，用于定义所有的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｛｝
下一篇：17-css盒子模型详解