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. CentOS命令行向OSS上传文件或文件夹

    下载地址:https://helpcdn.aliyun.com/document_detail/50452.html?spm=a2c4g.11186623.4.2.KyQak3 百度云盘:https: ...

  2. [转]Java Web笔记：搭建环境和项目配置（MyEclipse 2014 + Maven + Tomcat）

    来源:http://www.jianshu.com/p/56caa738506a 0. 绪言 Java Web开发中,除了基础知识外,开发环境搭建,也是一项基本功.开发环境包括了IDE.项目管理.项目 ...

  3. 【Android】Android EditText 去除边框

    [Android]Android EditText 去除边框 将EditText属性设置修改 android:background="@null" //////////////// ...

  4. LNMP分离部署

    环境: Nginx+PHP:192.168.2.144 Mysql:192.168.2.151 [Nginx] yum install -y pcre-devel openssl-deve popt- ...

  5. Codeforces 596D Wilbur and Trees dp (看题解)

    一直在考虑, 每一段的贡献, 没想到这个东西能直接dp..因为所有的h都是一样的. #include<bits/stdc++.h> #define LL long long #define ...

  6. 牛客 Wannafly 挑战赛26D 禁书目录 排列组合 概率期望

    原文链接https://www.cnblogs.com/zhouzhendong/p/9781060.html 题目传送门 - NowCoder Wannafly 26D 题意 放一放这一题原先的题面 ...

  7. Codeforces 264C Choosing Balls 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF264C.html 题目传送门 - CF264C 题意 给定一个有 $n$ 个元素的序列,序列的每一个元素是个 ...

  8. sql 分隔字符串函数

    USE [tms]GO/****** Object: UserDefinedFunction [dbo].[fn_ConvertListToTable_Sort] Script Date: 2017/ ...

  9. sentinel-dashboard安装、运行（ubuntu）

    下载页面https://github.com/alibaba/Sentinel/releases wget -P /opt/downloads https://github.com/alibaba/S ...

  10. 20165235 祁瑛 2018-4 《Java程序设计》第六周学习总结

    20165235 祁瑛 2018-4 <Java程序设计>第六周学习总结 教材学习内容总结 常用实用类 (一)1.String类是final类型的,String类型常量也是对象.2.可以使 ...