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中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- 第五课 CSS3 and H5 知识点
概要:CSS3美化样式.自定义字体图标.滤镜设置.CSS3选择器.transform2D转换.新增表单控件.vaild表单验证.表单样式美化等. 属性选择器: E[attr]只使用属性名,但没有确定任 ...
- OSError: libcudart.so.7.5: cannot open shared object file: No such file or directory
在ubuntu14.04-64-bit,安装完cuda ,cudnn.opencv后, 配置完MXNet,运行demo 时出现错误,库路径环境变量问题,解决方法: sudo ldconfig /usr ...
- 让Git忽略所有obj和bin目录的同步
DotNet的项目里,编译出来的二进制文件默认都是放在每个项目对应的bin和obj目录下,有时候开发人员会不小心把这些目录的文件错误的提交到Git服务器.Git里的忽略文件功能可以通过一个.gitig ...
- ABP中单元测试的技巧：Mock和数据驱动
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:虽然ABP为大家提供了测试的脚手架了,不过有些小技巧还是需要自己探索的. ASP.NE ...
- 第二十二篇：在SOUI中使用代码向窗口中插入子窗口
使用SOUI开发客户端UI程序,通常也推荐使用XML代码来创建窗口,这样创建的窗口使用方便,当窗口大小改变时,内部的子窗口也更容易协同变化. 但是最近不断有网友咨询如何使用代码来创建SOUI子窗口,特 ...
- 【iOS】UITabView/UICollectionView 全选问题
UITabView/UICollectionView 全选问题 SkySeraph July. 30th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySera ...
- 【My Life】写在年末, 我的2013
[My Life]写在年末, 我的2013 SkySeraph Dec. 30 2013 Email:skyseraph00@163.com 好久没写博客了, 遗忘的历史,遗忘了自我... 岁月拾回 ...
- JsonHelper developed by using Newtonsoft.Json.NET, Deserialize to <T> object , XmlToJson/JsonToXml, QuoteName by using JToken Path.
namespace TestConsoleApplication { using System; using System.Diagnostics; using System.Threading; u ...
- Puppet自动化部署-前期环境准备（2）
在安装Puppet环境之前需要配置好机器的基本配置,如规范网络地址IP.hostname,certname认证名称,ntp时间同步等配置完毕,完善的搭建自动化环境. 1.环境介绍 此处实现部署的环境是 ...
- oracle（sql）基础篇系列（五）——PLSQL、游标、存储过程、触发器
PL/SQL PL/SQL 简介 每一种数据库都有这样的一种语言,PL/SQL 是在Oracle里面的一种编程语言,在Oracle内部使用的编程语言.我们知道SQL语言是没有分支和循环的,而PL语 ...