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中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- October 27th Week 44th Thursday 2016
The art of being wise is the art of knowing what to overlook. 智慧之道在于懂得该忽略什么. Always do your best. Wh ...
- Mysql 迁移最完整可用的教程
此教程来源stackoverflow,仅供我自己需要时查看,其他人不可以瞎看! ## Stop MySQL using the following command: `sudo /etc/init.d ...
- 关于QImage提取单色通道方法（vector)
转载请标明处: 作者:微微苏荷 本文地址:关于QImage提取单色通道方法(vector) 近日,用QT和mxnet结合做一个图像识别的demo.遇到需要把图片从QImage转为vector单色分离的 ...
- Oracle临时文件
临时数据文件时一种特殊的文件,当内存不足时,Oracle用他来存储一些临时数据,如排序或散列操作. 自12c起,对临时表的操作所产生的undo也会放到临时表空间中,而在12c之前,这部分undo放在u ...
- 在Linux和Windows的Docker容器中运行ASP.NET Core
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 译者序:其实过去这周我都在研究这方面的内容,结果周末有事没有来得及总结为文章,Scott H ...
- 【Hibernate框架】关联映射（一对多，多对一）
根据我们的总结计划,上篇文章我们总结了有关于一对一映射相关知识,接下来,我们进行下一个阶段,一对多.多对一映射相关知识. 场景设定: 国家规定,一个人只能在一个公司上班,一个公司可以拥有很多员工.我们 ...
- Java环境变量的简记
1,安装版的jre或jdk.安装后如果不做开发用,则只是做Java运行时环境,则不需要手动配置任何Java环境变量. 2,绿色解压版(拷贝版)jdk或jre.运行和开发都需要配置环境变量. 运行Jav ...
- wpf 切换资源字典的2中方式
var _1200RDUri = new Uri(String.Format(@"/aa;Component/Themes/1200Theme.xaml"), UriKind.Re ...
- files list file for package 'xxx' is missing final newline
#!/usr/bin/python # 8th November, 2009 # update manager failed, giving me the error: # 'files list f ...
- 2016 Multi-University Training Contest 2 D. Differencia
Differencia Time Limit: 10000/10000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...