css知识点回顾 | 易学教程

块元素：div ，p ，ul , li ,pl,h1-h6…
行元素：span ,a ,strong ,em ,b ,s ,i ,font…
–>行内块元素：<img/>,<input/>,<td/>
显示模式的转换
–>块转行内：display-inline；
–>行内转块：display：block；
–>块，行内元素转换为行内块：display：inline-block
a元素可以包含任何元素，除了它本身。
p元素不可以包含任何其他的块元素。
css选择器

① id选择器： #id属性值{}
② 类选择器：.calss属性值{} 可以同时为一个元素设置多个calss属性值，多个值之间用空格隔开。
–> 选择器分组: 语法 选择器1，选择器2，选择器N{}

//为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色
 #p1 , .p2 , h1 {
   background-color: yellow
 }

---->可以同时选中多个选择器对应的元素。
③ 通配选择器： *{} 用来选中页面中所有的元素。
④ 复合选择器(交集选择器)：可以选中同时满足多个选择器的元素。选择器1选择器2选择器N{}

//为拥有class为p3的span元素设置一个背景颜色为黄色
 span.p3 {
   background-color: yellow
}

⑤后代元素选择器：选中指定元素的指定后代元素 祖先元素后代元素{}

//选中id为d1的div中的p元素中的span元素
 #d1 p span { 
}

⑥ 子元素选择器：选中指定父元素的指定子元素 父元素 > 子元素{}（IE6及以下的浏览器不支持此选择器）

//为div的子元素span 设置一个背景颜色为黄色
 div > span {
   background-color: yellow 
}

⑦ 伪类选择器
–>给链接定义样式：顺序 lvha（从上到下）

//正常链接（没访问过的链接）
a:link
//访问过的链接
a:visited(只能定义字体颜色)
//鼠标滑过的链接
a:hover
//正在点击的链接
a:active

–>其他

//获取焦点
:focus
//指定元素前
:before
//指定元素后
:after
//选中的元素
::selection
//在火狐中需要这么写
 ::-moz-selection

⑧ 伪元素选择器：使用伪元素来标识元素中一些特殊的位置(在dom里面看不见的元素)

//首字母
::first-letter
//首行
::first-line

//在元素内部的前面插入指定内容
::before
//在元素内部的后面插入指定内容
::after

–> ::before / ::after使用的时候必须有一个content属性才能起效,使用before和after双伪元素可以清除浮动。

⑨ 属性选择器：可以根据元素中的属性或属性值来选取指定元素。

E [att] -->选择属性为att的E元素
E [att="val"] --> 匹配属性为att，且属性值为val的E元素
E [att^="val"] --> 匹配属性为att，且以val开头的E元素
E [att$="val"] --> 匹配属性为att，且以val结尾的E元素
E [att*="val"] --> 匹配属性为att，且属性值中含有val的E元素

⑩ 子元素选择器(结构伪类选择器)

E:first-child //匹配父元素中第一个子元素E
F > E:first-child  //匹配父元素F中的第一个子元素E	
E:last-child  //匹配父元素中最后一个子元素E
E:nth-child(n)  //匹配父元素中第n个子元素E

E:first-of-type  //指定类型的第一个子元素E
E:nth-of-type(n)  //指定类型的第n个子元素E

⑩ 否定伪类：可以从已选中的元素中剔除某些元素
语法： :not(选择器)

//为所有的p元素设置背景颜色为红色，除了class值为hello的
p:not(.hello) {
  background-color: red
}

选择器的优先级
–> 内联样式：权重 1000
–>id选择器：权重100
–>类选择器，伪类选择器，属性选择器：权重10
–>伪元素，标签选择器：权重1
–>通配*：权重0,它的优先级>继承样式的优先级。
–>继承的样式，没有优先级
–>!important: 可以在样式最后添加!important，此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式。

来源：CSDN

作者：RRRRRDong

链接：https://blog.csdn.net/RRRRRDong/article/details/104033440

标签

att

css选择器

css第一个元素

css

css样式