简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 伪类选择器与选择器权重以及盒子模型的实例演示
Blogger Information
Blog 9
fans 0
comment 0
visits 3867
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
伪类选择器与选择器权重以及盒子模型的实例演示
靠近你深拥你
Original
419 people have browsed it

1. 伪类选择器

根据元素的位置或状态来匹配子元素

1.1 结构伪类

与上下文选择器很相似

后文演示所用 HTML 代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>伪类展示</title>
  8.     <link rel="stylesheet" href="rest.css" />
  9.     <style>
  10.       /* 此处填充 演示代码 */
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <ul class="list">
  15.       <li class="item">item1</li>
  16.       <li class="item">item2</li>
  17.       <li class="item">item3</li>
  18.       <li class="item">item4</li>
  19.       <li class="item">item5</li>
  20.       <li class="item">item6</li>
  21.       <li class="item">item7</li>
  22.       <li class="item">item8</li>
  23.       <li class="item">item9</li>
  24.     </ul>
  25.   </body>
  26. </html>
1. :nth-child(an+b):获取任意位置的元素
  • 参数说明
    • a: 系数,[0,1,2,3,…]
    • n: 参数, [0,1,2,3,…]
    • b: 偏移量, 从 0 开始

      规则: 计算出来的索引,必须是有效的(从 1 开始)

例子 1：匹配父元素中的第 n 个子元素，元素类型没有限制。n 可以是一个数字，一个关键字，或者一个公式。
  • 代码如下：
  1. .list > .item:nth-child(5) {
  2.   background-color: red;
  3. }

  • 运行效果

    例子 2：获取前三个元素

  • 代码如下：

  1. .list > .item:nth-child(-n + 3) {
  2.   background-color: red;
  3. }

  • 运行效果

    例子 3：获取最后三个元素

  • 代码如下：

  1. .list > .item:nth-last-child(-n + 3) {
  2.   background-color: red;
  3. }

  • 运行效果

    例子 4：选择列表的奇数项,参数可设为（2n+1）或者（2n-1）

  • 代码如下：

  1. .list > .item:nth-child(2n + 1) {
  2.   background-color: red;
  3. }
  1. .list > .item:nth-child(2n - 1) {
  2.   background-color: red;
  3. }

可使用参数（odd）进行选择，更加方便快捷明了

  1. .list > .item:nth-child(odd) {
  2.   background-color: red;
  3. }
  • 运行效果
例子 5：选择列表的偶数项，可用参数（even）或（2n）
  • 代码如下：
  1. .list > .item:nth-child(even) {
  2.   background-color: red;
  3. }
  1. .list > .item:nth-child(2n) {
  2.   background-color: red;
  3. }

  • 运行效果

    例子 6：选择有固定间隔特征的元素，可用偏侈量进行微调,可正可负

  • 代码如下：

  1. .list > .item:nth-child(3n + 1) {
  2.   background-color: red;
  3. }
  • 运行效果
  1. :first-child:选中父元素下的第一个子元素
  • 代码如下：
  1. .list > .item:first-child {
  2.   background-color: red;
  3. }
  • 运行效果
  1. :last-child:选中父元素下的最后一个子元素
  • 代码如下：
  1. .list > .item:last-child {
  2.   background-color: red;
  3. }

  • 运行效果

    1.2 状态伪类

  • 演示所用 html 代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>状态伪类</title>
  8.     <link rel="stylesheet" href="form.css" />
  9.     <link rel="stylesheet" href="fake-status.css" />
  10.   </head>
  11.   <body>
  12.     <form action="">
  13.       <fieldset class="login">
  14.         <legend class="title">用户登录</legend>
  15.         <label for="uname">呢称:</label>
  16.         <input type="text" name="uname" autofocus required />
  17.         <label for="email">邮箱:</label>
  18.         <input type="email" name="email" required />
  19.         <label for="tel">电话:</label>
  20.         <input type="tel" name="tel" />
  21.         <div class="remember">
  22.           <input type="checkbox" name="remember" id="rem" />
  23.           <label for="rem">记住我</label>
  24.         </div>
  25.         <button class="submit">提交</button>
  26.       </fieldset>
  27.     </form>
  28.   </body>
  29. </html>
  • 代码中form.css为样式代码，fake-status.css为实例操作代码，样式代码如下：
  1. .login {
  2.   display: inline-grid;
  3.   grid: auto-flow / 3em 1fr;
  4.   gap: 10px 0;
  5.   padding: 1em;
  6. }
  7. .login input {
  8.   border: none;
  9.   border-bottom: thin solid #666;
  10. }
  11. .login .title {
  12.   text-align: center;
  13. }
  15. .login .btn,
  16. .login .remember {
  17.   grid-column: 2;
  18.   height: 2.2em;
  19. }
  20. .btn .submit,
  21. .btn .reset {
  22.   width: 40%;
  23.   height: 2.2em;
  24. }

链接,表单

  1. :hover: 鼠标悬停
  • 代码举例，鼠标悬停在提交按钮上，改变按钮颜色，鼠标变为小手型。
  1. .login > .submit:hover {
  2.   cursor: pointer;
  3.   background-color: seagreen;
  4.   color: white;
  5. }
  • 运行效果
  1. :enabled: 有效控件
  • 代码举例，改变.login下所有有效控件的边框
  1. .login :enabled {
  2.   border: solid 5px rebeccapurple;
  3. }
  • 运行效果

    -
  1. :disabled: 禁用控件
  • 代码举例，改变.login下禁用控件的样式。
  1. .login :disabled {
  2.   background-color: aqua;
  3.   color: cadetblue;
  4.   border-color: antiquewhite;
  5. }
  • 运行效果
  1. :checked: 选中控件
  • 代码举例，复选框选中时将标签的文本描红
  1. .login :checked + label {
  2.   color: red;
  3. }
  • 运行效果
  1. :required: 必选控件
  • 代码举例，改变表单中，所有具有必填属性元素的背景颜色。
  1. .login :required {
  2.   background-color: yellow;
  3. }

-运行效果

  1. :focus: 焦点控件
  • 代码举例，输入框获取焦点后，边框变为红色。
  1. .login :focus {
  2.   outline: 1px solid red;
  3.   border-bottom: none;
  4. }
  • 运行效果
  1. :not(): 过滤掉某些元素
  • 代码举例，改变.login下非input元素的背景颜色。
  1. .login :not(input) {
  2.   background-color: red;
  3. }
  • 运行效果
  1. :empty: 选择页面中为空的元素
  • 代码举例，将表单中，没有内容的元素，用红色标出。
  1. .login :empty {
  2.   background-color: red;
  3. }
  • 运行效果

关于更多伪类知识请查询 MDN

2. 选择器优先级权重

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

  1. 原子选择器: tag,class,id
  2. 原子选择器权重: tag(1),class(10),id(100)

可简单理解为: 标签是个位, class 是十位, id 是百位

  • 权重示例：
  1. <div class="demo" id="test">
  2.   <span class="text" id="title">爱你直到永远！</span>
  3. </div>
  1. /* 权重100 */
  2. #title {
  3.   color: green;
  4. }
  6. /* 权重010无法覆盖绿色值 */
  7. .text {
  8.   color: red;
  9. }
  11. /* 权重110，可以覆盖绿色值！ */
  12. #title.text {
  13.   color: yellow;
  14. }
  16. /* 权重020无法覆盖绿色值 */
  17. .demo > .text {
  18.   color: aqua;
  19. }
  21. /* 权重224，为span元素的顶级权重 */
  22. html > body > div#test.demo > span#title.text {
  23.   color: brown;
  24. }

3. 盒模型

3.1 一切皆”盒子”

  1. 盒子是页面中可见的”矩形区域”
  2. 一个网站由多个盒子布局构成。

3.2 五大属性

  1. width: 宽
  2. height: 高
  3. padding: 内边距
  4. border: 边框
  5. margin: 外边距

  • border

  1. 可见属性
  2. 可设置width,style,color
  • 举例代码
  1. <div class="test">
  2.   <span>demo</span>
  3. </div>
  1. .test {
  2.   width: 180px;
  3.   height: 100px;
  4.   /* 为每条边框设置不同的颜色 */
  5.   border-top-width: 2px;
  6.   border-top-style: solid;
  7.   border-top-color: red;
  8.   border-top: 2px solid red;
  9.   border-right: 2px solid blue;
  10.   border-bottom: 2px solid green;
  11.   border-left: 2px solid violet;
  13.   /* 四条边框相同，可简写 */
  14.   /* border: 2px solid red; */
  15. }
  • 运行效果

  • padding,margin

  1. 不可见属性
  2. 仅可设置: width
  3. 大多数内置元素都有默认padding/margin
  4. 建议全部重置为 0,以方便自定义布局
  • 若为元素设置四个值的外边距，应当遵循 上、右、下、左，顺时针顺序原则。例如：
  1. .test {
  2.   width: 180px;
  3.   height: 100px;
  4.   /* 为每条边框设置不同的颜色 */
  5.   border-top-width: 2px;
  6.   border-top-style: solid;
  7.   border-top-color: red;
  8.   border-top: 2px solid red;
  9.   border-right: 2px solid blue;
  10.   border-bottom: 2px solid green;
  11.   border-left: 2px solid violet;
  13.   /* 四条边框相同，可简写 */
  14.   /* border: 2px solid red; */
  15.   margin: 5px 10px 15px 20px;
  16. }
  • 边距查看

  • 两个值的边距设置，第一个为上下，第二个为左右。例如：margin: 5px 10px;

  • 边距查看

  • 三个值，顺序为 第一个值为上，第二个值为左右，第三个值为下。例如：margin: 5px 10px 30px;
  • 边距查看

    内边距设置同样如此，在二值和三值的情况下，左右永远在第二个位置。

  • width,height

  1. 默认不包含 padding,border
  1. .test {
  2.   width: 180px;
  3.   height: 100px;
  4. }
  • 边距查看

  • box-sizing

  1. box-sizing: 设置盒模型计算边界
    • content-box: 默认值,仅包括内容区
    • 测试：
      1. .test {
      2. width: 180px;
      3. height: 100px;
      4. margin: 5px;
      5. padding: 5px;
      6. border: solid 2px red;
      7. }
    • 结论

      此模式下，盒子大小改变，宽高超出范围不利于计算。

    • border-box: 推荐值,宽高扩展到可视边框
    • 测试：
      1. .test {
      2. width: 180px;
      3. height: 100px;
      4. margin: 5px;
      5. padding: 5px;
      6. border: solid 2px red;
      7. box-sizing: border-box;
      8. }
    • 结论

      此模式下，边距往内扩展，盒子大小不变。

  • 通用初始化代码

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！