CSS总结梳理_01选择器

------------恢复内容开始------------

一、CSS基础介绍

作用

css是来修改元素的样式的，对网页进行美化布局，类似PS的层叠结构

用法

  <style>
        被选择的元素{
             color: green;
             font-size: 50px;
           }
  </style>             
/*
 CSS的基本语法:
    选择器 声明块
    选择器，通过选择器可以选中页面中的指定元素
    声明块，通过声明块来指定要为元素设置的样式
         声明块由一个一个的声明组成
         声明是一个键值对结构
　　　　　　　一个样式名对应一个样式值，键和值之间以:连接，以;结尾   
*/

 

 

 

 

通过CSS的选择器来选中元素并以键值对的形式来设置各种样式。

 

我们将css的语句放入在style标签中，放在文件的头部<head>中，一般我们使用link将外部的样式表进行引入到文件中。

二、选择器

1.基础选择器

  • 元素选择器
    • 根据标签名来选中指定的元素

 

标签名{声明块}

 

  • 通配选择器
    • 选中页面中所有的元素
*{声明块}
  • id 选择器
    • id 属性只能在每个 HTML 文档中出现一次。
    • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
    • id 选择器以 "#" 来定义。
#id名{声明块}

 

  • 类选择器
    • 类选择器可以为标有特定类的HTML元素指定特定的样式。
    • 类选择器以点号 "." 来定义

 

.类名{声明块}

 

2.关系选择器

关系的种类

父元素
　　- 直接包含子元素的元素叫做父元素
子元素
　　- 直接被父元素包含的元素是子元素
祖先元素
　　- 直接或间接包含后代元素的元素叫做祖先元素
　　- 一个元素的父元素也是它的祖先元素
后代元素
　　- 直接或间接被祖先元素包含的元素叫做后代元素
　　- 子元素也是后代元素
兄弟元素
　　- 拥有相同父元素的元素是兄弟元素
  • 子元素选择器
    • 选中指定父元素的指定子元素
    • 子元素选择器用 ">"来定义
父元素>子元素{声明块}
  • 兄弟选择器
    • 相邻兄弟
      • 选择紧接在另一元素后的第一个元素，且二者有相同父元素。
      • 相邻兄弟选择器用 "+"来定义
兄弟元素 + 元素 {声明块}
/*其中兄弟元素与元素拥有共同的父元素，且兄弟元素紧挨着该元素*/
    • 全部兄弟
      • 选择在另一个兄弟元素下的所有相同便签的元素，且所有元素元素有相同的父元素
      • 全部兄弟选择器用 "~"来定义
兄弟元素 ~ 元素 {声明块}
  • 后代选择器
    • 选择父元素下的所有元素(包括子孙)
    • 后代选择器用 空格 将祖先元素和后代元素隔开
祖先元素 后代元素 {声明块}

3.属性选择器

  • 按一定规则对属性进行选择
  • 属性选择器用 “[ ]”来定义 
元素[条件]{声明块}
/*
选择含有指定条件的元素
*/
  • [属性名] 选择含有指定属性的元素
  • [属性名=属性值] 选择含有指定属性和属性值的元素
  • [属性名^=属性值] 选择属性值以指定值开头的元素
  • [属性名$=属性值] 选择属性值以指定值结尾的元素
  • [属性名*=属性值] 选择属性值中含有某值的元素的元素

4.伪选择器

  • 伪类选择器
    • 用来描述一个元素的特殊状态
    • 伪类选择器一般情况下都使用 " : " 开头
元素:功能名{声明块}
  • 常用的伪类选择器
    • :first-child 第一个子元素
    • :last-child 最后一个子元素
    • :nth-child(n) 选中第n个子元素
      • n 第n个 n的范围0到正无穷
      • 2n 或 even 表示选中偶数位的元素
      • 2n+1 或 odd 表示选中奇数位的元素
    • :first-of-type 第一个类
    • :last-of-type 最后一个类
    • :nth-of-type(n) 选中第n个子元素
    • :not() 否定伪类，将符合条件的元素从选择器中去除
    • :hover 表示鼠标移入的状态
    • :active 表示鼠标点击

 

  • 伪元素选择器
    • 表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
    • 伪元素使用 “ :: ” 开头
元素::功能名{声明块}
  • 常用的伪元素选择器
    • ::first-letter 表示第一个字母
    • ::first-line 表示第一行
    • ::selection 表示选中的内容
    • ::before 元素的开始
    • ::after 元素的最后

5.其它

选择器的复合

　　类似于数学的集合

  • 交集选择器
    • 作用：选中同时复合多个条件的元素
    • 语法：选择器1选择器2选择器3选择器n{}
    • 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
  • 并集选择器
    • 作用：同时选择多个选择器对应的元素
    • 语法：选择器1,选择器2,选择器3,选择器n{}

选择器的权重

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

选择器的权重如下

  • 内联样式        
  • id选择器      
  • 类和伪类选择器  
  • 元素选择器     
  • 通配选择器       
  • 继承的样式       
posted @ 2020-09-11 17:44  耳东大栗  阅读(120)  评论(0)    收藏  举报