Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器优先级和盒模型入门
Blogger Information
Blog 145
fans 7
comment 7
visits 164522
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS选择器优先级和盒模型入门
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
783 people have browsed it

一、CSS选择器

常见选择器类型有：
１、标签选择器
２、属性选择器：（常用的id选择器（#id）和类选择器.class）
３、伪类选择器：

  • 结构伪类选择器
    详情请见：https://www.php.cn/blog/detail/25340.html

  • 状态伪类选择器：
    (1)、a标签状态伪类选择器器

    • :link：a标签初始状态选择器
      a{}定义的样式针对所有的超链接(包括锚点)
      a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)
    • :visited：点击后访问的状态
    • :hover:鼠标悬停时的状态
    • :active:单击时的状态

    (2)、form表单中input状态选择器（常见状态选择伪类等等）

    • :disabled:选择禁用状态的input标签
    • :read-only:选择只读状态的input标签
    • :required:选择必选项的input标签
    • :focus:选择选中的input标签

４、选择器的优先级
（1）!important > 行内样式（内敛样式）> id选择器 > class选择器、属性选择器（含伪类选择器） > 标签选择器 > 通配符选择器
（2）常见的选择器的权重值（id、class、标签）

  • id权重100；class权重10；标签权重1；
  • 一个id就是100，两个就200，以此类推，class（n10）、tag（n1）和id（n*100）一样
  • 可以多id、class、tag混合使用
  • 有id看id,没id看class,没class看标签，谁的权重大，谁优先级高
  • 如果id权重值一样看class,如果id和class权重值都一样就看tag

二、CSS常见的属性

1、字体属性：

属性 属性值 作用
font-size 单位：像素px rem、em 设置字体大小
font-family 与系统字体一致，可以设多值 设置不同字体
font-weight 100-900数值或者normal、bold、light等 设置字体粗度
font-style normal、italic（斜体）、oblique(认为设置的倾斜提） 设置字体样式
line-height 单位px 设置字体高度

三、盒子模型入门

1、盒子一般包含以下部分：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

2、盒子内外边距的使用方式：

  • 每个盒子的外|内边距都有四边：top right bottom left都可以单独设置宽度，值为像素，
  • 简写方式：以padding:top right bottom left；以顺时针单独设置四条边宽度
  • 如果上下一直，左右一直可以用两只法简写；例如 padding：10px 5px; 第一个值表示上下边宽度，第二个值表示左右边宽度
  • 如果上下不一致，左右一直可以用三值法：padding：10px 5px 15px; 第一个值表示上下边宽度，第二个值表示左右边宽度，第三个值为底边
    如果四个边都一致，可以用单值法：padding：10px；
  • 不管三值法还是二值法，第二个值都用来表示左右边的宽度

四、相关知识点练习

1、代码：

  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title>CSS选择器和状态伪类</title>
  7.         <style>
  8.             a:link{
  9.                 text-decoration: none;
  10.                 color:#42B983
  11.             }
  12.             a:visited{
  13.                 color:#8B0000;
  14.             }
  16.             a:active{
  17.                 background-color: #FF0000;
  18.             }
  19.             a:hover{
  20.                 font-size: 40px;
  21.             }
  22.             form{
  23.                 display: flex;
  24.                 flex-direction: column;
  25.                 width: 400px;
  26.                 /* text-align: center; */
  27.             }
  28.             input:disabled{
  29.                 background-color: lightgreen;
  30.             }
  31.             input:read-only{
  32.                 background-color: red;
  33.             }
  35.             input:focus{
  36.                 background-color:#DA70D6;
  37.             }
  38.             input:required{
  39.                 background-color: #000000;
  40.             }
  41.             form{
  43.                 margin:10px 15px;
  44.                 padding: 10px;
  45.             }
  46.             body{
  47.                 background: url(image/bg.jpg);
  48.                 background-size: 600px;
  49.                 background-repeat: no-repeat;
  51.             }
  52.         </style>
  53.     </head>
  54.     <body>
  56.         <a href="https://www.zhongyequan.com">种业圈</a>
  57.         <form action="">
  58.             <div><label for="">用户名：</label><input type="text" disabled value="admin"></div>
  59.             <div><label for="">密码:</label><input type="password" name="" id="" readonly value="123456"></div>
  60.             <input type="text">
  61.             <input type="text" required>
  62.             <button>登陆</button>
  63.         </form>
  65.     </body>
  66. </html>

2、运行结果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post