复合选择器
说明:组合使用选择器同时为多个标签设置样式。
列表样式属性
列表类型:
在实际应用中,无序列表是使用的最多的。
list-style-type:设置列表前面的项目符号。 | 值 | 样式 --- | --- none | 清除样式 disc | 实心圆 square | 实心小方块 circle | 空心圆
默认样式:
<
清除项目符号:
<
<
list-style-polision:设置列表项放置的位置
- inside :在里面
- outside :在外面
list-style-image:
- url(): 图像路径
list-style :
- 外边距:margin
- 内边距:padding
怎样设置div居中
margin-left:auto;
margin-right:auto;
伪类选择器
作用:
选择器 | 作用| --- | --- | :link | 向未被访问的链接添加样式 :visited | 向已经被访问的链接添加样式 :hover | 当鼠标悬停时设置样式 :active
注意:
超级链接的美化
- 通常去掉超级链接的下划线,同时设置颜色
- 正常状态与访问过后状态一样,悬停状态设置另外样式,激活状态不设置
- a:link,a:visited{}
属性选择器
略过!
继承性
- 子元素继承父元素的某些属性设置。
- body标签是最大的内容显示标签。
- 如果内层元素的样式与外层元素的样式相同时,内层元素优先级高。
- 并不是所有的样式都可以继承。只有文本与字体属性可以继承,其他属性都不可以继承。例如color、size、font......
注:在实际工作中,往往会给body标签设置字体大小以及字体颜色。因为body是最外层元素,内层元素继承body的样式。
优先级
行内样式>ID选择器>类选择器>标签选择器
一般而言,选择器指向越准确,优先级越高 | 选择器 | 权重值| --- | ------ 标签选择器 | 1 类选择器 | 10 ID选择器 | 100 行内样式 | 1000 - | - 值越大优先级越高,不管是单个选择器还是组合都可以通过公式进行计算来比较。组合权重值相加。
!Important属性
作用:权重值变为无穷大,既优先级最高。 语法格式 :标签{属性:值 !important ;}
<
注意:!important是提升属性的权重而不是提升选择器的权重。 只有添加了!important的属性生效提升了。 不能提升继承外层元素的权重。