欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML-css-2020/07/12(5)

程序员文章站 2022-07-07 20:10:52
关系选择器子元素选择器 父元素>子元素{}后代选择器(范围更大) 祖先 后代{}兄弟选择器(只选下边的) 上一个+下一个{} //必须紧挨着 兄~弟{} //后面所有的兄弟属性选择器元素[属性]{}元素[属性=值]{}元素[属性值^=值]{} //选择指定值开头的元素元素[属性值$=值]{} //选择指定值结尾的元素......
关系选择器
	子元素选择器      父元素>子元素{}
	后代选择器(范围更大)        祖先 后代{}
	兄弟选择器(只选下边的)   上一个+下一个{}     //必须紧挨着
	                           兄~弟{}            //后面所有的兄弟
属性选择器
		元素[属性]{}
		元素[属性=]{}
		元素[属性值^=]{}     //选择指定值开头的元素
		元素[属性值$=]{}     //选择指定值结尾的元素
		元素[属性值*=]{}     //属性值中含有指定值
伪类选择器 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()
                 

无论列表怎么变,只对列表中第一个子元素操作
HTML-css-2020/07/12(5)

:not()除了。。。

除了第三个都设置黄绿色
HTML-css-2020/07/12(5)
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的权重
HTML-css-2020/07/12(5)

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

如果权重相同,使用后面的
分组选择器例外(单个计算)
HTML-css-2020/07/12(5)

<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