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 技术的来临, ...
随机推荐
- 移动先行之谁主沉浮？ 带着你的Net飞奔吧！
移动系源码:https://github.com/dunitian/Windows10 移动系文档:https://github.com/dunitian/LoTDotNet/tree/master/ ...
- Win10 IIS本地部署MVC网站时不能运行？
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 部署后出现这个错误: 打开文件目录后发现是可以看见目录的,静态页面也是可以打开的 ...
- C++中的const
一,C++中const的基本知识 1.C++中const的基本概念 1.const是定义常量的关键字,表示只读,不可以修改. 2.const在定义常量的时候必须要初始化,否则报错,因为常量无法修改,只 ...
- 算法与数据结构(十三) 冒泡排序、插入排序、希尔排序、选择排序（Swift3.0版）
本篇博客中的代码实现依然采用Swift3.0来实现.在前几篇博客连续的介绍了关于查找的相关内容, 大约包括线性数据结构的顺序查找.折半查找.插值查找.Fibonacci查找,还包括数结构的二叉排序树以 ...
- FFmpeg + SoundTouch实现音频的变调变速
本文使用FFmpeg + SoundTouch实现将音频解码后,进行变调变速处理,并将处理后的结果保存为WAV文件. 主要有以下内容: 实现一个FFmpeg的工具类,保存多媒体文件所需的解码信息 将解 ...
- 【云知道】究极秒杀Loadrunner乱码
Loadrunner乱码一击必杀 之前有介绍一些简单的针对Loadrunner脚本或者调试输出内容中乱码的一些设置,但是并没能完全解决一些小伙伴的问题,因为那些设置实在能力有限,还是有很多做不到的事情 ...
- 从阿里巴巴笔试题看Java加载顺序
一.阿里巴巴笔试题: public class T implements Cloneable { public static int k = 0; public static T t1 = new T ...
- 关键帧动画：@keyframes
关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- Android 在Android代码中执行命令行
1.路径最好不要是自己拼写的路径/mnt/shell/emulated/0/wifidog.conf 最好是通过方法获取的路径,不然可能导致命令无效 (挂载点的原因) public static f ...
- 当 IDENTITY_INSERT 设置为 OFF 时，不能为表 'T_Shell' 中的标识列插入显式值。
--允许将显示值插入表的标识列中-ON:允许 OFF:不允许set identity_insert T_shell ONset identity_insert T_Shell OFF