前端高级选择器相关介绍

系列文章目录

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、高级选择器

二、伪类选择器

三、背景、阴影、圆角边框

---

一、高级选择器

1、后代选择器

选择父元素中的子元素
代码示例：

<style>
    ul li{
    	color:pink;
    	font-size:16px;
    }
<style>
<ul>
	<li>好想快点解封</li>
</ul>

注意：元素1属于父类，元素2属于子类；两者之间用空格隔开

2、子类选择器

格式：

元素1（父级）>  元素2（子类） {
							属性1：属性值；
							属性2：属性值；
							}

<style>
 ul > li{
    	color:blue;
    	font-size:16px;
    }
</style>
 <ul>
      <li>好想快点解封</li>
  </ul>
  <ol>
    <li>好想出去</li>
  </ol>

注意：子类选择器只会选择最近一级的子元素

3、并级选择器

选择多组标签，同时为他们定义
格式：

元素1， 元素2 {
				属性1：属性值；
				属性2：属性值；
			}

<style>
 ul,ol{
    	color:blue;
    	font-size:16px;
    }
</style>
 <ul>
      <li>好想快点解封</li>
  </ul>
  <ol>
    <li>好想出去</li>
  </ol>

**注意：

• 元素1与元素2之间用逗号隔开；
• 任何形式的选择器都可以作为并级选择器的一部分**

二、伪类选择器

1、伪类连接选择器

• a🔗选择未被访问的链接；
• a:hover:鼠标指针位于其上的链接；
• a:visited:选择已访问过的链接；
• a:active:鼠标选中但并未按下的链接；

<style>
 a:hover{
   color:rgb(255, 0, 0);
   font-size: 16px;
   text-decoration: none;
 }
</style>
<a href="https://www.baidu.com/?tn=88093251_18_hao_pg">点击此处到百度</a>

注意：

1. 为了确保链接伪类生效，尽量按顺序声明；
2. a链接有默认样式，实际中需单独给其指定样式；

2、focus伪类选择器

用于选取获得焦点的表单元素，把获得光标的input元素选出来
格式：

input:focus{
			属性1：属性值；
			属性2：属性值；
            }

三、背景、阴影、圆角边框

1、背景

• 背景颜色：background-color：transparent 透明（默认）

• 背景图片：background-image：none（无）url（地址）

• 背景平铺：background-repeat：repeat（默认平铺）
  no repeat（不平铺） repeat-x（在x方向平铺） repeat-y

• 背景图片位置：background-position
  length：具体的数值（单位px）（第一个默认x方向）
  position：left，center，right，top，bottom；（没有顺序）
  混合单位：length与position的混合（第一个表示想方向的值）

• 背景图像固定：background-attachment：scroll（滚动）随页面滑动而动
  fixed（固定）不随页面滑动而动
  

<style>
div{
  background: blue url(rcfvh.jpg) repeat scroll center center;
  width:300px;
  height :200px;
  border-color: aqua;
}
</style>
<div> <div>

2、圆角边框

格式:

div{
border-radious:length(10px);
}

<style>
div{
  border-radius: 10px;
  border-color: blue;
  border-style: solid; 
  width:200px;
  height:100px;
}

</style>
<div> <div>

3、阴影

1、 盒子阴影
格式：

div{
box-shadow：10px;
}

属性值：

• h-shadow（水平阴影）必填
• v-shadow (垂直阴影）必填
• blur （模糊距离）可选
• spread （阴影尺寸）可选
• color （阴影颜色） 可选
• inset （内部阴影） outset（外部阴影）默认

2、文字阴影
text-shadow：
属性值：

• h-shadow（水平阴影）必填
• v-shadow (垂直阴影）必填
• blur （模糊距离）可选
• color （阴影颜色） 可选