css与它的优先级、继承
CSS选择器:
1. 标签选择器
2. 类选择器 class
可以给多个标签指定相同的class名,也可以给一个标签添加多个class名。
目的是:可以把一些标签的相同样式放在同一个 类 中,这些标签都可以调用这个公共的类,然后再调用自己独有的类。从而节省css代码,也方便统一修改样式。
3. id选择器 唯一性
4. 伪类选择
nth-child(n):先匹配序号,再匹配元素 first-child() last-child
nth-of-type(n):先匹配元素,再匹配序号 first-of-type last-of-type
:link :visited :hover :active 'love hate'
如果上面四个选择器出现两个或者两个以上时,要按照规定的顺序写代码
:link 表示选择出未访问的链接
:visited 表示选择出已经访问过的链接
:hover 鼠标经过的链接
:active 鼠标按下时候的链接
:focus 表单元素获取焦点的时候
5.复合选择器 :
后代选择器: 选择器 选择器
父子选择器: 选择器>选择器
并集选择器: 选择器,选择器
交集选择器: 选择器选择器
6.属性选择器 [](自己下去查阅文档)
7.伪元素选择器 (伪元素可以当做行标签使用)
::before 之前 前缀
::after 之后 后缀
CSS 选择器优先级:
CSS优先级:即CSS权重值,权重值大的优先级大,权重值小的优先级小。
第一等级:
行内样式,权重值为1000;
如 style=""
第二等级:
ID选择器,权重值为100;
如 #id=""
第三等级:
calss选择器 | 伪类 | 属性 选择器,权重值10;
如 .class | :hover | []
第四等级:
标签选择 | 伪元素选择器,权重值1;
如 p | ::after, ::before等等
!important权重值是无穷的,一般把!important设置的CSS属性,权重值理解成10000
最后形成优先级顺序: !important > style属性 > #id > .class > element 注意:权重是可以相加的,内联样式与外联样式不分优先级,代码运行是从上往下走的,主要看先后顺序
CSS样式具有继承性
判断一个元素是否具有继承性,需要测试和查看文档。
1. 有继承性的CSS属性:
和颜色相关的属性,如:color等
和字体相关的属性,如:font-size, font-weight等
和文本相关的属性,如:text-align, line-height等
和表格相关的属性,如:caption-side、border-collapse、border-spacing、 empty-cells、table-layout等
和列表相关的属性,如:list-style-type、list-style-image、list-style-position、 list-style
和XXX相关的,我们慢慢积累。
2. 无继承性的
width, height,border, margin, padding等
display显示属性等
定位和浮动都不具有继承性。
.....有很多CSS属性不具有继承性,我们慢慢积累。