6_css选择器
如何应用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 -- 鼠标按下的状态
一定按照这个顺序,不然有冲突