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中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- JIRA FOR LINUX 安装过程
1.Download 官网下载地址:https://www.atlassian.com/software/jira/download,只看到window下的安装版本,这个时候需要点击? All JIR ...
- Excel文件下载功能
HtmlTextWriter:能够帮助我们快速生成html语句. 下载功能实现代码 protected void Button1_Click(object sender, EventArgs e) { ...
- javase--反射
//书写规则 package cn.reflex; public interface PCI { public void open(); public void close(); } //调用方法 p ...
- C/C++面试知识点总结
1.中缀,后缀,前缀表达式: 后缀表达式是波兰逻辑学家卢卡西维奇(Lukasiewicz)发明的一种表示表达式的方法.这种表示方式把运算符写在运算对象的后面,例如,把a+b写成ab+,所以也称为后缀式 ...
- C#设置IE代理及遇到问题的解决方案
起初使用的方法是修改完一次代理之后就不能继续修改,需要重新启动一次进程才可以,最初代码是: private void ShowProxyInfo() { if (!GetProxyStatus()) ...
- css common 通用
/*common*/ body{ color:#666666; font-size:12px; margin:; padding:; font-family:"Arial",&qu ...
- ASP.NET中GridView数据导出到Excel
/// <summary> /// 导出按钮 /// </summary> /// <param name="sender"></para ...
- 基于2D-RNN的鲁棒行人跟踪
基于2D-RNN的鲁棒行人跟踪 Recurrent Neural Networks RNN 行人跟踪 读"G.L. Masala, et.al., 2D Recurrent Neural N ...
- kafka的log存储解析——topic的分区partition分段segment以及索引等
转自:http://blog.csdn.net/jewes/article/details/42970799 引言 Kafka中的Message是以topic为基本单位组织的,不同的topic之间是相 ...
- python常用模块json、os、sys
一.序列化 json & pickle 模块 json--用于字符串和Python数据类型间进行转换 pickle---用于python特有的类型和Python的数据类型间进行转换 json: ...