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又称样式重叠在网页排版布局中的地位举足轻重. 做 ...
随机推荐
- Vulnhub:recon靶机
kali:192.168.111.111 靶机:192.168.111.188 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...
- JavaSE总结（1）
Java发展历史.HelloWorld.常量.变量类型转换.运算符.方法(函数)1.jdk版本: jdk1.2---J2EE/J2SE/J2ME jdk1.5---JavaSE/JavaE ...
- vue 从后往前循环数组的简洁写法
- css 网页置灰
body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms- ...
- CVE-2018-8174漏洞复现（IE浏览器远程代码执行漏洞）
漏洞介绍:CVE-2018-8174这个漏洞是针对IE浏览器的一个远程代码执行漏洞,是Windows VBScript Engine 代码执行漏洞,由于VBScript脚本执行引擎(vbscript. ...
- "人生重开模拟器"，10分钟轻松搭建！
人生重开模拟器是最近爆火的一款非常好玩的模拟游戏,会带你走入一个有趣的世界,开启全新的人生旅程,即"人生重开". 然而实际上,这款游戏短短在3天内上线,在百度贴吧.朋友圈.QQ群. ...
- css - content-visibility
css - content-visibility content-visibility:实现可见网页只加载可见区域内容 介绍 content-visibility是一个css属性,它控制一个元素是否呈 ...
- 安装archlinux系统
archlinux iso文件下载站点这个iso文件需要保证较新,否则其中的比如libcap的验证密钥过时无法在系统里安装软件包.比如2022年10月7日安装0601版本iso无法通过linux等软件 ...
- K8S详细教程
Kubernetes详细教程 1. Kubernetes介绍 1.1 应用部署方式演变 在部署应用程序的方式上,主要经历了三个时代: 传统部署:互联网早期,会直接将应用程序部署在物理机上 优点:简单, ...
- Ansible 实记
自动化运维工具 Ansible ansible是基于模块工作的,本身没有批量部署的能力.真正具有批量部署的是ansible所运行的模块,ansible只是提供一种框架.主要包括: (1).连接插件co ...