css学习笔记易漏知识点

在css文件中:

选择器1,选择器2,选择器3,... {
			属性: 属性值;
	}          //有逗号,这几个选择器可以理解成是 或 的关系,也就是选择器1,选择器2,选择器3等任意一个都可以应用这些样式,即选择器1,选择器2,选择器3等是同一组的。
  

 .选择器1.选择器2 {
	   	属性: 属性值;
  }         //无空格隔开,选择器1和选择器2之间没有空格,理解成 与 的关系,即必须**同时满足**选择器1和选择器2才能应用这些样式

 .选择器1  .选择器2 {
	   	属性: 属性值;
 }    //有空格隔开,选择器1和选择器2之间有空格,即在选择器1所在元素下再找子元素(该子元素带有选择器2),**父子关系**

属性选择器是[ ]中括号,*表示包含属性值,^表示以什么属性值开头,$表示以什么属性值结尾。

选择器是 * 号表示所有元素

+ 号是兄弟选择器,但是只选择一个兄弟,例如: .a + div { },则只选择与class=a的元素同级的div但是只选择一个最近的div,往下选

~ 号也是兄弟选择器,但是会选择下面所有的同级兄弟,例如: .a ~ div { },则选择与class=a的元素同级的所有div但是只选择**class=a的元素下面的所有

伪类选择器写法: 选择器:link { }选择器:visited { }选择器:hover { }
选择器:active { }input:focus { } ,因为冒号是2个点,很像类是一个点,所以叫伪类

伪元素选择器写法(: 或者 ::,单或双冒号都行): 选择器:first-letter {}选择器:after { content: " 添加的字符串";}
选择器:before {content: " 添加的字符串";},带冒号的除了伪类以外就是伪元素选择器

选择器同段位的写在后面的会覆盖前面的

块级元素的display默认即 display: block (此时它会占据一整行,比如<div>),当他的样式被改成display: inline 时他就会变成行内元素。(display的取值有: block,inline,inline-block,none(控制元素不显示)

块级元素的padding是上下左右都有间隙,而行内元素的padding是只有左右有间隙上下没间隙。
看 表严肃 的css视频

猜你喜欢

转载自blog.csdn.net/weixin_43226306/article/details/87926062