div+css网页布局设计新开端（3）

黄舟

发布时间：2016-12-29 14:17:13

1317人浏览过

来源于php中文网

原创

下面介绍组合选择器
组合选择器就是相同的属性都放在一起

例如

标题
标题
标题
标题
标题

我要让这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

上一篇：div+css网页布局设计新开端（2）下一篇：div+css网页布局设计新开端（4）

作者最新文章

HTML5 Placeholder属性的详情介绍

2018-05-30 09:51

html中关于标签的全部属性的使用总结

2018-05-30 14:32

php如何快速实现数组去重的实例

2018-05-30 15:03

php中关于IMAP如何收取邮件的方法介绍

2018-05-31 09:38

PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析

2018-05-31 10:28

从零开始打造自己的PHP框架的视频资料

2018-05-31 10:45

php基础知识总结（新手入门必备）

2018-05-30 14:26

ReactJS中表单的单选多选与反选的实现方法

2018-05-30 09:45

JavaScript中typeof的使用方法介绍

2018-05-30 11:42

JavaScript中confirm()方法的使用介绍

2018-05-30 10:29

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

Java 项目构建与依赖管理（Maven / Gradle）

本专题系统讲解 Java 项目构建与依赖管理的完整体系，重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例，帮助学习者掌握从零搭建、维护到发布 Java 工程的标准化流程，提升在实际团队开发中的工程能力与协作效率。

2026.01.12