CSS知识总结（二）
CSS的选择符分成：
1. 通配选择符
2. 元素选择符
3. 群组选择符
4. 关系选择符
5. id及class选择符
6. 伪类选择符
7. 属性选择符
8. 伪对象选择符
1.通配选择符（*）
* 号表示所有的对象。
所谓通配选择符，就是指可以使用模糊指定的方式来对象进行选择，指定样式。
例子源代码：
/* CSS代码 */
*{
color:gray;
}
<!-- HTML代码 -->
<body>
<p>这是灰色字体的p标签</p>
<span>这是灰色字体的span标签</span>
</body>
效果：
这是灰色字体的p标签
这是灰色字体的span标签
2.元素选择符
所谓元素选择符，指以网页中已有的标签名作为名称的选择符。
例子源代码：
/* CSS代码 */
p{
color:gray;
}
span{
color:brown;
}
<!-- HTML代码 -->
<body>
<p>这是灰色字体的p标签</p>
<span>这是棕色字体的span标签</span>
</body>
效果：
这是灰色字体的p标签
这是棕色字体的span标签
3.群组选择符
对一组标签进行相同的样式定义；使用逗号对选择符进行分隔，对页面中需要使用相同样式的地方，只需写一次样式。
例子源代码：
/* CSS代码 */
p,span{
color:brown;
}
<!-- HTML代码 -->
<body>
<p>这是棕色字体的p标签</p>
<span>这是棕色字体的span标签</span>
</body>
效果：
这是棕色字体的p标签
这是棕色字体的span标签
4.关系选择符
a.包含选择符（E F）
选择所有被E元素包含的F元素。
例子源代码：
/* CSS代码 */
ul li a{
color:red;
}
<!-- HTML代码 -->
<body>
<ul>
<li>
<a href="">菜单项</a>
<ul>
<li><a href="">列表项1</a></li>
<li><a href="">列表项2</a></li>
<li><a href="">列表项3</a></li>
</ul>
</li>
</ul>
</body>
此例，使用ul li a，那么所有a标签都会变红色。
效果：
b.子选择符（E > F）
选择所有作为E元素的子元素F。
例子源代码：
/* CSS代码 */
.nav > li > a{
color:red;
}
<!-- HTML代码 -->
<body>
<ul class="nav">
<li>
<a href="">菜单项</a>
<ul>
<li><a href="">列表项1</a></li>
<li><a href="">列表项2</a></li>
<li><a href="">列表项3</a></li>
</ul>
</li>
</ul>
</body>
此例，使用.nav>li>a，那么只有.nav的li下面的a标签才会变红色。
效果：
c.相邻选择符（E + F）
选择紧贴在E元素之后的F元素。
例子源代码：
/* CSS代码 */
p+p{color:red;}
<!-- HTML代码 -->
<body>
<h3>这是一个标题</h3>
<p>这是第1个p标签</p>
<p>这是第2个p标签</p>
<h3>这是一个标题</h3>
<p>这是第3个p标签</p>
<p>这是第4个p标签</p>
</body>
此例，使用p+p{color:red;}，选择紧贴在p标签后的p标签，那么第2个p标签和第4个p标签将会变成红色。
效果：
这是一个标题
这是第1个p标签
这是第2个p标签
这是一个标题
这是第3个p标签
这是第4个p标签
d.兄弟选择符（E ~ F）
选择E元素的所有兄弟元素F。
例子源代码：
/* CSS代码 */
p~p{color:red;}
<!-- HTML代码 -->
<body>
<h3>这是一个标题</h3>
<p>这是第1个p标签</p>
<p>这是第2个p标签</p>
<h3>这是一个标题</h3>
<p>这是第3个p标签</p>
<p>这是第4个p标签</p>
</body>
此例，使用p~p{color:red;}，选择p标签的其它所有p标签，那么第2个p标签、第3个p标签和第4个p标签将会变成红色。
效果：
这是一个标题
这是第1个p标签
这是第2个p标签
这是一个标题
这是第3个p标签
这是第4个p标签
5.id及class选择符
id及class均是css提供由用户自定义标签名称的选择符，用户可以使用选择符id及class来面对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合HTML标签的目的。
a.id选择符（E#id）
id选择符可以为标有特定id的HTML元素指定特定的样式。
id选择器以“#”来定义。
*在网页中，一个id名称只能使用一次，不得重复。
例子源代码：
/* CSS代码 */
#content{
color:gray;
}
<!-- HTML代码 -->
<body>
<p id="content">正文内容</p>
</body>
效果：
正文内容
b.class选择符（E.class）
不同于id选择符的唯一性，class选择符可以同时定义多个。
例子源代码：
/* CSS代码 */
.a{
color:gray;
}
.b{
font-weight:bold;
}
<!-- HTML代码 -->
<body>
<p class="a b">正文内容</p>
</body>
效果：
正文内容
6.伪类选择符
伪类选择符种类特别多，这里并未列出所有的伪类选择符，但都支持现代浏览器（除了IE6-8）
这里，我举例几个常用的伪类选择符：
例子1 源代码：
/* CSS代码 */
a{
text-decoration:none; /*改变a链接的样式*/
}
a:link{
color:black; /*设置超链接a在未被访问前的样式*/
}
a:visited{
color:gray; /*设置超链接a在其链接地址已被访问过时的样式*/
}
a:hover{
color:blue; /*设置元素在其鼠标悬停时的样式*/
}
a:active{
color:red; /*设置元素在被用户激活时的样式*/
}
<!-- HTML代码 -->
<body>
<p><a href="###">点击我吧</a></p>
</body>
效果：
例子2 源代码：
/* CSS代码 */
.ul1 li:first-child{color:red;} /*第一个*/
.ul1 li:last-child{color:blue;} /*最后一个*/
.ul1 li:nth-child(2){color:green;} /*第二个*/
.ul1 li:nth-last-child(2){color:yellow;} /*倒数第二个*/
<!-- HTML代码 -->
<body>
<ul class="ul1">
<li>这是列表的第1行</li>
<li>这是列表的第2行</li>
<li>这是列表的第3行</li>
<li>这是列表的第4行</li>
<li>这是列表的第5行</li>
<li>这是列表的第6行</li>
</ul>
</body>
效果：
- 这是列表的第1行
- 这是列表的第2行
- 这是列表的第3行
- 这是列表的第4行
- 这是列表的第5行
- 这是列表的第6行
例子3 （乘法因子n） 源代码：
/* CSS代码 */ /*乘法因子 奇数*/
.ul2 li:nth-child(odd){
color:red;
}
.ul2 li:nth-child(2n+1){
border-left:3px solid red;
} /*乘法因子 偶数*/
.ul2 li:nth-child(even){
color:blue;
}
.ul2 li:nth-child(2n){
border-left:3px solid blue;
} /*乘法因子 3的倍数*/
.ul2 li:nth-child(3n){
font-weight:bold;
}
<!-- HTML代码 -->
<body>
<ul class="ul2">
<li>这是列表的第1行</li>
<li>这是列表的第2行</li>
<li>这是列表的第3行</li>
<li>这是列表的第4行</li>
<li>这是列表的第5行</li>
<li>这是列表的第6行</li>
</ul>
</body>
效果：
- 这是列表的第1行
- 这是列表的第2行
- 这是列表的第3行
- 这是列表的第4行
- 这是列表的第5行
- 这是列表的第6行
7.属性选择符
a. E[att]
选择具有att属性的E元素。
例子源代码：
/* CSS代码 */
p[class] {
color:red;
}
<!-- HTML代码 -->
<body>
<p class="aaa">这是第一个p标签</p>
<p>这是第二个p标签</p>
</body>
效果：
这是第一个p标签
这是第二个p标签
b. E[att="val"]
选择具有att属性且属性值等于val的E元素。
例子源代码：
/* CSS代码 */
p[class="content"] {
color:red;
}
<!-- HTML代码 -->
<body>
<p class="title">这是第一个p标签</p>
<p class="content">这是第二个p标签</p>
</body>
效果：
这是第一个p标签
这是第二个p标签
c. E[att~="val"]
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
例子源代码：
/* CSS代码 */
p[class~="content"] {
color:red;
}
<!-- HTML代码 -->
<body>
<p class="content abc">这是第一个p标签</p>
<p class="cba content">这是第二个p标签</p>
</body>
效果：
这是第一个p标签
这是第二个p标签
d. E[att^="val"]
选择具有att属性且属性值为以val开头的字符串的E元素。
例子源代码：
/* CSS代码 */
p[class^="a"] {
color:red;
}
<!-- HTML代码 -->
<body>
<p class="aaa">这是第一个p标签</p>
<p class="bbb">这是第二个p标签</p>
<p class="abc">这是第三个p标签</p>
</body>
效果：
这是第一个p标签
这是第二个p标签
这是第三个p标签
e. E[att$="val"]
选择具有att属性且属性值为以val结尾的字符串的E元素。
例子源代码：
/* CSS代码 */
p[class$="a"] {
color:red;
}
<!-- HTML代码 -->
<body>
<p class="aaa">这是第一个p标签</p>
<p class="abc">这是第二个p标签</p>
<p class="cba">这是第三个p标签</p>
</body>
效果：
这是第一个p标签
这是第二个p标签
这是第三个p标签
f. E[att*="val"]
选择具有att属性且属性值为包含val的字符串的E元素。
例子源代码：
/* CSS代码 */
p[class*="a"] {
color:red;
}
<!-- HTML代码 -->
<body>
<p class="abc">这是第一个p标签</p>
<p class="a-b-c">这是第二个p标签</p>
<p class="c_b_a">这是第三个p标签</p>
</body>
效果：
这是第一个p标签
这是第二个p标签
这是第三个p标签
g. E[att|="val"]
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
例子源代码：
/* CSS代码 */
p[class|="a"] {
color:red;
}
<!-- HTML代码 -->
<body>
<p class="abc">这是第一个p标签</p>
<p class="a-b-c">这是第二个p标签</p>
<p class="c-b-a">这是第三个p标签</p>
</body>
效果：
这是第一个p标签
这是第二个p标签
这是第三个p标签
8.伪对象选择符
*CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。
*伪对象选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。
a. E:first-letter/E::first-letter
设置对象内的第一个字符的样式。
例子源代码：
/* CSS代码 */
p:first-letter {
font-size:30px;font-weight:bold;
}
p::first-letter {
font-size:30px;font-weight:bold;
}
<!-- HTML代码 -->
<body>
<p>早起的鸟儿有虫吃</p>
</body>
效果：
早起的鸟儿有虫吃
b. E:first-line/E::first-line
设置对象内的第一行的样式。
例子源代码：
/* CSS代码 */
p:first-line {
color:gray;
}
p::first-line {
color:gray;
}
<!-- HTML代码 -->
<body>
<p>早起的鸟儿有虫吃：其它鸟儿还在窝里睡觉，那些勤劳的鸟儿早早勤劳，很快就抓到虫子吃了，就是辛勤劳动的人可以得到好的回报。 早起的虫儿被鸟吃：其它虫儿还在窝里睡觉，而那些不安分的虫儿、因为早早起来活动被鸟发现了，最后成了鸟儿的腹中餐，否定了勤奋，问题不在于早起，而是该谁做什么就做什么，不该谁做什么就不要去做。</p>
</body>
效果：
早起的鸟儿有虫吃：其它鸟儿还在窝里睡觉，那些勤劳的鸟儿早早勤劳，很快就抓到虫子吃了，就是辛勤劳动的人可以得到好的回报。 早起的虫儿被鸟吃：其它虫儿还在窝里睡觉，而那些不安分的虫儿、因为早早起来活动被鸟发现了，最后成了鸟儿的腹中餐，否定了勤奋，问题不在于早起，而是该谁做什么就做什么，不该谁做什么就不要去做。
c. E:before/E::before
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用。
例子源代码：
/* CSS代码 */
p:before {
content:"广州是个好地方，";color:gray;
}
p::before {
content:"广州是个好地方，";color:gray;
}
<!-- HTML代码 -->
<body>
<p>高楼大厦，四通八达。</p>
</body>
效果：
高楼大厦，四通八达。
d. E:after/E::after
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用。
例子源代码：
/* CSS代码 */
p:after {
content:"高楼大厦，四通八达。";color:gray;
}
p::after {
content:"高楼大厦，四通八达。";color:gray;
}
<!-- HTML代码 -->
<body>
<p>广州是个好地方，</p>
</body>
效果：
广州是个好地方，
e. E::placeholder
设置对象文字占位符的样式。
*::placeholder 伪元素用于控制表单输入框占位符的外观。
*需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。
例子源代码：
/* CSS代码 */
input::-webkit-input-placeholder { /*Chrome4.0+*/
color: green;
}
input:-ms-input-placeholder { /*IE10+*/
color: green;
}
input:-moz-placeholder { /*Firefox4-18*/
color: green;
}
input::-moz-placeholder { /*Firefox19+*/
color: green;
}
<!-- HTML代码 -->
<body>
<input type="text" placeholder="请输入..."/>
</body>
效果：
f. E::selection
设置对象被选择时的颜色。
*需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow (IE11尚不支持定义该属性)。
例子源代码：
/* CSS代码 */
p::-moz-selection{
background:#000;color:#f00;
}
p::selection{
background:#000;color:#f00;
}
<!-- HTML代码 -->
<body>
<h3>选中下面的文字，看看它的颜色</h3>
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
</body>
效果：
选中下面的文字，看看它的颜色
你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。
CSS知识总结（二）的更多相关文章
- WEBBASE篇： 第五篇， CSS知识3
CSS知识3 框模型: 一,外边距(上文) 二, 内边距 1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...
- WEBBASE篇： 第四篇， CSS知识2
CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素 (2)% (3) in 英寸 lin = 2.54cm (4)pt 磅 1pt = 1/72in ppi ...
- WEBBASE篇： 第三篇， CSS知识1
第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...
- css进阶之二：flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
- CSS标签选择器(二)
一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...
- 你该学点HTML/CSS知识的9大理由
每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...
- Java JDBC的基础知识（二）
在我的上一篇Java JDBC的基础知识(一)中,最后演示的代码在关闭资源的时候,仅仅用了try/catch语句,这里是有很大的隐患的.在程序创建连接之后,如果不进行关闭,会消耗更多的资源.创建连接之 ...
- 《HTML与CSS知识》系列分享专栏
收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站 ...
- Web前端基础怎么学？ JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
随机推荐
- 采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延伸系列2)
前言 Entity Framework 延伸系列目录 今天我们来讲讲EntityFramework.Extended 首先科普一下这个EntityFramework.Extended是什么,如下: 这 ...
- 基于DDD的现代ASP.NET开发框架--ABP系列文章总目录
ABP相关岗位招聘:给热爱.NET新技术和ABP框架的朋友带来一个高薪的工作机会 ABP交流会录像视频:ABP架构设计交流群-7月18日上海线下交流会的内容分享(有高清录像视频的链接) 代码自动生成: ...
- DynamicObject - 代理对象的种类
开箱即用,DynamicProxy提供了多种代理对象,主要分成两个大类: 基于继承(Inheritance-based) 基于继承的代理是通过继承一个代理类来实现,代理拦截对类的虚(virtual)成 ...
- PHP源码分析-变量
1. 变量的三要素变量名称,变量类型,变量值 那么在PHP用户态下变量类型都有哪些,如下: // Zend/zend.h #define IS_NULL 0 #define IS_LONG 1 #de ...
- Hawk 5. 数据库系统
Hawk在设计之初,就是以弱schema风格定义的.没有严格的列名和列属性.用C#这样的静态强类型语言编写Hawk,其实并不方便.但弱schema让Hawk变得更灵活更强大. 因此,Hawk虽然之前支 ...
- IE8/9 本地预览上传图片
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...
- PHP 获取 特定时间范围 类
目录 前序 用途 功能及事项 使用方法 代码及注释 前序: 总体来说,我更应该是一个 android 移动开发者,而不是一个 phper,如果说只做移动端的 APP ,我也不会学这么多,这 2年来, ...
- 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之集群概念介绍（一）
集群概念介绍(一)) 白宁超 2015年7月16日 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习 ...
- SAP CRM 显示消息/在消息中进行导航
向用户展示消息,在任何软件中都是十分重要的. 在SAP CRM WEB UI中展示消息,不是一项很难的任务,只需要创建消息并在之后调用方法来显示它 消息类和消息号: 我在SE91中创建了如下的消息类和 ...
- 机器学习之sklearn——EM
GMM计算更新∑k时,转置符号T应该放在倒数第二项(这样计算出来结果才是一个协方差矩阵) from sklearn.mixture import GMM GMM中score_samples函数第 ...