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. move_uploaded_file中文乱码

    move_uploaded_file($_FILES['file']['tmp_name'],iconv("UTF-8","gb2312",$filname)

  2. poj3889

    看题解之前并不知道怎么搞.. 分治是显然的 但是我不知道怎么判断4个块的位置 发现很简单... 注意14是23旋转得到的 而同时也等价于交换了横纵坐标 所以就可以做了

  3. 学号：20165239 预备作业3 Linux安装及学习

    实验三 用户及文件权限管理 之前从未接触过虚拟机,借着老师布置的任务,这次寒假初次接触了虚拟机,既紧张又兴奋,在学习了老师的一部分教程以及查阅网上的资料之后,有了以下的学习笔记和心得. 一.Linux ...

  4. UOJ#191. 【集训队互测2016】Unknown 点分治 分治 整体二分 凸包 计算几何

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ191.html 题目传送门 - UOJ191 题意 自行移步集训队论文2016中罗哲正的论文. 题解 自行 ...

  5. Cforeach的详细用法--【转】

    运行截图: <!-- 多选框-还需要实现true选中和分行 --> <c:forEach items="${users}" var="item" ...

  6. 060 SparkStream 的wordcount示例

    1.SparkStream 入口:StreamingContext 抽象:DStream 2.SparkStreaming内部原理 当一个批次到达的时候,会产生一个rdd,这个rdd的数据就是这个批次 ...

  7. fastadmin系统配置

    常规管理--->系统配置--->字典配置-->配置分组-->追加--填上键值-->回车 然后在点上图的+添加自定义的配置项(如果需要删除配置项,需要删除数据库中fa_co ...

  8. Sleep，Hibernate and Hybrid

    Sleep is a power-saving state that allows a computer to quickly resume full-power operation (typical ...

  9. HDFS分布式文件系统的常用命令行操作

    一.HDFS的客户端种类 1.网页形式  =>用于测试 网址为你的namenode节点的ip+50070的端口号,如: 192.168.50.128:50070 2.命令行形式 =>用于测 ...

  10. win10下正确使用Sublime Text搭建python调试环境

      pycharmt等IDE虽然用着爽,但毕竟在速度.资源上还是比较让人不爽的. 使用IDE无非是图个方便省事,特别是像我这种有些记性差的来说. IDE说起来方便于的几个地方就是: 1.语法颜色高亮 ...