CSS选择器种类及使用方法

css选择器 有通配符选择器书写格式:* {声名块} 并集选择器/组合选择器 书写格式;元素或类或id “” 元素或类或id “,” 元素或类或id{声明块} 列:h1,h2,h3{color:red;} 层次选择器 : 子集选择器: 格式:父级元素名称 ">" 子级元素名称 {声明块} 例:div>p{color:red;} 后代选择器: 格式:祖先元素名称 空格 后代元素名称 {声明块} 例:div p{color:red;} 兄第选择器: 格式: A元素名称 " " B元素名称 {声明块} 例:div P{color:red;} 注:选择A元素后的B元素,AB之间不许有其他元素. 通用选择器: 格式:同级元素A "~" 同级元素B {声明块} 例:div~p{color:red;} 注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)。 伪类选择器 动态伪类选择器未访问 (把默认值改为黑色); a:link{color:black;} 鼠标悬停 a:hover{color:pink;} 鼠标点击时 a:active{color:green;} 点击后 a:visited{color:五颜六色;}; 注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上。 a:focus{color:颜色;} 多用于输入框或链接(注:IE7以前不支持:focus注;IE6以前不支持:hover :active) 以上5个的顺序要求: A:link,visited,focus,hover,active B:visited,link,focus,hover,active 结构伪类选择器 格式:元素名称 ":nth-child(n)" {声明块} 例:section:nth-child(2){color:deeppink;} 表示选中html里的第二个section元素,文字设置为deeppink 选中第一个 格式:元素名称 ":first-child" {声明块} 例:p:first-child{color:red;} 选中最后一个 格式:元素名称 ":last-child" {声明块} 例:p:last-child{color:red;} 选中奇数项 格式:元素名称 ":nth-child(odd)" {声明块} 例:section:nth-child(odd){color:red;} 选中偶数项 格式:元素名称 ":nth-child(even)" {声明块} 例:section:nth-child(even){color:red;} 伪元素选择器 元素后面加内容 格式:元素名称 ":after" {content:"要添加的内容";} 例:i:after{content:"姓名";} 元素前面加内容 格式:元素名称 ":before" {content:"要添加的内容";} 例:i:before{content:"姓名";} 元素第一行添加样式 格式:元素名称 ":first-line" {声明块} 例:p:first-line{color:red;} 元素第一个字母或第一个汉字 格式:元素名称 ":first-letter" {声明块} 例:p:first-letter{color:red;} 注:为了解决兼容性,伪元素选择器,建议打两个冒号
更多专业前端知识,请上 【猿2048】www.mk2048.com
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值