有空格表示上下级关系或者说父子关系,比如:
创新互联公司是一家集网站建设,溪湖企业网站建设,溪湖品牌网站建设,网站定制,溪湖网站建设报价,网络营销,网络优化,溪湖网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
style
.a .b {
color: red
}
/style
div class="a"
div class="b"
这里的文字是红色
/div
/div
没有空格则表示叠加关系,比如:
style
.a.b {
color: red
}
/style
div class="a b"
这里的文字是红色
/div
class中的空格是为了给html标签同时赋予多个class类名。
在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。
为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。请看下面的 HTML 代码:
h1 class="important" This heading is very important. /h1 p class="important" This paragraph is very important. /p
在上面的代码中,两个元素的 class 都指定为 important:第一个标题( h1 元素),第二个段落(p 元素)。
扩展资料:
例如:如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:p class="important warning" This paragraph is a very important warning. /p 这两个词的顺序无关紧要,写成 warning important 也可以。
假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。
css white-space这个css样式,用来设置element元素对内容中的空格的处理方式,有着几个可选值:normal,
nowrap,
pre,
pre-wrap,
pre-line
没有设置white-space属性,则默认为white-space:normal。normal表示合并空格,多个相邻空格合并成一个空格,在源码中的换行作为空格处理,只会根据容器的大小进行自动换行。
white-space:nowrap和normal一样,也合并空格,但是不会根据容器大小换行,表示不换行。
效果如下:这个效果在页面布局中使用很频繁,尤其在移动端布局中。
white-space:nowrap会导致文本不换行,经常和overflow,text-overflow一起使用,如下:
效果如下:
white-space:pre的作用是保持源码中的空格,有几个空格算几个空格显示,同时换行只认源码中的换行和
标签。
white-space:pre-wrap的作用是保留空格,并且除了碰到源码中的换行和
会换行外,还会自适应容器的边界进行换行。
效果如下:
white-space:pre-wrap和white-space:pre的区别就是会自适应容器的边界进行换行。
white-space兼容性
css中 用逗号隔开表示两个不同类的样式类名用同一个样式;
空格隔开表示从属包含关系,是当前的元素子元素;
逗号隔开表示并列关系,两者之间没有任何关系,可以使用同一个样式。
比如下面的代码示例:
div class="content"
span class="content-child"子内容/span
内容/div
div class="conter"内容2/div
style
.content .content-child{
color:red;//空格隔开表示在类content下的类样式.content-child的样式被改变了
}
.content,conter{
color:#ffd014;//逗号表示在不同的类下,样式都被改变。
}
/style
1、CSS代码里要用半角的空格,才不会有影响。如下图“float: left”之间用“半角空格”的。
2、如下图,“flost: left”之间用了全角空格,CSS样式就不起作用了。
比如下面这段代码:
div class="aa bb"
p class="bb"
span class="bb"/span
/p
/div
选择器:.aa .bb
.aa和.bb间加上空格,是子选择器,选择.aa下含有.bb的子节点,子包括儿子节点、孙子节点,选择出的内容包括p.bb,span.bb;
选择器: .aa.bb
.aa和.bb间无空格,是选择同一个元素,只不过选择器粒度更精细了些,选择的元素既有.aa类,也有.bb类,选择出的内容为:div.bb
选择器:.aa.bb
.aa和.bb间加上大于号,也是子选择器,选择.aa下含有.bb的子节点,子只包括儿子节点,选择出的内容为p.bb