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. VSCode Vue文件格式化

    参考文档:https://vuejs.github.io/vetur/formatting.html 自从将VSCode更新之后,vue文件的html格式化就失效了,而且vue文件中的js ,css格 ...

  2. JDK 自带压缩解压流

    代码如下 package com.test.java.zip; import java.io.BufferedInputStream; import java.io.BufferedOutputStr ...

  3. C# 会话,进程,线程,线程安全

    会话->进程->线程 b/s网站中,每个用户的访问为一次会话,会话中包含CPU为用户在内存中开辟空间存储的会话信息, 如Session,进程,会话拥有一个进程,同一进程下可以拥有多个线程. ...

  4. net core体系-web应用程序-4net core2.0大白话带你入门-10asp.net core session的使用

    asp.net core session的使用   Session介绍 本文假设读者已经了解Session的概念和作用,并且在传统的.net framework平台上使用过. Asp.net core ...

  5. Ansible 详解

    原文:https://www.cnblogs.com/keerya/p/7987886.html#_label0,有改动 一.Ansible简介 1.ansible是什么 a.ansible是新出现的 ...

  6. python 格式话-占位符

    格式化输出:name = qjage = 30job = itsalary = 6000例1:字符串拼接方法,不建议,因为会在内存中开辟多块内存空间. info = '''---------- inf ...

  7. 移动端1px问题

    .component-confirm__buttons { border-top: 1px solid #eceef0; box-shadow: 0 1px 1px #fff; } 造成边框变粗的原因 ...

  8. Aladdin and the Flying Carpet（唯一分解定理）

    题目大意:给两个数a,b,求满足c*d==a且c>=b且d>=b的c,d二元组对数,(c,d)和(d,c)属于同一种情况: 题目分析:根据唯一分解定理,先将a唯一分解,则a的所有正约数的个 ...

  9. Binder原理

    --摘自<android插件化开发指南> 1.Binder分为Client和Server两个进程: client和server是相对的.谁发消息,谁就是client:谁接收消息,谁就是se ...

  10. 牛客练习赛A 【BFS】

    <题目链接> 题目大意: 给出一张图,问你其中 ' # ' 加上那些不能够到达边界的 ' . ' 的点的个数,' # ' 会起阻挡作用. 解题分析: 本题很好做,无非就是将所有能够由边界上 ...