css中的选择器

一、css为层叠样式表,是用来控制网页外观的一门技术。

二css的用法:

    1、内联:在标签中以属性的形式表现,属性名style(不推荐使用,优先级最高)

    2、内嵌:在head标签中以标签的形式表现,标签名style

    3、外部引用:在head标签中以标签形式表现,标签名link用来引入一个css文件,项目中最常用。

三、选择器

      1、标签选择器:通过标签名找标签(把指定的样式应用到某一个、组、类标签上)

      2、id选择器:通过id属性值找标签,关键符号#id值{样式}

      3、复合选择器:1、并列选择器:关键符号,用法:选择器1,选择器2{样式}

               2、后代选择器:符号空格,用法:选择器1空格选择器2

                    3、属性选择器:选择器[属性=属性值]{样式}

      4、筛选:用法:选择器class选择器

       选择器的优先级:1、内联

          2、id选择器

          3、class选择器

          4、标签选择器

          5、通用选择器

例子:

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <link rel="stylesheet" href="作业31.css">
 7 </head>
 8 <body class="body1">
 9     
10         <div><p class="p1">登录博客园-代码改变世界</p></div>
11         <span class="sp1">登陆用户名</span><span class="sp2">(找回)</span>
12         <div class="div5"><input type="text"></div>
13         <span class="sp3">密码</span><span class="sp4">(重置)</span>
14         <div class="div4">
15             <input type="text">
16         </div>
17         <div class="inp1">
18             <input type="checkbox">下次自动登录
19         </div>
20     
21         <table class="div3">
22             <tr>
23                 <td>
24                     <form action="作业4.html" method="post"><input type="submit" value="登录" name="登录" style="color: crimson">
25                     </form>
26                 </td>
27                 <td>
28                     <form action="zuoye5.html" method="post">
29                         <input type="submit" value="注册" name="注册" style="color: crimson">
30                     </form>
31                 </td>
32             </tr>
33         </table>
34     
35     
36     
37         <div class="div1"><a href="#">立即注册</a></div>
38         <div class="div2"><a href="#">反馈问题</a></div>
39     
40     
41 </body>
42 </html>
View Code
1 /* CSS Document */
2 .p1{color: crimson}
3 .sp1{font-size: 13px}
4 .sp4{color: blue;cursor: pointer;font-size: 13px}
5 .sp2{color: blue;cursor: pointer;font-size: 13px}
6 .sp3{font-size: 13px}
7 .inp1{font-size: 13px}
8 .div1 a{text-decoration: none;font-size: 13px;}
9 .div2 a{text-decoration: none;font-size: 13px;}
View Code
原文地址:https://www.cnblogs.com/chenyang-1/p/8110925.html