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. python之logging

    1.简单使用 # CRITICAL, ERROR, WARNING, INFO, DEBUG) cewid import logging logging.basicConfig(level=loggi ...

  2. 1.RN环境搭建，创建项目，使用夜神模拟调试

    1.环境搭建(Yarn.React Native 的命令行工具(react-native-cli)) npm install -g yarn react-native-cli 具体参考 参见官方(中文 ...

  3. django 视图函数返回queryset对象或日期对象至浏览器ajax接收的写法

    class MyDateTimeEncode(json.JSONEncoder): def default(self, o): if isinstance(o, datetime): return o ...

  4. Codeforces 746F Music in Car

    Music in Car 用两个Set维护一下尺取的过程. #include<bits/stdc++.h> #define LL long long #define fi first #d ...

  5. git之二: git可视化工具sourcetree

    参考:  https://www.cnblogs.com/tian-xie/p/6264104.html sourcetree安装使用

  6. ansible Invetory(管理主机信息)

    1. 定义组机和组 inventory文件可以是许多格式之一,具体取决于您拥有的inventory插件. 对于这个例子, /etc/ansible/hosts的格式是一个INI(类似于Ansible的 ...

  7. Docker数据卷和Docker系统管理（一）

    一. 创建和挂载数据卷 1. 创建数据卷 (1)执行下列命令,创建一个名为my-data的数据卷 [root@c720120 ~]# docker volume create my-data my-d ...

  8. 存储过程导入excel

    #region 导入订单        protected override string DoExcelData(System.Data.DataTable dt)        {         ...

  9. 014 Security的认证流程源码级详解

    一:任务 1.任务 认证处理流程说明 认证结果如何在多个请求之间共享 获取认证用户信息 二:认证处理流程处理说明 1.流程图 这里只是一个登陆到登陆的认证部分的流程图. 2.流程解释 3.断点跟踪 页 ...

  10. POJ 1979 红与黑

    题目地址: http://poj.org/problem?id=1979  或者  https://vjudge.net/problem/OpenJ_Bailian-2816 Red and Blac ...