时间戳

首页 > 技术文章 > 初识 CSS part2

初识 CSS part2

darcrand-blog 2016-08-09 22:59 原文

一、id选择器

　　获取html文档中唯一指定的元素。符号“#”。

1 <style>
2     #element_id{
3         /* element style */
4     }
5 </style>
6  
7 <div id="element_id"></div>

 

二、类选择器

　　获取html文档中，同属一个分类的元素集合。符号“.”。

1 <style>
2     .element_class{
3         /* element style */
4      }
5 </style>
6 
7 <div class="element_class"></div>
8 <div class="element_class"></div>
9 <div class="element_class"></div>

 

三、伪类选择器

　　详细列表：

　　list

 　　

　　常用伪类选择器：

　　1.链接类型伪类选择器

　　2.input类型伪类选择器

　　3.同级伪类选择器

 

　　demo代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>CSS</title>
  6     <style type="text/css">
  7         * {
  8             font-size: 28px;
  9             font-weight: normal;
 10             margin: 10px;
 11         }
 12 
 13         hr {
 14             border: none;
 15             height: 10px;
 16             margin: 30px 0;
 17             background: #eeeeee;
 18         }
 19 
 20         .title {
 21             text-align: center;
 22             font-size: 32px;
 23             padding: 8px 0;
 24             margin: 20px 0;
 25             font-family: "微软雅黑", serif;
 26             background-color: #34ccff;
 27         }
 28 
 29         /* a链接伪类 */
 30         #super-link:link {
 31             color: #000;
 32             text-decoration: none;
 33         }
 34 
 35         #super-link:visited {
 36             color: #ff80ef;
 37             text-decoration: none;
 38         }
 39 
 40         #super-link:hover {
 41             color: #4bbcff;
 42         }
 43 
 44         #super-link:active {
 45             color: #cc2b38;
 46         }
 47 
 48         .target:target {
 49             background-color: #baff2b;
 50         }
 51 
 52         /* a链接伪类 end */
 53         /* input 伪类 */
 54         .focus:focus {
 55             color: #ff6617;
 56         }
 57 
 58         .checked:checked {
 59             width: 30px;
 60             height: 30px;
 61         }
 62 
 63         /* input 伪类 end */
 64         /* 同级伪类 */
 65         .list_1 > h1:first-child {
 66             color: #ff6617;
 67         }
 68 
 69         .list_1 > h2:last-child {
 70             color: #51d02b;
 71         }
 72 
 73         .list_1 > h3:first-of-type {
 74             color: #ff80ef;
 75         }
 76 
 77         .list_1 > h4:last-of-type {
 78             color: #4bbcff;
 79         }
 80 
 81         .list_2 > h1:nth-child(1) {
 82             color: #ff0e16;
 83         }
 84 
 85         .list_2 > h2:nth-child(3) {
 86             color: #02af00;
 87         }
 88 
 89         .list_2 > h3:nth-of-type(1) {
 90             color: #4bbcff;
 91         }
 92 
 93         .list_2 > h4:nth-of-type(3) {
 94             color: #ff80ef;
 95         }
 96 
 97         .mark {
 98             background-color: #87f0ff;
 99             padding: 10px;
100         }
101 
102         /* 同级伪类 end */
103     </style>
104 </head>
105 <body>
106 <p class="title">a 链接伪类</p>
107 <a href="#" id="super-link">
108     <p>:link 未访问的连接</p>
109     <p>:visited 已访问的连接</p>
110     <p>:hover 鼠标移入</p>
111     <p>:active 鼠标按下</p>
112 </a>
113 <p><a href="#target_1" id="target_1" class="target">:target 指向被页内被跳转的目标</a></p>
114 <p><a href="#target_2" id="target_2" class="target">:target 指向被页内被跳转的目标</a></p>
115 <p class="title">input 类型伪类</p>
116 <p><input type="text" class="focus" value=":focus 获得焦点状态" title=""></p>
117 <p><label><input class="checked" type="radio" name="_check">:checked 被选择状态</label></p>
118 <p><label><input class="checked" type="radio" name="_check">:checked 被选择状态</label></p>
119 <p class="title">同级类型伪类</p>
120 <div class="list_1">
121     <h1>这是h1标签；“h1:first-child”变成橙色；（成功获取）</h1>
122     <h1>这是h1标签</h1>
123     <h2>这是h2标签</h2>
124     <h2>这是h2标签；“h2:last-child”变成绿色；（无法获取）</h2>
125     <h3>这是h3标签；“h3:first-of-type”变成粉色；</h3>
126     <h3>这是h3标签</h3>
127     <h4>这是h4标签</h4>
128     <h4>这是h4标签；“h4:last-of-type”变成蓝色；</h4>
129 </div>
130 <hr>
131 <div class="list_2">
132     <h1>这是h1标签；“h1:nth-child(1)”变成红色；（成功获取）</h1>
133     <h1>这是h1标签</h1>
134     <h1>这是h1标签</h1>
135     <h2>这是h2标签</h2>
136     <h2>这是h2标签</h2>
137     <h2>这是h2标签；“h2:nth-child(3)”变成绿色；（无法获取）</h2>
138     <h3>这是h3标签；“h3:nth-of-type(1)”变成蓝色；</h3>
139     <h3>这是h3标签</h3>
140     <h3>这是h3标签</h3>
141     <h4>这是h4标签</h4>
142     <h4>这是h4标签</h4>
143     <h4>这是h4标签；“h4:nth-of-type(3)”变成粉色；</h4>
144     <hr>
145     <p class="mark">/* child 与 type 的区别 */<br>
146         child：同级的元素队列中，同时符合目标元素类型与元素编号的元素；<br>
147         type：先在同级的元素队列中筛选出目标元素类型，再在新的元素队列中匹配与元素编号相等的元素；</p>
148     <p class="mark">first-child,last-child,nth-child(n),nth-last-child(n)；匹配方式：<br><br>
149         group_1 = get elements of E.brothers;<br>
150         element = get element (type==E && nth==n) from group_1;
151     </p>
152     <p class="mark">first-of-type,last-of-type,nth-of-type(n),nth-last-of-type(n)；匹配方式：<br><br>
153         group_1 = get elements of E.brothers;<br>
154         group_2 = get elements (type==E) from group_1;<br>
155         element = get element (nth==n) from group_2;
156     </p>
157 </div>
158 </body>
159 </html>
HTML 文档

　　

　　/* 简单分析一下 同级伪类选择器 */

1.

1 E:first-child,last-child,nth-child(n),nth-last-child(n);
2  匹配过程：
3 group_1 = get elements of E.brothers;
4 element = get element (type==E && nth==n) from group_1;

　　解析：在使用“child”关键字的选择器时，1.先根据目标元素的html结构中，获取到与目标元素拥有同一父级元素的所有元素的集合，该集合是一个数组。2.在该数组中匹配出元素类型与目标元素类型一致，并且数组编号等于匹配方式中的编号的元素。

 

2.

1 E:first-of-type,last-of-type,nth-of-type(n),nth-last-of-type(n);
2  匹配过程：
3 group_1 = get elements of E.brothers;
4 group_2 = get elements (type==E) from group_1;
5 element = get element (nth==n) from group_2;

　　解析：在使用“type”关键字的选择器时，1.和上一个一样，先根据目标元素的html结构中，获取到与目标元素拥有同一父级元素的所有元素的集合，该集合是一个数组。2.在该数组中匹配出元素类型与目标类型一致的所有元素，这些被筛选出的元素会创建一个新的数组。3.在这个新的数组中再匹配出数组编号与匹配方式中的编号一致的元素。

 

/* 这两种匹配方式中，匹配数组编号所参考的数组不是同一个数组。 */

The end.

by Little

推荐阅读