一、选择器
CSS选择器是CSS规则的第一部分
它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式
选择器所选择的元素,叫做“选择器的对象”
我们从一个Html
结构开始
<div id="myDiv">
<div class="myClass">
<p class="one_1">
</p >
<p class="one_1">
</p >
</div>
<div class="two"></div>
</div>
css
属性选择器常用的有:
-
id选择器(#myDiv),选择id为box的元素
-
类选择器(.myClass),选择类名为one的所有元素
-
标签选择器(div),选择标签为div的所有元素
-
后代选择器(#myDiv div),选择id为box元素内部所有的div元素
-
子选择器(.myClass>one_1),选择父元素为.one的所有.one_1的元素
-
相邻同胞选择器(.myClass+.two),选择紧接在.one之后的所有.two元素
-
群组选择器(div,p),选择div、p的所有元素
- 伪类选择器
:link :选择未被访问的链接
:visited:选取已被访问的链接
:active:选择活动链接
:hover :鼠标指针浮动在上面的元素
:focus :选择具有焦点的
:first-child:父元素的首个子元素
- 伪元素选择器
:first-letter :用于选取指定选择器的首字母
:first-line :选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
- 属性选择器
二、优先级
CSS的优先级是用来确定当多个样式规则应用到同一个HTML元素时,哪个样式规则将被应用的一种规则。CSS优先级按照一定的规则来计算,通常称为“优先级权重”,计算得分最高的样式规则将被应用到HTML元素。
内联 > ID选择器 > 类选择器 > 标签选择器
-
内联样式(Inline Styles):直接在HTML标签中使用style属性定义的样式规则。例如:
<div style="color: red;">Hello World</div>
内联样式的优先级最高。
-
ID选择器(ID Selectors):通过在CSS中使用#符号定义的ID选择器。例如:
#myDiv { color: blue; }
每个页面上同一ID选择器的优先级只计算一次。
-
类选择器、属性选择器和伪类选择器(Class Selectors, Attribute Selectors, and Pseudo-class Selectors):通过在CSS中使用.(点号)、[]和:定义的选择器。例如:
.myClass { font-size: 16px; } [type="text"] { background-color: #fff; } :hover { color: green; }
这些选择器的优先级相同。
-
元素选择器和伪元素选择器(Element Selectors and Pseudo-element Selectors):通过在CSS中直接使用元素名称定义的选择器,以及通过::定义的伪元素选择器。例如:
p { font-weight: bold; } ::before { content: "»"; }
这些选择器的优先级相同。
-
通配符选择器和属性选择器(Universal Selectors and Attribute Selectors):使用或者加属性名称的选择器,例如:
* { color: gray; } [disabled] { opacity: 0.5; }
通配符选择器和属性选择器的优先级相同。
-
继承(Inheritance):某些属性会被继承到子元素,但是继承并不会影响优先级的计算。继承的属性优先级比默认样式低,但比其他选择器优先级低。
注意事项:
- !important:在样式规则后面添加!important标志可以将其优先级提升到最高,即使有更高优先级的样式存在。但是,过度使用!important可能导致样式难以维护,因此应当谨慎使用。
- 内嵌样式表和外部样式表:当相同选择器的样式规则在不同位置定义时,后面定义的样式将覆盖前面的样式,无论其优先级如何。
- 继承:某些样式属性会被子元素继承自父元素,但并不影响优先级的计算。
三、继承属性
继承属性,可以分成:
- 字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
- 文本系列属性
text-indent:文本缩进
text-align:文本水平对刘
line-height:行高
word-spacing:增加或减少单词间的空白
letter-spacing:增加或减少字符间的空白
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
- 元素可见性
visibility
- 表格布局属性
caption-side:定位表格标题位置
border-collapse:合并表格边框
border-spacing:设置相邻单元格的边框间的距离
empty-cells:单元格的边框的出现与消失
table-layout:表格的宽度由什么决定
- 列表属性
list-style-type:文字前面的小点点样式
list-style-position:小点点位置
list-style:以上的属性可通过这属性集合
- 引用
quotes:设置嵌套引用的引号类型
- 光标属性
cursor:箭头可以变成需要的形状
继承中比较特殊的几点:
-
a 标签的字体颜色不能被继承
-
h1-h6标签字体的大下也是不能被继承的
无继承的属性
-
display
-
文本属性:vertical-align、text-decoration
-
盒子模型的属性:宽度、高度、内外边距、边框等
-
背景属性:背景图片、颜色、位置等
-
定位属性:浮动、清除浮动、定位position等
-
生成内容属性:content、counter-reset、counter-increment
-
轮廓样式属性:outline-style、outline-width、outline-color、outline
-
页面样式属性:size、page-break-before、page-break-after