02 基本css （复合选择器）

日嗯任
136 阅读5分钟

css 复合选择器

就是 建立在基础选择器之上的 ， 对基本选择器进行组合形成的

2个或多个的基础选择器，通过不同方式进行组合

后代选择器 （重要！！） 空格隔开

又称 包含选择器


元素1 元素2 { 样式}

元素1是 祖先 
元素2是 后代 
祖先在后代前面
  • 中间用 空格 隔开
  • 元素1是 祖先 ；元素2是 后代 ；祖先在后代前面
  • 元素1 和元素2 可以是 任意类型的选择器 image.png

image.png

子选择器 >隔开

选择的是 离某元素最近的一个元素 ， 就是选择亲儿子

元素1 > 元素2 { 样式 }
image.png

image.png

并集选择器 , 隔开

可以选择多组标签，同时为他们定义相同的样式

元素1 , 元素2 { 样式声明 }
image.png

image.png

伪类选择器 :

向某些选择器添加 特殊的效果

链接伪类


a:link ： 选择未被访问的
a:visited ： 已被访问过的
a:hover ： 鼠标放上去
a:active ： 鼠标正在按下，但没有拿起鼠标
  • 按顺序进行 编写 LVHA
  • 因为 a标签 在css中有默认的样式，所以 需要给a标签单独设置样式
1. a:link

image.png

2.a:visited

image.png

image.png

3. a:hover

image.png

image.png

4. a:active

image.png

image.png

:focus 伪类选择器

选取 获得焦点的表单元素 也就是说 谁有光标 就选择谁

image.png

image.png

有三个input框，现在设置的是 谁有焦点，背景颜色改变

image.png

元素有几种显示模式

元素显示模式 ： 元素是以什么方式进行显示的

块元素

常见的块元素有 h1~h6 ul ol li div 等

特点 :

  • 自己独占一行
  • 可以设置 宽高和内外边距
  • 宽度默认是 容器的100%
  • 它是一个盒子 ，里面可以放行内或者块元素

注意

  • 文字类元素里面不能放块级元素
  • p里面不能放div ，因为p主要是用于存放文字的
  • 同理 h1~h6也是这样的

image.png

image.png

行内元素

常见的行内元素有 span a em strong del等 特点

  • 一行可以放多个元素
  • 宽高设置是 无效的 ，默认宽度就是它文本宽度
  • 行内元素里面不能放块级元素

注意

  • 链接里面不能放链接了
  • 特殊情况下 a里面可以放块级元素 ，不过应该给a转换一下块级模式最安全

image.png

image.png

行内块元素

img input td 同时具有块级元素和行内块元素的特点 ， 所以是行内块元素

特点（既有行内元素特点，又有行内元素的特点）

  • 一行可以有多个
  • 可以设置宽高和内外边距

image.png

image.png

元素显示模式的相互转换代码

在 css 中设置

display : block  转换为块级元素
display : inline 转换为行内元素
display : inline-block 转换为行内块元素

已知 span是行内元素，无法设置宽高，所以把它转换为 块级元素 ，此时span的特点就是块级元素的特点了

image.png

image.png

背景

背景颜色 background-color

background-color : transparent(背景色透明) | color （颜色）

transparent 页面上啥也看不见 image.png

设置颜色

image.png

image.png

背景图片 background-image

便于控制位置

image.png

image.png

背景平铺 background-repeat

background-repeat ： repeat 平铺 默认

background-repeat ： no-repeat  不平铺

background-repeat ： repeat-x 沿着x轴进行平铺

background-repeat ： repeat-y 沿着y轴进行平铺

image.png

image.png

注 ： 背景颜色和背景图片可以同时写，但背景图片会压住背景颜色

背景图片位置 background-position

背景图片位置 可以控制 图片在背景中的位置

background-position: x y 
2个位置 x轴和y轴

可以跟方位名称
background-position: center | right | left |top | bottom 


也可以跟 具体数字
background-position: 40px 70px

背景图片位置 方位名词

注

  • 若两个都是 方位名词 ，那么顺序颠倒 无所谓
  • 若第一个是方位名词的话，那么第二个参数默认是居中对齐

image.png

image.png

背景图片位置 精确单位

注

  • 若是 精确单位 则第一个一定是x坐标 第二个一定是y坐标
  • 若 只指定了一个单位，那么该数值一定是 x坐标，第二个默认为垂直居中

image.png

image.png

背景图片位置 混合单位

可以一个是精确 一个是混合 ，则第一个一定是x坐标，第二个一定是y坐标

背景固定 （背景附着） background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment ： scroll（滚动） 默认
background-attachment ： fixed 固定

image.png

背景属性复合写法 background

可以简写 background

不过 顺序不规定，可以混写 

background ： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景颜色半透明 background：rgba（0,0,0,0.x）

只让 盒子背景颜色变透明

background：rgba（0,0,0,0.x） x的取值范围在 0~1之间

image.png

image.png

css三大特性

层叠性 先前的被后来的覆盖了

给相同的选择器 设置相同的样式，但值不同

这样的话，样式冲突的话 后面会覆盖前面的 若样式不冲突，不会覆盖

image.png

image.png

继承性

给父亲样式了 ，但没有给孩子的

image.png

image.png

  • 继承 会继承 text- font- line- 这些开头的 ，和color 属性
  • 别的不会继承

行高的继承

设置为 px image.png

image.png

设置为 几.几

优点 ： 可以让子元素根据自己文字的大小 自动的控制自己的行高 image.png

image.png

优先级

  • 选择器相同，执行层叠性
  • 选择器不同，根据优先级顺序进行
选择器选择器权重
继承/ *0,0,0,0
元素选择器0,0,0,1
类选择器(class)/伪类选择器(:)0,0,1,0
ID选择器0,1,0,0
行内样式 style='' (写在标签里面的)1,0,0,0
!important最高

选择器相同

image.png

image.png

元素选择器 > 继承和*

image.png

image.png

类选择器和伪类选择器 > 元素选择器

image.png

image.png

id选择器 > 类选择器和伪类选择器

image.png

行内样式 > id选择器

image.png

image.png

!important 最高

image.png

image.png

css权重

判断权重

根据权重进行判断 ，从左往右进行判断，若某一位数相同，则判断下一位数值

计算权重

复合选择器 会有 权重叠加问题

注:继承的权重为0 继承权重计算 image.png

image.png

权重普通计算 image.png

image.png

注 权重会叠加 ，而不会进位

avatar
文章
阅读
粉丝