文章目录
1.1 引入外部css
<link href=""></link>
1.2 元素的分类
-
块级元素
一个元素单独占一行，且不会给里面的元素设置任何样式。 -
内联元素
会有一定的样式，内联元素不是单独占一行。
<a.>标签能包含任何元素，除了他自己。<p>标签不能包含块级元素。
1.3 常用选择器
- id
- class
1.4 选择器分组
- 用逗号隔开，表示一个组的
#a1,.a2,h1{......}
- 统配选择器
*{....}
- 复合选择器
span.p3{......}
选中span标签中类名包含p3的元素
- 后代元素选择器
- 子元素选择器
div > span{.....}
1.5 元素之间的关系
- 父，子，祖先，后代，兄弟元素
1.6 伪类
表示一个标签的不同状态
以超链接为例子
:link 未访问过
:vistied 访问过(只能设置颜色)
:hover 鼠标移入
:active 被点击
:focus 获取焦点(比如输入框)
:before 元素前
:after 元素后
::selection 选中的元素
1.7 伪元素
p:first-letter
p:first-line
p:before{
content: ""
}
P:after{
content: ""
}
}
1.8 属性选择器
- 比如title属性
<head></head>
<body>
<h1 title="你好呀">hell0</h1>
</body>
ｐ[title]{}
p[title="hello"]{}
p[title^="hello"]{}
p[title*="heelo"]{}
p[title$="hello"]{}
1.9 其他元素选择器
- 为第二个子元素
奇数，偶数
p:nth-child(2){}
p:last-child{}
p:nth-child(even){}
p:nth-child(odd){}
p:first-of-type{}
- type 在同类中查找
1.10 兄弟元素选择器
- 紧挨的兄弟元素
span + div{......}
- 所有的兄弟元素
span ~ div{......}
1.11 伪类元素选择器
- 出国id是hello的伪元素
span:not(.hello){}
二、选择器优先级
2.1 样式的集成
背景不会被继承
2.2 选择器的优先级
- 内联选择器 1000
- id 100
- 类和伪类 10
- 元素选择器 1
- 通配选择器 0
- 继承的样式 没有优先级
多种选择器时，优先级加到一起进行比较
后面加!import会使该样式获取最高的优先级
2.3 伪类的顺序
优先级是相同的，没有顺序
来源：CSDN
作者：初心魏
链接：https://blog.csdn.net/qq_42306803/article/details/104416618