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中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- php五种常见的设计模式（转载）
很多人都想着写博客来记录编程生活中的点滴,我也不例外,但想了好长时间不知道写什么........万事开头难,先转载一篇吧..... 设计模式 一书将设计模式引入软件社区,该书的作者是 Erich Ga ...
- Mahout之数据承载
转载自:https://www.douban.com/note/204399134/ 推荐数据的处理是大规模的,在集群环境下一次要处理的数据可能是数GB,所以Mahout针对推荐数据进行了优化. Pr ...
- Js动态设置rem来实现移动端字体的自适应
//设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width( ...
- json 排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 数学系列：XXX
Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...
- Problem with "AnyConnect was not able to establish connection to the specified secure gateway."
Cisco的VPN客户端最近报"AnyConnect was not able to establish connection to the specified secure gateway ...
- Aspx页面模拟WebService功能
在后台引入 using System.Web.Services 命名空间 然后在编写web服务方法: [WebMethod] public static string GetData(string t ...
- 体验Visual Studio 2015 之 MVC - 视图组建
VS2015 PERVIEW中可以创建MVC 项目. 我们可以 发现有几大亮点. 首先我们看目录结构: 当前项目包含两个主要的文件夹:Solution Items .src 很明显src文件夹下为当前 ...
- 解决java.beans.Introspector导致的内存泄漏
解决方案: 在WEB.XML 中配置监听器: <listener> <listener-class> org.springframework.web.util.Introspe ...
- Good Bye 2016
A - New Year and Hurry (water) #include <bits/stdc++.h> using namespace std; int main() { ]; ; ...