010 伪类选择器

时间 2019-11-12

标签选择器繁體版

原文原文链接

一：伪类选择器html

1.描述spa

　　是以：为开头code

2，连接伪类选择器htm

　　:link：未访问的连接blog

　　:visited：已访问的连接input

　　:hover：鼠标移动到连接上it

　　:active：选定的链接io

3.案例class

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         a:link {
 8             color: #3c3c3c;
 9             font-size: 25px;
10             text-decoration: none;
11             font-weight: 700;
12         }
13         a:visited {
14             color: orange;
15         }
16         a:hover {
17             color: #f10215;
18         }
19         a:active {
20             color: green;
21         }
22         
23     </style>
24 </head>
25 <body>
26     <a href="http://www.baidu.com">连接1</a>
27 </body>
28 </html>

二：Subline快捷键meta

1.快捷键

　　tab

　　div*3：显示三个div

　　div>p：则嵌套

　　div+p：div与p并列

　　:属性：展现整个

三：标签的显示模式

1.lock-level

　　ol,li,p,div,h1

2.行内块

　　img，input，tdt

3.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div{
 8             width: 900px;
 9             height: 400px;
10             background-color: red;
11         }
12     </style>
13 </head>
14 <body>
15     <div>222</div>
16     <div>333</div>
17     <div>111</div>
18 </body>
19 </html>

4.转换

　　块转行：display:inline

　　行转块：block

　　行内块：line-block