2016-10-28

《CSS入门经典》第五章

以下提示注意事项:

1.如何选择使用id选择符还是class选择符:当确信id选择符在页面的唯一性时,就可以使用id选择符。

2.通用选择符在所有元素上设置样式,并不是只设置继承的默认值。

eg:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
*{
color: green;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1>This is <em>very</em> important</h1>
</body>
</html>

注意:使用通用选择符,<em>标签里的内容显示为绿色,而不是<h1>标签的蓝色,它没有继承h1标签的样式。

更改代码:

 <style>
body{
color: green;
}
h1{
color: blue;
}
</style>

此时em继承了h1的样式。

3.注意后代选择器与子选择器的区别。(另总结)

4.简单伪类:

(1):active 被激活的元素(例如激活的链接)。

(2):first-child 元素的第一个子元素。

(3):focus 有焦点的元素(例如接收输入的表单字段)。

(4):hover 指向的元素(例如通过鼠标)。

(5):lang() 特定语言的样式。

(6):link 未跟踪的链接。

(7):visited 以前访问过的链接。

注意:

(1) 将伪类和其他的类和伪类放在一起使用时,中间不要留空格,只有.和:指示符。

eg   a.offsite:link{color:green;}

(2) link伪类和visited伪类经常一起使用,用link伪类设置链接未访问时的样式,用visited设置链接访问后的样式。

(3) :first-child伪类用于选择元素,选择的元素是另一个元素的第一个子代。如果第一个子代匹配选择符的基本类型。(:first-child 伪类前面的部分),那么将规则应用于该元素。

eg:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
body{
color: green;
}
h1{
color: blue;
}
#content p:first-child{
background-color: silver;
font-size: x-large; }
</style>
</head>
<body>
<h1>李白</h1>
<div id="content">
<p>明月出天山,苍茫云海间。
长风几万里,吹度玉门关。
汉下白登道,胡窥青海湾。
由来征战地,不见有人还。
戍客望边邑,思归多苦颜。
高楼当此夜,叹息未应闲。</p>
<p>...</p>
<p>...</p>
</div>
</body>
</html>

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器  chrome  IE  Firefox Safari  Opera
:first-child 4.0 7.0 3.0 3.1 9.6

注意: :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>

ie7.0以前的浏览器是不支持first-child选择器的,所以使用class给特定元素设置样式。

(4):lang()伪类

指示规则应用于匹配某种语言的元素;

eg:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
:lang(en-uk) {
background-color: #ccccff;
};
</style>
</head>
<body>
<p>He cried out in a bad Monty Python imitation,
14 <span lang="en-uk">He's pinin for the fjords!</span>
</p>
</body>
</html>

5.CSS中的伪元素

:before 插入元素前的内容

:after 插入元素后的内容

:first-letter 块元素的第一个字母

:first-line 块元素的第一行

(1):first-line伪元素是虚拟伪元素,它只添加应用于首行的特殊样式指示元素的首行。

eg:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
p:first-line{
background-color: green;
}
</style>
</head>
<body>
<p>《蝴蝶效应》是一部由埃里克·布雷斯、J·麦凯伊·格鲁伯执导,艾什顿·库彻、艾米·斯马特、约翰·帕特里克·阿梅多利、杰斯·詹姆斯等主演的科幻惊悚电影,
于2004年1月23日在美国正式上映。电影讲述伊万(艾什顿·库奇 饰)在小时候经历了一系列糟糕的事情,损坏了他原本完美的人生。
在童年可怕记忆的折磨下,伊万请求心理医生的帮助,医生鼓励他把发生的事情一件件详细记下来,但是事情变得越来越糟糕。
</p>
</body>
</html>

注意:当浏览器窗口,字体的大小改变时,设置的css样式同样能适用。所以<span>标签不能复制first-line。因为当它显示在用户浏览器上时,网页作者不知道首行 在哪里结束。

(2):first-letter伪元素可以为块元素的首个字母添加特定的样式。

eg:

 <style>
p:first-letter{
background-color: green;
}
</style>

CSS_选择符的更多相关文章

  1. CSS_高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  2. CSS基础篇之选择符2

    属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...

  3. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

  4. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  5. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  6. html基本选择符的使用

    一.选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用! 二.研究 普通选择符: 1.类型选择符:它可以选择同一个类型的元素! 例如:h1,h2 {              color: ...

  7. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

  8. css选择符

    E>F:子选择符,选择所有作为E元素的子元素F.<style type="text/css">li>a {color: #ccc;}</style&g ...

  9. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

随机推荐

  1. Docker常见命令

    docker制作Images docker build -t 镜像名 .(“.”最后这一个点不能忽略) docker 运行Images docker run --name=容器名 --net=host ...

  2. Ansible playbook 部署Openresty

    - hosts: all tasks: - name: copy package copy: src=/usr/local/openresty-1.13.6.1.tar.gz dest=/usr/lo ...

  3. 使用 curses 函数库管理基于文本的屏幕

    curses 函数库提供了终端无关的方式来编写全屏幕的基于字符的程序.curses 还可以管理键盘,提供了一种简单易用的非阻塞字符输入模式. curses 函数库能够优化光标的移动并最小化需要对屏幕进 ...

  4. Java基础知识➣Stream整理(二)

    概述 在Java数据流用到的流包括(Stream).文件(File流)和I/O流 ,利用该三个流操作数据的传输. Java控制台输入输出流 读取控制台使用数据流: BufferedReader和Inp ...

  5. (一)cygwin和vim——hello world!

    好吧,我现在初出茅庐,一无所有,只有一台win xp.做什么呢?要不要试试Unix命令行编程的感觉,想到就做.Just try! 1.首先安装cygwin,最好是选择离线安装包. 2.默认选择安装所有 ...

  6. 本地化KendoUI

    <!doctype html> <html>     <head>         <title>Kendo UI Web</title> ...

  7. 数学建模:2.监督学习--分类分析- KNN最邻近分类算法

    1.分类分析 分类(Classification)指的是从数据中选出已经分好类的训练集,在该训练集上运用数据挖掘分类的技术,建立分类模型,对于没有分类的数据进行分类的分析方法. 分类问题的应用场景:分 ...

  8. Java 之 Web前端(五)

    1.过滤器 a.定义:是一个中间组件,用于拦截源数据和目的数据之间的消息,并过滤二者之间传递的数据 b.步骤: ①建class继承Filter实现抽象方法 public class EncodingF ...

  9. Codeforces 920F - SUM and REPLACE 【线段树】

    <题目链接> 题目大意: 给你一个序列,有两个操作,一个是求区间 l - r 的和,另一个是对区间l-r的元素修改值,x=d(x),d(x)为x的因子个数. 解题分析: 因为可能有多次修改 ...

  10. spring boot默认访问静态资源

    演示spring boot默认可以直接访问静态资源的2种方法: 第一种:在src/main/resources资源目录下创建一个名为"static"的文件夹(该文件夹的名称是规定死 ...