css选择器第三章(伪元素/选择器优先级/三大特性)_css伪类选择器和类选择器优先级-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36260963/article/details/145927528

css伪元素/选择器优先级/三大特性

一、css 伪元素选择器

该选择器跟之前的不同，元素选择器操作的是元素里面的内容，伪类操作的是元素本身（只能操作类似于div，p标签等等这些标签元素）。

1.1 概览

::first-letter 选中元素中的第一个文字。 ::first-line 选中元素中的第一行文字。 ::selection 选中被鼠标选中的内容。 ::placeholder 选中输入框的提示文字。 ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。 ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）

1.1 .1 ::first-letter

需求背景：从下面随机生成的60个单词中，将第一个单词首字母变换颜色

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, delectus? Quis dolores corporis qui nemo, corrupti repellendus distinctio omnis, dignissimos repellat, eveniet deserunt! Cupiditate a exercitationem mollitia harum temporibus doloribus debitis, minima vero. Illo cupiditate nemo quos officia fugiat asperiores! Perferendis assumenda dolor nobis facilis eum animi nam ullam laborum velit voluptatibus ea odio quo consectetur, similique quaerat quae dicta.

示列

  <style>
    /* 将div 里面的 */
      div::first-letter {
         color: red;
         font-size: 30px;
      }
  </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, delectus? Quis dolores corporis qui nemo, corrupti repellendus distinctio omnis, dignissimos repellat, eveniet deserunt! Cupiditate a exercitationem mollitia harum temporibus doloribus debitis, minima vero. Illo cupiditate nemo quos officia fugiat asperiores! Perferendis assumenda dolor nobis facilis eum animi nam ullam laborum velit voluptatibus ea odio quo consectetur, similique quaerat quae dicta.</div>
</body>

1.1.2 ::first-line

需求背景：需要将第一行的文字变色，且需要根据视口大小变化而发生选中的范围

示列

  <style>
    /* 选中的是div 里面的第一个单词 */
      div::first-letter {
         color: red;
         font-size: 30px;
      }

      /* 将div里面第一行的内容  */
      div::first-line {
        color: green;
      }

  </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, delectus? Quis dolores corporis qui nemo, corrupti repellendus distinctio omnis, dignissimos repellat, eveniet deserunt! Cupiditate a exercitationem mollitia harum temporibus doloribus debitis, minima vero. Illo cupiditate nemo quos officia fugiat asperiores! Perferendis assumenda dolor nobis facilis eum animi nam ullam laborum velit voluptatibus ea odio quo consectetur, similique quaerat quae dicta.</div>
</body>

1.1.3 ::selection

需求背景，鼠标选中的文字颜色变为粉色

示列

  <style>
    /* 选中的是div 里面的第一个单词 */
      div::first-letter {
         color: red;
         font-size: 30px;
      }

      /* 将div里面第一行的内容  */
      div::first-line {
        color: green;
      }


      /* 将 div中的内容 鼠标选中的文字颜色变为紫色   */
      div::selection {
         color: purple;
         background-color: yellow;
      }

  </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, delectus? Quis dolores corporis qui nemo, corrupti repellendus distinctio omnis, dignissimos repellat, eveniet deserunt! Cupiditate a exercitationem mollitia harum temporibus doloribus debitis, minima vero. Illo cupiditate nemo quos officia fugiat asperiores! Perferendis assumenda dolor nobis facilis eum animi nam ullam laborum velit voluptatibus ea odio quo consectetur, similique quaerat quae dicta.</div>
</body>

1.1.4 ::placeholder

该元素是应用在 input框上的，有一个属性叫 placeholder

示列

  
  /* 给placeholder 添加金色 */
      input::placeholder {
         color: gold;
      }
  <br>
    <input type="text" placeholder="请输入文字">

注意点：

该属性在谷歌浏览器上尝试，搜狗浏览器不好使

1.1.4 ::before

需求背景：在所有的金额前面加上人民币符号，且不让鼠标选中

示列

/* 给p元素内容的第一个位置填充需要的值  */
      p::before {
         content: '￥'
      }
  <h2>价格排序正序排列</h2>
    <p>100</p>
    <p>200</p>
    <p>300</p>
    <p>400</p>
    <p>500</p>

1.1.5 ::after

给所有的金额后面加上元

示列

 /* 给内容的最后加上元 */
      p::after {
         content: '元';
      }
  <h2>价格排序正序排列</h2>
    <p>100</p>
    <p>200</p>
    <p>300</p>
    <p>400</p>
    <p>500</p>

演示效果

二、选择器的优先级(权重)

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。同等级下，后面的覆盖前面的。

概览

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

详情描述

计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

a : ID 选择器的个数。 b : 类、伪类、属性选择器的个数。 c : 元素、伪元素选择器的个数。

选择器权重
ul>li (0,0,2)
div ul>li p a span (0,0,6)
#atguigu .slogan (1,1,0)
#atguigu .slogan a (1,1,1)
#atguigu .slogan a:hover (1,2,1)

选择器	权重
ul>li	(0,0,2)
div ul>li p a span	(0,0,6)
#atguigu .slogan	(1,1,0)
#atguigu .slogan a	(1,1,1)
#atguigu .slogan a:hover	(1,2,1)

比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如

(1,0,0) > (0,2,2) (1,1,0) > (1,0,3) (1,1,3) > (1,1,2)

特殊规则
1. 行内样式权重大于所有选择器。
2. !important 的权重，大于行内样式，大于所有选择器，权重最高！

对比

外部引入对比内部样式
新建一个 index.css 文件，然后引入，我们看到最终的颜色是绿色，那么你是不是判断外部引入的小于内部的呢？其实不是这样的，你把link标签换一个位置，放到 style下边，那么就是红色了。所以说这两个等级是一样的
```
 <link rel="stylesheet" href="./index.css">
  h2 {
       color: red;
     }
  <style>
     h2 {
       color: green;
     }
  </style>
</head>
<body>
     <h2>学习前端</h2>
</body>
```

id选择器对比/类/元素选择器

  <style>
     #title {
       color: yellow;
     }
    .tilte {
       color: palevioletred;
    }

     h2 {
       color: green;
     }
     
  </style>
</head>
<body>
     <h2 id="title" class="title">学习前端</h2>
</body>

得出结论 id选择器 > 类选择器/元素选择器
演示效果

类选择器对比元素选择器

.tilte {
       color: palevioletred;
    }

     h2 {
       color: green;
     }
     <h2 class="title">学习前端</h2>

结论类选择器 > 元素选择器

加入了 !import

  
     h2 {
       color: palevioletred !important;
     }
     
  </style>
</head>
<body>
     <h2 id="title" class="title">学习前端</h2>
</body>

现在所有的优先级都不起作用了，只有color: palevioletred !important; 起作用了，慎用；

三、css 三大特性

3.1 层叠性

如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

3.2 继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性

text-?? ， font-?? ， line-?? 、 color ......

3.3 优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。

权重计算

计算权重时需要注意：并集选择器的每一个部分是分开算的！

/* 三个的权重是一样的，并集选择器，是每一个权重都是单独计算   分别为 三个(0,0,1) 二不是(0,0,3) */
     div,p,span {
        color: blue;
     }
 
 <div>我是1</div>
 <p>我是1</p>
 <span>我是1</span>