如何应用css样式？
- 找标签
- 写样式
如何找出标签？
class选择器
.类名（注意前面点）｛
样式
｝
.a{
color: green;
}
<p class=”a”>hehehehe</p>
p标签内应用a样式，a来自class的定义
标签选择器
标签｛
样式
｝
p，div，select，span，input[type = text] {
样式 }
/*对input系类可以通过type指定选择input的类型*/
id选择器
#id｛
样式
｝
- 层级选择器
选择逻辑是一层一层找下去（以空格隔开）
如 .类名 #id 标签名｛ 样式 ｝，
样式在 #id 标签里面的所有指定的标签本身和子标签都用统一样式
- 并集选择器（以逗号隔开，相当于“或”）
标签1，标签2 .类名，#id｛ 样式 ｝
表名标签1和标签2下 .类名下和指定id的都应用此样式
- 子代选择器
父标签>子标签｛样式｝
- 交集选择器
选择器1选择器2{样式} –中间不空格，连起来
- 兄弟选择器
选择器1+选择器2 –选择 选择器1相邻的同级兄弟标签，不包含选择器1
选择器1~选择器2 –选择 选择器1下选择器2同级的兄弟标签
- 序选择器
- 标签选择器：first-child –选择同级第一个标签，不区分类型
- 标签选择器：first-of-type — 选择同级别同类型第一个
- 标签选择器：last-child –选择同级别同类型最后一个，不区分类型
- 标签选择器：last-of-type –选择同级别同类型最后一个
- 标签选择器：nth-child(第几个) –选择同级别，不区分类型
- 标签选择器：nth-of-type(第几个) –选择同级别同类型第几个
- 标签选择器：nth-last-child(第几个)
- 标签选择器：nth-last-type(第几个)
- 标签选择器：only-child –选择同级别只有选择的一个标签
- 标签选择器：only-of-tyep –选择同级和子级中所有同级别的唯一类型标签
如何逻辑整理？
- 找到标签，写入样式
- 标签中加入 id+clsaa 属性值
- 通过 .类名+#id+标签名+空格层级+逗号组合 找到指定标签
- 写css
如何通过自定义属性找到标签？属性选择器
自定义属性名 = 属性值
在css中写入 [自定义属性名]｛样式｝ ，也可以通过[自定义属性名|=’ 属性值’]｛样式｝，用于自定义属性名字相同的情况下
什么是伪类选择器？
通过css进行文本内容修改
选择器:before 在某个标签之前 ， after 在某个标签之后
主要用于超链接显示效果
link — 未经过一次点击
hover — 鼠标悬停
visited — 经过一次点击
active – 鼠标按下的状态
一定按照这个顺序，不然有冲突
