CSS选择符

2018-06-24 00:37:05来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

2016-10-28

《CSS入门经典》第五章

以下提示注意事项:

1.如何选择使用id选择符还是class选择符:当确信id选择符在页面的唯一性时,就可以使用id选择符。

2.通用选择符在所有元素上设置样式,并不是只设置继承的默认值。

eg:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>笔记</title>
 6     <style>
 7         *{
 8             color: green;
 9         }
10         h1{
11             color: blue;
12         }
13     </style>
14 </head>
15 <body>
16     <h1>This is <em>very</em> important</h1>
17 </body>
18 </html>

 

注意:使用通用选择符,<em>标签里的内容显示为绿色,而不是<h1>标签的蓝色,它没有继承h1标签的样式。

更改代码:

1 <style>
2         body{
3             color: green;
4         }
5         h1{
6             color: blue;
7         }
8     </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:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>笔记</title>
 6     <style>
 7         body{
 8             color: green;
 9         }
10         h1{
11             color: blue;
12         }
13         #content p:first-child{
14             background-color: silver;
15             font-size: x-large;
16 
17         }
18     </style>
19 </head>
20 <body>
21     <h1>李白</h1>
22     <div id="content">
23         <p>明月出天山,苍茫云海间。
24            长风几万里,吹度玉门关。
25            汉下白登道,胡窥青海湾。
26            由来征战地,不见有人还。
27            戍客望边邑,思归多苦颜。
28            高楼当此夜,叹息未应闲。</p>
29 <p>...</p>
30 <p>...</p>
31     </div>
32 </body>
33 </html>

 

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器 chrome IE FirefoxSafari 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:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>笔记</title>
 6     <style>
 7        :lang(en-uk) {
 8            background-color: #ccccff;
 9        };
10     </style>
11 </head>
12 <body>
13     <p>He cried out in a bad Monty Python imitation,
14         <span lang="en-uk">He's pinin for the fjords!</span>
15     </p>
16 </body>
17 </html>

5.CSS中的伪元素

:before 插入元素前的内容

:after 插入元素后的内容

:first-letter 块元素的第一个字母

:first-line 块元素的第一行

(1):first-line伪元素是虚拟伪元素,它只添加应用于首行的特殊样式指示元素的首行。

eg:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>笔记</title>
 6     <style>
 7        p:first-line{
 8            background-color: green;
 9        }
10     </style>
11 </head>
12 <body>
13     <p>《蝴蝶效应》是一部由埃里克·布雷斯、J·麦凯伊·格鲁伯执导,艾什顿·库彻、艾米·斯马特、约翰·帕特里克·阿梅多利、杰斯·詹姆斯等主演的科幻惊悚电影,
于2004年1月23日在美国正式上映。电影讲述伊万(艾什顿·库奇 饰)在小时候经历了一系列糟糕的事情,损坏了他原本完美的人生。
在童年可怕记忆的折磨下,伊万请求心理医生的帮助,医生鼓励他把发生的事情一件件详细记下来,但是事情变得越来越糟糕。
14 </p> 15 </body> 16 </html>

注意:当浏览器窗口,字体的大小改变时,设置的css样式同样能适用。所以<span>标签不能复制first-line。因为当它显示在用户浏览器上时,网页作者不知道首行 在哪里结束。

(2):first-letter伪元素可以为块元素的首个字母添加特定的样式。

eg:

1 <style>
2        p:first-letter{
3            background-color: green;
4        }
5     </style>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:第二章 Background &amp; Borders 之 Transparent Border

下一篇:CSS HTML 常用属性备忘录