Div的几种选择器
Div 是一个html标签，一个块级元素（单独显示一行），单独使用没有意义，需要结合CSS来使用，主要用于页面的布局。
div选择器：
1.元素选择器：
1 <style>
2 div{
3 font-size: 5px;
4 color: red;
5 }
6 </style>
7 <body>
8 <div >
9 你停在了那条我们熟悉的街。
10 </div>
11 </body>
2.类选择器：
1 <style>
2 .div2{
3 font-size: 5px;
4 color: red;
5 }
6 </style>
7 <body>
8 <div class="div2">
9 你停在了那条我们熟悉的街。
10 </div>
11 </body>
3.id选择器：
1 <style>
2 #div3{
3 font-size: 5px;
4 color: red;
5 }
6 </style>
7 <body>
8 <div id="div3">
9 你停在了那条我们熟悉的街。
10 </div>
11 </body>
4.层级选择器
1 <style>
2 div font{
font-size: 40px;
color:brown;
}
6 </style>
7 <body>
8 <div>
把你准备好的台词全念一遍。
<font> 爱你到最后 不痛不痒</font>
</div>
11 </body>
5.属性选择器：
1 <style>
2 input[type = 'text']{
font-size: 40;
color: yellow;
}
6 </style>
7 <body>
8 <div>
我们的爱 <input type="text" name="password" />
</div>
11 </body>
6.行内引入：
1 <div style="color: orange; font-size:20px ;">
2 怪我没能力跟随。
3 </div>
7.外部引入
style1.css文件中
div{
font-size: 5px;
color: red;
} 利用link导入：
<html>
<head>
<meta charset="UTF-8">
<title> div选择器</title>
<link rel="stylesheet" href="style1.css" type="text/css"/>
</head>
<body>
<div>
你还要我怎样
</div>
</body>
</html>
Div 浮动特性
left:左侧不允许浮动元素
right:右侧侧不允许浮动元素
both 两侧都不允许浮动元素
none 默认值 两侧都允许浮动元素
inherit 从父元素继承clear属性值。
添加浮动 用float,清除浮动用clear。
Div的几种选择器的更多相关文章
- CSS3常用30种选择器总结
CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...
- CSS 常见的8种选择器 和 文本溢出问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...
- 不可不看！CSS3中三十一种选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
- jQuery的12种选择器
jQuery的12种选择器 1.#id : 根据给定的ID匹配一个元素 显示(用加粗的代替颜色): 这是第一个p标签 2.* : 匹配所有元素,多用于结合上下文来搜索 显示 : 这是p标签 这是di ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- 理解CSS中的三种选择器>+~
1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F 相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...
- 汇总jQuery的61种选择器及示例
汇总jQuery的61种选择器及示例 恋痿喃 ㄍń稀广 因罘乐睽 ú燔蒇 骤幄觳 ч豹 齑骝氮铷 宅廓Ω孓 锏遒 荛猩ㄜ彬 芡钷ж ┊贩错鹌 掩饰着可还是几步就窜到了门口看着这个让她 ...
- CSS的几种选择器
选择器 目录 选择器 基础选择器 标签选择器 类选择器 id选择器 通配符选择器 复合选择器 后代选择器 子选择器 并集选择器 伪类选择器 基础选择器 标签选择器 标签选择器可以把一类标签全部选择出来 ...
- 最新CSS3常用30种选择器总结(适合初学者)
1. *:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认C ...
- css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做 ...
随机推荐
- 【补题】The 2022 SDUT Summer Trials
比赛链接 The 2022 SDUT Summer Trials A. Ginger's number 样例恶臭(恼) 签到题 简单分解因数就会发现要求的就是\(gcd\),直接算即可,时间复杂度\( ...
- Mysql数据库基础第五章：（一）事务
Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...
- 在老项目中单独引入vue.js,使用自定义指令
传统项目,做一个表格渲染,然而数据过多,传统方式费时费力,便引入vue和elelment ui,由于表格需要渲染的数据过多一个表格上千条,导致切换tab更新表格时缓慢,体验太差,于是做了自定义指令, ...
- 发誓要学会wepack
9.9 学习资料: http://webpack.wuhaolin.cn/ <深入浅出Webpack> https://github.com/zshno1/wepack-study w ...
- 「postOI」以另一种方式证明 FWT
记号 \(\otimes\) 代表或/与/异或卷积: \(\oplus\) 代表"拼接",例如 \(A\oplus B\) 即将 \(B\) 接在 \(A\) 的后面: \(+,- ...
- 「SOL」JOISC2021 解题报告
JOIS(egment-Tree)C 1. 前言 很早之前教练让我们做这套题,我以为这套题应该挺简单,用几天的空余时间就能刷完,结果预想的短周期刷题变成了长周期刷题--(好像是整个团队里最后一个刷完的 ...
- 第四章：用Python对用户的评论数据进行情感倾向分析
文章目录 项目背景 获取数据 情感倾向 senta_bilstm 模型 情感划分 数据描述 数据分析 总体评论倾向 评论分布 各分布的情感倾向 评论分词 去除停用词 绘制词云图 结论 源码地址 本文可 ...
- pytorch的三种量化方式详解
pytorch的三种量化方式详解 这篇博客详细介绍了pytorch官方教程提到的三种量化方式的原理,详细解释了三种量化方式的区别: 1. 静态量化 :torch.quantize_per_tensor ...
- 我常用的Linux快捷命令
alias 设置快捷自定义命令 语法: alias 快捷命令='完整命令' 因为可以直接把上述当成一条语句来执行,但是服务器重启之后会失效,被称为临时快捷命令: 但是!将他写入 ~/.bashrc 文 ...
- vue3 门户网站搭建8-字体
浏览器默认的可选字体比较少,如果没有合适的则需要额外下载并引入. 一般使用 开源字体即可,商用需要花钱~ 将下载好的 ttf 格式字体放入项目下文件夹: 样式文件中增加配置:(main.css) 即可 ...