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. haoi2018

    题解: 题目相对其他省难一点 不过弱省省选知识点都这么集中的么.. 4道数学题... 1.[HAOI2018]奇怪的背包 这题考场做就gg了... 其实我想到了那个性质.. 就是这个一定要是gcd的倍 ...

  2. NEST - Elasticsearch 的高级客户端

    NEST - High level client Version:5.x 英文原文地址:NEST - High level client 个人建议:学习 NEST 的官方文档时,按照顺序进行,不宜跳来 ...

  3. Python_dict部分功能介绍

    字典是无序的 x.clear():清除所有元素 x.fromkeys():返回一个新的字典,使前面的key=value x.get():如果k不存在,默认返回一个值,如果存在,则返回存在的值 x.it ...

  4. Codeforces 989D A Shade of Moonlight

    A Shade of Moonlight 列列式子发现, 对于同一个云来说只有反向的云才能和它相交, 然后我们发现这个东西有单调性,然后二分就好啦. #include<bits/stdc++.h ...

  5. 第四周java学习笔记

    1.封装 封装可以理解为把方法封在类中,用打时候可以直接拿,就好比你要上学,类就是书包而方法就是书,要用方法打时候直接从书包中拿书就行. 2.类语法细节 public权限修饰 public是个公开类, ...

  6. Selenium3详解（基本操作，定位方法）

    如果想使用selenium驱动不同的浏览器,必须单独下载并设置不同的浏览器驱动. 基本操作: 刷新:refresh, 获取浏览器窗口大小:get_window_size 设置浏览器窗口大小:set_w ...

  7. 队列queue的一些操作

    1. q = queue.Queue(5) 实例化,5为队列长度 2. q.put("haha") 将数据加入队列,计数器+1 3. q.get() 取出数据,计数器不变 4. q ...

  8. poj3311

    poj3311我写的第一篇状压dp,调试了好久23333,其实状压就是二进制结合位运算,把整体的状态用二进制来表示,一般是0/1,用没用过或者走没走没走过的问题,其实这种思想在搜索中也有涉及过,与dp ...

  9. 记录一个chrome 65渲染的bug

    前段时间发现一个chrome 65+的BUG(chrome已更新到66,BUG仍然存在),一个元素同时使用了以下样式(失去焦点和css3的Z轴平移0deg),渲染异常 /*bug style*/ fi ...

  10. [译]the cost of javascript in 2018(1)

    前言 为了构建交互性网站,我们需要发送js给我们的用户,但很多情况下,我们使用了太多js. 在移动端,经常看到只加载了个点击链接或者滚动不了的情况. 实话说,js仍然是移动端最昂贵的资源,因为其在很大 ...