css样式和选择器的使用方法

一、实例演示样式的来源

1.用户代理样式

当 html 标签没有明确指定样式的时候，浏览器会默认生成样式；即用户代理样式，或着称之为浏览器默认样式。

html 代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="http://php.cn">祝php中文网越办越好</a>
  </body>
</html>

浏览器生成用户代理样式：

body {
    display: block;
    margin: 8px;
}

2.用户自定义样式

用户自定义样式分为：

行内样式
文档样式
外链样式 ####行内样式
<p style="color: red">php中文网</p>

文档样式

<style>
   p {
     color: rgb(111, 0, 255);
   }
 </style>

外部样式

<link rel="stylesheet" href="sytle.css" />

二、实例演示基本选择器、上下文选择器

1.基本选择器

标签选择器

a {
 color: red;
 }

2.属性选择器

h2[title="hello"] {
        color: green;
      }
h2.b {
        color: orange;
      }
h2#a,
      h2.b {
        background-color: yellow;
      }

3.群组选择器

      h2#a,
      h2.b {
        background-color: yellow;
      }

4.通配选择器

html body * {
        background-color: gray !important;
      }
      /* !important: 瞬间提权到100%  */

2.上下文选择器


   <style>
      /* 1. 子元素f > */
      .list > li {
        border: 1px solid #000;
      }
      /* 2. 后代元素: 空格 */
      .list li {
        border: 1px solid #000;
      }
      /* 3. 相邻兄弟: +  */
      .item.second + * {
        background-color: lightcyan;
      }
      /* 4. 所有兄弟: ~  */
      .item.second ~ * {
        background-color: yellow;
      }
    </style>

三、选择器的权重

id 权重>class 权重>标签权重
三个权重的位置, 从右到左 0(id).0(class).0(标签)

  第1位: 标签数量
  第2位: class数量
  第3位: id数量 */

css 将 id, class, tag 看成一个”三位整数”, id -> 百位, class -> 十位, tag -> 个位
id : 为什么不推荐用? 因为权重太高, 为了让你的代码具有弹性,尽可能用 class
为什么不用权重最低的标签呢? 只是标签的数量太少了, 而 class 可以任何命名

一、实例演示样式的来源

1.用户代理样式

2.用户自定义样式

文档样式

外部样式

二、实例演示基本选择器、上下文选择器

1.基本选择器

2.上下文选择器

三、选择器的权重

相关文章