复合选择器

定义:由两个或多个基础选择器，通过不同的方式组合而成。

作用:更准确、更高效的选择目标元素(标签)

<span>span 标签</span>

<div>
	<span>文字颜色是绿色</span>
</div>

后代选择器

后代选择器: 选中某元素的后代元素。

选择器写法: 父选择器子选择器 {CSS 属性}，父子选择器之间用空格隔开。

<style>
    div span {
   		color:red;
    }
</style>

<span>span 标签</span>

<div>
	<span>这是 div 的儿子 span</span >
</div>

子代选择器

<style>
    div > span {
   		color:red;
    }
</style>

<div>
	<span>这是 div 里面的 span</span>
    <p>
        <span>这是 div 里面的 p 里面的 span</span>
    </p>
</div>

子代选择器: 选中某元素的子代元素(最近的子级)
选择器写法: 父选择器 >子选择器 {CSS 属性)，父子选择器之间用 > 隔开。

并集选择器

并集选择器: 选中多组标签设置相同的样式。

选择器写法: 选择器1,选择器2,…, 选择器N{CSS 属性}，选择器之间用，隔开。

<style>
    div,
    p,
    span {
    	color: red;
    }
</style>

<div>div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

交集选择器

交集选择器: 选中同时满足多个条件的元素。

<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

选择器写法:选择器1选择器2{CSS 属性)，选择器之间连写，没有任何符号

/* 既又的关系:既是p标签，又是有box类 */
p.box {
	color: red;
}

注意:如果交集选择器中有标签选择器,标签选择器必须书写在最前面。

伪类选择器

伪类选择器:伪类表示元素状态,选中元素的某个状态设置样式，

鼠标悬停状态: 选择器:hover{CSS 属性}

<style>
    /* 任何标签都可以设置鼠标悬停的状态 */
	a:hover {
		color: red;
	}
	.box:hover {
		color: green;
	}
</style>

<a href="#">a 标签</a>
<div class="box">div 标签</div>

伪类-超链接
超链接一共有四个状态

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时(激活)

提示:如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。

<style>
 /* a:link {
      color: red;
  }

  a:visited {
      color: green;
  }

  a:hover {
      color: orange;
  }

  a:active {
      color: #00ffee;
  }*/

  /* 工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置 */
  a {
      color: red;
  }

  a:hover {
      color: green;
  }
</style>

<a href="#">a 标签</a>

CSS 特性

CSS特性: 化简代码 / 定位问题，并解决问题

继承性
层叠性
优先级

继承性

继承性: 子级默认继承父级的文字控制属性。

body {
    font:12px/1.5 Microsoft YaHei,Heiti sc,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    color:#666;
}

<style>
    body {
        font-size: 30px;
        color: red;
        font-weight:700;
    }	
</style>

<div>div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

<!--如果标签自己有样式则生效自己的样式，不继承-->
<a href="#">a 标签</a>
<h1>h1 标签</h1>

层叠性

特点:

相同的属性会覆盖: 后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加: 不同的 CSS 属性都生效

<style>
    div {
        color:red;
        font-weight:700;
    }
    div {
   		color:green;
    	font-size:30px;
    }
</style>

<div>div 标签</div>

优先级

优先级: 也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

<style>
	div {
		color:red;
	}
	.box {
		color:green;
	}
</style>

<div class="box">div 标签</div>

规则: 选择器优先级高的样式生效。

公式: 通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
（选中标签的范围越大，优先级越低)

<style>
    /* 技巧:选择器选中标签的范围越大，优先级/权重越低 */
    div {
    	color: green;
    }
    
	/*!important 提权功能，提高权重/优先级到最高，慎用*/
    * {
    	color: red !important;
    }

    .box {
    	color: blue;
    }
    
    #test {
    	color: orange;
    }
</style>

<div class="box" id="test" style="color:purple;">div 标签</div>

优先级-叠加计算规则

div {
	color:red;
}
.box {
	color:green;
}

.box div {
	color: red;
}

. box{
	color:green;
}

叠加计算:如果是复合选择器，则需要权重叠加计算。

公式: (每一级之间不存在进位)
(行内样式，id选择器个数，类选择器个数，标签选择器个数)
规则:

从左向右依次比较选个数,同一级个数多的优先级高，如果个数相同，则向后比较
!important 权重最高
继承权重最低

<style>
/* 行内样式，id选择器个数，类选择器个数，标签选择器个数 */
/*(0，0，2，1)*/
.c1 .c2 div {
	color:blue;
}

/*(0，1，0，1)*/
div #box3{
	color:green;
}

/* 三个颜色比较橙色的权重最高 */    
/*(0，1，1，0)*/   
#box1 .c3{
	color:orange;
}
</style>


<div id="box1" class="c1">
    <div id="box2" class="c2">
        <div id="box3" class="c3">
            这行文本是什么颜色的?
        </div>
    </div>
</div>

<style>
    div p {
        color: red;
    }
    
	/*继承权重最低 */
	.father {
		color:blue;
	}
</style>

<div class="father">
    <p class="son">
    	文字
    </p>
</div>

<style>
    /* 行内样式，id选择器个数，类选择器个数，标签选择器个数 */
    /*(0，2，0，0) */
    #father #son {
    	color: lue;
    }
    
    /*(0，1，1，1)*/
    #father p.c2 {
    	color: lack;
    }
    
    /*(0，0，2，2)*/
    div.c1 p.c2 {
    	color:red;
    }
    
    /* 这里使用的是继承  */
    #father {
    	color: green !important;
    }

    /* 这里使用的是继承  */
    div#father.c1 {
    	color:yellow ;
    }
</style>

<div id="father" class="c1">
    <p id="son" class="c2">
    	这行文本是什么颜色的?
    </p>
</div>

Emmet 写法

Emmet写法:代码的简写方式，输入缩写VS Code 会自动生成对应的代码。

HTML（vs code/webstorm按tab键）

说明	标签结构	Emmet
类选择器		标签名.类名
id 选择器		标签名#id名
同级标签		div+p
父子级标签		div>p
多个相同标签	123	span*3
有内容的标签	内容	div

CSS: 多数简写方式为属性单词的首字母

背景属性

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

背景图平铺方式

属性名:background-repeat(bgr)

属性值

属性值	效果
no-repeat	不平铺
repeat	平铺(默认效果)
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

背景图位置

属性名:background-position(bgp

属性值: 水平方向位置垂直方向位置

关键字

关键字位置

left 左侧

right 右侧

center 居中

top 顶部

bottom 底部
坐标(数字+px，正负都可以)

水平:正数向右;负数向左

垂直:正数向下;负数向上

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

提示:

关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中;数字只写一个值表示水平方向，垂直方向为居中

div {
  width: 400px;
  height: 400px;
  background-color:pink;
  background-image:url(./images/1.png);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-position: 50px -100px;
  background-position: 50px center;
  
  /* 只写一个数字表示水平方向，垂直方向居中 */
  background-position: 50px; 
    
  /* 关键字可以只写一个，另一个方向居中 */
  background-position: bottom;
}

背景图缩放

作用:设置背景图大小

属性名:background-size(bgz)

常用属性值:

关键字

cover: 等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

contain: 等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小
数字+单位(例如:px)

div {
    width: 500px;
    height: 300px;
    background-color:pink;
    
    background-image:url(./images/1.png);
    background-repeat:no-repeat;
    
    /*contain:如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白 */
    /*background-size: contain;*/
    
    /*cover:图片完全覆盖盒子，可能导致图片显示不全*/
    /*background-size: cover;*/
    
    /*100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放*/
    background-size: 100%;
}

背景图固定

作用:背景不会随着元素的内容滚动。
属性名: background-attachment(bga)
属性值:fixed

body {

    background-image:url(./images/bg.jpg);
    background-repeat: no-repeat;
    
    background-attachment:fixed;
}

背景复合属性

属性名:background(bg)

属性值:背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定 (空格隔开各个属性值，不区分顺序)

div {
	width:400px;
	height:400px;
	
	background: pink url(./images/1.png) no-repeat right center/cover;	
}

显示模式

显示模式:标签(元素)的显示方式

作用:布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

块级元素(代表div标签)
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
行内元素
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
行内块元素
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开

<style>
/*块级:独占一行;宽度默认是父级的100%; 加宽高生效*/
    div {
        width: 200px;
        height: 200px;
    }

    .div1 {
        background-color: red;
    }
    .div2 {
        background-color: green;
    }

    /*行内:一行共存多个;尺寸由内容撑开:加宽高不生效*/
    span {
        width: 200px;
        height: 200px;
    }

    .span1 {
        background-color: red;
    }
    .span2 {
        background-color: green;
    }

    /*行内块:一行共存多个;默认尺寸由内容撑开;加宽高生效*/
    img {
        width: 200px;
        height: 200px;
    }
</style>

<!--块级元素-->
<div class="div1">div标签1</div>
<div class="div2">div标签2</div>

<!--行内元素-->
<span class="span1">span1111</span>
<span class="span2">span2</span>

<!--行内块元素-->
<img src="index.png" alt="">
<img src="index.png" alt="">

转换显示模式

属性名:display

属性值:

属性值	效果
block	块级
inline-block	行内块
inline	行内

<style>
/*块级:独占一行;宽度默认是父级的100%; 加宽高生效*/
    div {
        width: 200px;
        height: 200px;
        
        /*转化为行内块元素*/
        display: inline-block;
    }

    .div1 {
        background-color: red;
    }
    .div2 {
        background-color: green;
    }

    /*行内:一行共存多个;尺寸由内容撑开:加宽高不生效*/
    span {
        width: 200px;
        height: 200px;
        
        /*转化为块级元素*/
        display: block;
    }

    .span1 {
        background-color: red;
    }
    .span2 {
        background-color: green;
    }

    /*行内块:一行共存多个;默认尺寸由内容撑开;加宽高生效*/
    img {
        width: 200px;
        height: 200px;
    }
</style>

<!--块级元素-->
<div class="div1">div标签1</div>
<div class="div2">div标签2</div>

<!--行内元素-->
<span class="span1">span1111</span>
<span class="span2">span2</span>

<!--行内块元素-->
<img src="index.png" alt="">
<img src="index.png" alt="">

posted @ 2025-05-05 12:29 snail灬阅读(33) 评论(0) 收藏举报

刷新页面返回顶部

snail

复合选择器