下面介绍组合选择器
组合选择器就是相同的属性都放在一起
例如
标题
标题
标题
标题
标题
我要让这5种标题的文字都变成红色,显然一个个定义就太麻烦了
我们可以这样
标题
标题
标题
标题
标题
当然也可以id选择器,类选择器,标签选择器一起组合
,a,#b,div{
color:red
}注意都要用逗号隔开
如果没用逗号隔开,就是我们下面要说的父子选择器了
标题
标题
标题
标题
标题
假如要让div里的hi标签都成红色
有很多办法,一种用标签选择器,但是会让页面上所有的H1标签都成红色,不好
也可以用类标签,但是每个h1标签里都要class一下 麻烦
我们可以这样立即学习“前端免费学习笔记(深入)”;
标题
标题
标题
标题
标题
这样就ok了
如果是这样标题
标题
这样就ok
标题
标题
很简单吧,其实父选择可以控制它下面的任何标签或类或id选择器,也就是孙子或重孙子
所以这样也是可以的标题
标题
但建议最好不要这样。因为层次不清楚的话很容易搞晕
另外一种属性选择器,不是很常用标题
标题
必训得加
文档说明才有用
标题
标题
只对等于a的有效
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }但其实也不是常用,不做必训掌握内容
下面是介绍相邻选择器
这可能很难理解标题
我离上面标题50px
不变
仿虎嗅网在线视频教育门户源码2.0下载仿虎嗅商学院在线视频教育门户网站源码,织梦内核,页面简洁,容易维护修改;适合做在线教育类网站,网站模板修改简单,网站设置多个广告位方便放置广告。适用于视频网站,在线教育、在线商学院;图片展示效果极佳;网站手工div+css,代码精简,首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML;首页和全局重新做了全面优化,方便大家无缝使用。
不变
这其实是针对第一个p的样式,margin-top:50px表示外边距50px,以后学到
还有一种子元素选择器,也比较难理解
先看下面你好吗
你好吗
这种很熟悉啦,父子选择器,我说过父亲可以控制任意下面的子元素,所以两个好都变红色
如果我只希望a是p的子元素,另外一个a是span的子元素,就该这样你好吗
你好吗
这两种选择器都得加(当然不是只有这个),否则无效
这两种选择器很灵活,作为高手进阶吧,初学还是把其他选择器基础打牢固
现在是关键内容 div 盒子模型
这是W3C的图,在看另一张图
其实看看就明白的
以上就是div+css网页布局设计新开端(3)的内容,更多相关内容请关注PHP中文网(www.php.cn)!
相关文章
css弹性盒子多行换行排列不生效怎么办_结合flex wrap实现换行
css 布局中的间距与对齐_使用 margin 和 padding 调整元素间距
css margin 负值有什么作用_布局微调常见场景说明
css网页配色方案实战_为网站设计配色并实现
css浮动与清除浮动在表单布局中的运用
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
更多热门AI工具
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号












