后代选择器的css代码，css的命名规则_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 1:19:01 共计：3615 浏览

一、网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率。

所有的命名最好都小写

属性的值一定要用双引号("")括起来，且一定要有值如class="DIVcss",id="divcss"

每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

空元素要有结束的tag或于开始的tag后加上"/"

表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

给每一个表格和表单加上一个唯一的、结构标记id

给图片加上alt标签

尽量使用英文命名原则

尽量不缩写，除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名：

外套 wrap ----------------用于最外层

头部 header --------------用于头部

主要内容 main ------------用于主体内容（中部）

左侧 main-left ------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

DIV+CSS命名小结：

无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循。

主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有：

wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)

、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。

在css样式中，星号代表的是“所有元素”，“*”选择器能够选取所有的元素或者一个元素中的所有子元素。使用“*”选择器来设置样式，会统一设置所有元素的样式，语法为“*{css属性:属性值;}”。

星号选择器（*）表示选中所有的元素。

* 选择器选取所有元素。

* 选择器也能选取另一个元素中的所有元素。

注意：*选择器比较消耗性能，尽量避免使用，应使用更加精确的选择器选择元素。

选择器body > div 只操作body下级的div。div1 + div2 只选择div1 同级随后相邻最近的div2div1 ~ p 选择div1下所有的p属性选择器

cssSelector定位，属于CSS高级等位，它的定位方式，利用选择器进行的。在CSS 中，选择器是一种模式，用于选择需要添加样式的对象。“CSS” 列指示该属性是在哪个CSS 版本中定义的。(CSS1、CSS2 还是CSS3。);

下面罗列了一部分的CSS定位方式。看到这么多是否觉得CSS不再简单，其实不然常用的几种方式作者已标记，CSS定位是平常使用过程中非常重要的一种方式。它与Xpath定位有诸多类似的地方，但是无论从性能还是语法上来说CSS都是比较有优势的。

1、一般情况下定位速度要比XPATH快

2、语法比Xpath要简洁

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。