HTML-css-2020/07/12（5）

关系选择器
	子元素选择器      父元素>子元素{}
	后代选择器（范围更大）        祖先 后代{}
	兄弟选择器（只选下边的）   上一个+下一个{}     //必须紧挨着
	                           兄~弟{}            //后面所有的兄弟

属性选择器
		元素[属性]{}
		元素[属性=值]{}
		元素[属性值^=值]{}     //选择指定值开头的元素
		元素[属性值$=值]{}     //选择指定值结尾的元素
		元素[属性值*=值]{}     //属性值中含有指定值

伪类选择器 ul>li:first-child{}
           ul>li :last
           ul>li :nth-child(){}  //选中任意一个（）内填0，1，2，3……
                                 //（）内2n+1或odd选奇数位
                                 //even 偶数
           //以上元素都是按总顺序排列；不单是<ul>中的<li>;还必须是第一个元素（所有子元素排序）
          //而与之相对的是(表示同类型作比较排第几）
                     :first-of-type
                     :nth-of-typy()
                 

无论列表怎么变，只对列表中第一个子元素操作

:not()除了。。。

除了第三个都设置黄绿色

4.超链接伪类（a元素伪类）

a:link{ color:red;}       //没有访问过的链接（正常的链接）
a:visited {color:yellow;}   //访问过的链接（只改颜色）
a:hover{  }					//当鼠标移动到链接位置；链接变换形态
a:active{}                  //点击别松手时变换形态

5.伪元素
首字母下沉

<p>你好</p>
	……
	p::first-letter{}                //选中首字母
	p::first-line {}                  //首行
	p::selection{color:red;}                    //选中变色

<div>中特殊位置
	div::before{}       //字符起始位置
	div::after{
		content:'hello';       //字符结束位置添加hello
	           }
	结合content 使用（通过css添加的东西无法被选中）

6.样式的继承（对一个元素设置样式；也会应用到后代元素中）
并不是所有的都继承；比如背景相关的

<style>
  p{
     background-color:red;     //对p元素设置背景颜色
   }
</style>

这种就不会被继承
7.选择器的优先级（依次递减）
对同一元素改动同一样式
10个类权重相加还是小于id的权重

#d{color:red;}                  //权重 100
div#d{color:blue;}              //权重 100+1

如果权重相同，使用后面的
分组选择器例外(单个计算）

<style>
	*{                 //统配选择器
	  color:red;
	  }
   div{color:blue;}        //元素选择器
</style>


 <div>
 	<p>我是红色</p>       //统配权重0；继承没有权重所以听统配的*{}
 </div>
 

!important获得最高权重

8.长度单位

	a.像素
	b.相对于父元素的百分比(一起变）
	c.em根据字体大小改变
	d.rem 相对于根元素（html)字体大小

颜色单位
RGB值（三原色不同浓度配成的颜色）

rgb(红色，绿色，蓝色）                //每一个值0-255（0-100%）

RGBA (+不透明度；1完全不透明；.5半透明； 0完全透明）
十六进制#001122 (数值00-ff）

本文地址：https://blog.csdn.net/weixin_45907018/article/details/107294579