CSS选择器

css选择器
web前端
发布日期:   2021-07-09
更新日期:   2021-07-20
文章字数:   2.4k
阅读时长:   8 分
阅读次数:  

CSS选择器

CSS注释

  • 语法

    /*   注释内容  */

基本语法

选择器概述

  • 含义：通过选择器可以选中页面中的指定元素

    比如：

    p{
    width:200px;
    height:300px;
}

    它的作用是选中页面中所有的p元素

  • 声明块：通过声明块来指定要为元素设置的样式，由一个个声明组成

  • 声明式：是一个名值对结构，一个样式名对应一个样式值，名和值之间以 ：连接，以 ; 结尾

  • 注：这里的分号: 和 ; 是英文模式下的

常用选择器

元素选择器

  • 作用：根据标签名选中指定的元素

  • 语法：

    标签名 {
    样式名 : 样式值 ;
}
例：
p {
    width : 100px ;
    display : flex ;
}

id选择器

  • 作用：根据元素的id属性值选中一个元素

  • 命名规则：由数字、字母、下划线_ 和 - 构成，不能以数字开头，不能包含特殊字符

  • 语法：

    #id属性值 {
   样式名 : 样式值 ；
}
#box{
    
}
html代码
<div id="box">hello </div>

类选择器

  • 作用：根据元素的class属性值选中一组元素

  • class是一个标签的属性，和id类似，不同的是class可以重复使用

  • 在标签中可以为同一个元素指定多个class属性，class属性之间用空格隔开

  • 语法：

    .class属性值 {
   样式名 : 样式值 ；
}
.box{
    
}
html代码
<div class="box">hello </div>

适配选择器

  • 作用：选中页面中的所有元素

  • 应用：去除页面中所有元素的浏览器默认的样式

  • 语法：

    * {
   样式名 : 样式值 ; 
}

复合选择器

交集选择器

  • 作用：选中同时符合多个条件的元素

  • 注：交集选择器中如果有元素选择器，必须使用元素选择器开头

  • 语法：选择器之间没有任何连接符

    选择器1选择器2选择器3.....n {
    
}

并集选择器（选择器分组）

  • 作用：同时选择多个选择器对应的元素

  • 语法：选择器之间使用逗号连接

    选择器1,选择器2,选择器3,...选择器n {
    
}

关系选择器

相关概念

  • 父元素：直接包含子元素的元素
  • 子元素：直接被父元素包含的元素
  • 祖先元素：直接或间接包含后代元素
    • 一个元素的父元素也是他的祖先元素
  • 后代元素：直接或间接被祖先元素包含的元素
    • 子元素也是后代元素
  • 兄弟元素：拥有相同父元素的元素

子元素选择器

  • 作用：选中指定父元素的指定子元素

  • 语法：

    父元素>子元素 {
    
}

后代选择器

  • 作用：选中指定元素内的指定后代元素

  • 语法：元素之间使用空格连接

    祖先  后代 {
    
}

兄弟选择器

  • 作用：选择下一个兄弟元素

  • 语法： 

    前一个+后一个  {
    
}

  • 作用：选择下边所有的相同标签的兄弟元素

  • 语法：

    兄~弟

属性选择器

  • 根据标签上属性名或属性值找到对应的标签
选择器 描述
[属性名] 用于选取带有指定属性的元素。
[属性名=属性值] 用于选取带有指定属性和值的元素。（精确匹配）
[属性名*=属性值] 匹配属性值中包含指定值的某个元素。（模糊匹配）
[属性名~=属性值] 用于选取属性值中包含指定词汇的元素。
[属性名|=属性值] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[属性名^=属性值] 匹配属性值以指定值开头的每个元素。
[属性名$=属性值] 匹配属性值以指定值结尾的每个元素。

伪类及伪元素

伪类（不存在的类，特殊的类）

一般使用

  • 含义:描述一个元素的特殊状态

  • 用法（语法）

    选择器：first-child {
    
}
    1. :first-child 找到满足条件的标签，并且这个标签是某个标签的第一个子元素
    2. :last-child最后一个元素
    3. :nth-child(n) 选中第n个子元素
    4. :nth-last-child(n)选中倒数的第几个元素
      • 特殊值：
      • n 第n个 n的范围0~正无穷
      • even/2n选中偶数位的元素
      • odd/2n+1 选中奇数位的元素
    5. :first-of-type 同类型元素的第一个子元素
    6. :last-of-type 同类型元素的最后一个子元素
    7. :nth-of-type(n) 同类型元素的第n个子元素
    8. :nth-last-of-type(n)同类型的倒数第n个元素
    9. :not 否定伪类，将符合条件的元素从选择器中去除
    10. :focus向拥有键盘输入焦点的标签添加样式

注 ：上述5，6 、7、8几个伪类的功能与1，2，3、4类似，不同点是5，6、7、8是在同类型元素中进行排序

a标签的伪类

  • :link 用来表示没访问过的链接(正常的链接) a标签独有

  • :visited 表示访问过的链接 （由于隐私原因，visited这个伪类只能修改链接的颜色 a标签独有

  • :hover 表示鼠标移入的状态

  • :active用来表示鼠标点击

    /* 未被访问的超链接的样式 */
a:link {
    color: red;
}
/* 被访问过的超链接的样式 */
a:visited {
    color: green;
}
/* 鼠标移入超链接时，作用的样式 */
/* hover必须当中link和visited之后 */
a:hover {
    color: yellow;
}
/* 超链接被点击时的样式，鼠标按住不放时样式 */
/* active必须放在hover之后 */
a:active {
    color: blue;
}

注意：设置超链接的样式时，注意样式的作用顺序，hover必须放在link和visited之后，active必须放在hover之后（顺序：L-V-H-A）

伪元素选择器

伪元素

  • 定义：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
  • 语法格式：伪元素使用：：开头
常见伪元素
  1. ::first-letter 表示第一个字母
  2. ::first-line 表示第一行
  3. ::selection 表示选中的内容
  4. ::before 元素的开始
  5. ::after 元素的最后

注：4,5必须结合content属性来使用

格式

.box ::before {
    content:"}";
}

选择器的权重及样式继承

样式的继承

  • 概念：我们为一个元素设置样式同时也会应用到它的后代元素上， 发生在祖先元素和后代元素之间。

  • 注：并不是所有的样式都会被继承

  • 继承分为两种：

    • 自动继承：子元素不需要重复这个样式，可以自动从父元素上继承样式

    • 手动继承：子元素通过重复设置这个样式，指定从父元素上继承样式；

      属性值设置为inherit ：继承父元素的该属性的属性值

哪些属性可以自动继承

  • 文本样式可以被自动继承

    • color
    • text-align
    • line-height
    • text-decoration
    • letter-spacing
    • word-spacing
    • text-indent
    • text-transform

  • font系统字体样式可以被自动继承

    • font-family
    • font-size
    • font-weight
    • font-style

  • list-style属性可以让li标签自动从ul标签上自动继承

  • 鼠标样式 cursor 可以被自动继承

    cursor : pointer ;  /*抓手 */

哪些属性不能被自动继承

  • width、height 、margin、 padding、border
  • 背景相关的布局，定位属性，盒子模型属性

选择器的权重

  • 问题来源：样式冲突,通过不同的选择器选中相同的元素，并为相同的样式设置不同的值时

  • 选择器的权重 优先级从上到下逐渐降低

    
内联样式              1，0，0，0
id选择器              0，1，0，0
类和伪类选择器         0，0，1，0
元素选择器            0，0，0，1
通配符选择器          0，0，0，0
继承的样式          没有优先级

  • 优先级计算相同，此时优先使用靠下的样式 (就近原则)

  • 比较优先级时，需将所有的选择器的优先级相加，最后优先级越高，则越优先显示

  • 分组选择器单独计算 按位比较

  • 选择器的累加不会超过其最大的数量级（类选择器再高也不会超过id选择器）

  • 可以在某一个样式后添加( ! important )则此样式会获得最高的优先级，甚至超过内联样式（一般不会使用）不会遵循权重大小的计算，用多了样式没有规律，计算权重比较麻烦，维护性下降。慎用

    p {
  color：blue ! important ;   
}
    选择器的计算方案：
    加法运算

  • 就是将所有的选择器的权重相加，对比大小

    • 内联样式默认值为1000

    • id选择器的权重为100

    • 类（属性）选择器的权重为10

    • 标签选择器的权重为1

    • 继承的属性权重为0

    将所有基础选择器的权重相加，进行大小对比，谁大权重更高，但是不满足满10进1 的规则

    4个0

    （0，0，0，0）

    • 第一个0：代表内联样式，有则为1，无则为0
    • 第二个0：代表id选择器的个数
    • 第三个0：代表类（属性）选择器的个数
    • 第四个0：代表标签选择器的个数

    从第一个0开始进行对比，值大的权重更高，如果相同，对比第二0，依次类推，如果最后一个0也相等，权重大小一样，后面的选择器会盖住前面选择器样式。

文章作者: 时光路人
文章链接: https://codehan045.github.io/posts/b6981f1b.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 时光路人 !
css选择器
赏
评论
  目录