选择器

选择器:

CSS的基本选择器: 优先级 ID > 类 > 标签
标签选择器:直接使用标签名字来选择
类选择器:通过标签上面的class属性名称来获取一类标签 css中通过.类名 来设置
ID选择器:通过标签上面的ID属性名称来获取单一的标签 css中通过 #id名 来设置
注意:ID属性具有唯一性,同一个HTML页面不可以出现相同的id名字

属性选择器:
选择器[属性名]{} 选择具有某一个属性的一类标签
例: p[class]{color:red;} 表示选择具有class属性的p标签,设置文字颜色是红色

选择器[属性名=属性值]{} 选择具有某一属性,并且规定了属性值的一类标签
例: p[class=a1]{color:blue;} 表示选择具有class属性并且属性值是a1的所有p标签,设置文字颜色是蓝色

选择器[属性名^=值] 选择具有某一属性,并且属性值以什么值作为开头
例: p[class^=a]{color:green;} 表示选择具有class属性,并且属性值以a开头的所有p标签,设置颜色为绿色

选择器[属性名 = 值 ] 选 择 具 有 某 一 属 性 , 并 且 属 性 值 以 什 么 值 作 为 结 尾 例 : p [ c l a s s =值] 选择具有某一属性,并且属性值以什么值作为结尾 例: p[class =]p[class=a]{color:green;} 表示选择具有class属性,并且属性值以a结尾的所有p标签,设置颜色为绿色

选择器[属性名*=值] 选择具有某一属性,并且属性值包含某一个内容
例: p[class*=a]{color:green;} 表示选择具有class属性,并且属性值中带有a的所有p标签,设置颜色为绿色

伪类选择器:
a:link 表示超链接没有被访问前的状态
a:visited 表示超链接被访问后的状态
a:hover 表示鼠标悬浮在超链接上的状态
a:active 表示鼠标按下但并没有释放是的状态

注意 a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后
可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

li:first-child 表示选择父元素下的第一个子元素,并且该元素是li
li:last-child 表示选择父元素下的最后一个子元素,并且该元素是li
li:nth-child(n) 表示选择父元素下的第n个元素,并且该元素是li

li:first-of-type 表示选择父元素下出现的第一个li标签
li:last-of-type 表示选择父元素下出现的最后一个li标签
li:nth-of-type(n) 表示选择父元素下的第n个li标签

odd 代表奇数
even 代表偶数
2n 代表偶数
2n+1 代表奇数
3n+1 代表隔两行

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值