CSS基础篇之选择符
关系选择符
E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
P b{
font-size: 60px;
font-family: "微软雅黑";
color: red;
}
</style>
</head>
<body>
<p>
<b>dd</b>
<b>dd</b>
<b>dd</b>
<b>dd</b>
<b>dd</b>
</p>
</body>
</html>
这里我调节h1元素内的所有P元素的字体大小为19像素。
用包含选择符时可以适用子元素里面全部包括子元素里面孙子元素都会有。
E>F 子选择符(Child combinator) CSS2 选择所有作为E元素的子元素F。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* none 无 */
.nav > li {
list-style: none;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="">菜单项1</a>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
<li>
<a href="">菜单项2</a>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
<li>
<a href="">菜单项3</a>
</li>
<li>
<a href="">菜单项4</a>
</li>
<li>
<a href="">菜单项5</a>
</li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* none 无 */
.nav > li {
list-style: none;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="">菜单项1</a>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
<li>
<a href="">菜单项2</a>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
<li>
<a href="">菜单项3</a>
</li>
<li>
<a href="">菜单项4</a>
</li>
<li>
<a href="">菜单项5</a>
</li>
</ul>
</body>
</html>
这里调节了最外部的ul删除了前面的实心圆但是li标签里面的ul没有收到影响。
选用子选择符F元素只能是第一个子元素里有效在孙子元素里没用。
E+F 相邻选择符(Adjacent sibling combinator) CSS2 选择紧贴在E元素之后F元素。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h3 + small {
color: red;
}
</style>
</head>
<body>
<h3>这是h3标题</h3>
<small>这是小标题</small>
<p>这是内容...</p>
<p>这是内容...</p> <h3>这是h3标题</h3>
<small>这是小标题</small>
<p>这是内容...</p>
<p>这是内容...</p> <div>
<small>我是div里面的small</small>
</div>
</body>
</html>
这里我调节了h3标签后面的small标签的颜色但是P标签没有影响。+号就是他们在上下关系中间不能间隔。建立相邻选择符时要在统一个父标签内。
E~F 兄弟选择符(General sibling combinator) CSS3 选择E元素所有兄弟元素F。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h3 ~ small {
color: red;
}
</style>
</head>
<body>
<h3>这是h3标题</h3>
<small>这是小标题</small>
<p>这是内容...</p>
<p>这是内容...</p> <h3>这是h3标题</h3>
<small>这是小标题</small>
<p>这是内容...</p>
<p>这是内容...</p> <div>
<small>我是div里面的small</small>
</div>
</body>
</html>
这里选择的是h3的所有的兄弟标签small但是div标签内的small没有改变。你也可以把h3~p也是可以的。Small里面是没有变化。这个可以间隔。建立兄弟选择符时要在统一个父标签内。
Id和class
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
Id的属性值只能页面内存在一个，就像自己的身份证一样。
<h3 id="p1"> 这是一个段落 </p>
#h31 {
font-size:12px;
font-weight:bold;
}
class选择符
<p class="p1"> 这是一个段落 </p>
.p1 {
font-size:12px;
font-weight:bold;
}
在网页中，每个id名称中只能使用一次，不得重复。
与id 不同，class 允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
background: #c9e4ec;
}
a:active {
background: #c9e4ec;
}
这四个属性是在一起的而且顺序不能变按照上面一样可以设置字体颜色、样式、大小、背景颜色等...
持续更新。。。
CSS基础篇之选择符的更多相关文章
- CSS基础篇之选择符2
属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...
- CSS基础篇之选择符3
border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 ...
- CSS全览_选择符+特指+单位+字体
CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 好程序员web前端分享CSS基础篇
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...
- 前端面试题——html与css基础篇
整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...
- html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...
- html/css基础篇——html代码编写过程中的几个警惕点
本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格 正常情况下书写 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- "飞机大战"游戏_Java实现_详细注释
1 package cn.xiaocangtian.Util; import java.awt.Frame; import java.awt.Graphics; import java.awt.Ima ...
- XML带多属性解析为一个实体类（利用反射）
最近在对接一个银行的项目,大概就是类似一个钱包的功能,在请求返回的数据时,发现返回的数据标准的XML格式的支付串,格式如下 <kColl id="inputOrig" app ...
- tp框架之文件上传
控制器 function wenjian() { if(empty($_FILES)) { $this->display(); } else { $u = new \Think\Upload() ...
- Android基础学习第二篇—Activity
写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...
- linux系统加快大文件的写入速度
linux系统加快大文件的写入速度 setvbuf进行优化内存IO
- Python 学习第十六天 html 前端内容总结
一,css知识总结 1, css属性 css的属性包括以下内容 position:规定元素的定位类型 background:属性在一个声明中设置所有的背景属性 可以设置的如下属性: (1)back ...
- nodejs复习03
文件系统fs 重命名 fs.rename() fs.renameSync 优先选择异步,可以进行异常判断 打开关闭文件 fd = fs.openSync(file, flags) fs.closeSy ...
- 通过GDI+绘制 验证码
只为了记录下自己的学习历程,方便日后查看 现在开始言归正传,以下为其完整代码附上 using System; using System.Collections.Generic; using Syste ...
- MVC Html.BeginForm 与 Ajax.BeginForm 使用总结
最近采用一边工作一边学习的方式使用MVC5+EF6做一个Demo项目, 期间遇到不少问题, 一直处于研究状态, 没能来得及记录. 今天项目进度告一段落, 得以有空记录学习中遇到的一些问题. 由于MVC ...
- Yii框架CURD方法
在YII框架中,CURD有2种方式: 1.AR模式:2. DAO模式 AR模式下 查全部 MODEL $model->find()->asArray()->all()查单 个 ...