常见CSS选择器分类

CSS选择器
基本/基础选择器
通配符选择器
例:*{color:red;} 引入后会把html里所有内容变成红色
元素选择器
例:h1{color:red;}
并集/组合选择器
例:h1,h2,p{color:red;}
类选择器
必须要以点符号开始
类名包含字母、数字、连字符-、下划线_
点号后面必须是字母开始
区分大小写
一个类选择器可以应用到多个标签
例:.F46{color:red;}
ID选择器
必须要以#符号开始
ID名包含字母、数字、连字符-、下划线_
#号后面必须是字母开始
区分大小写
一个ID选择器的名只能与一个标签对应
例:#F46{color:red;}
层次选择器
后代选择器
格式:祖先元素+空格+后代元素{声明块}
子级选择器
格式:父级元素+大于号+子级元素{声明块}
兄弟选择器
格式:兄弟元素A+"+"+兄弟元素B{声明块}
注意:该选择器是选择A元素后面的B元素,并且AB元素必须是紧邻的,即AB之间不许有其他元素
通用选择器
格式:兄弟元素A+"~"+兄弟元素B{声明块}
注意:该选择器是选择匹配的B元素,即A元素后面的所有B元素
伪类选择器
动态伪类选择器
① a:link{声明块} 表示未访问状态的样式
② a:visited{声明块}表示已访问状态的样式
③ a:focus{声明块} 触发焦点(TAB键)时的样式
④ a:hover{声明块}鼠标悬停时的样式
⑤ a:active{声明块}鼠标点击时的样式
静态伪类(只适用于a标签)
动态伪类(不仅限于a标签)
结构伪类选择器(不是只有li子元素才能用这个选择器)
li:first-child{声明块} 表示第一个li的样式
li:last-child{声明块} 表示最后一个li的样式
li:nth-child(n){声明块} 表示从前往后数第n个li的样式
li:nth-last-child(n){声明块} 表示从后往前数第n个li的样式
li:child(2n+1)或child(odd) 表示奇数项的li样式;n从0开始取值
li:child(2n)或child(even) 表示偶数项的li样式;n从0开始取值
div>p:nth-of-type(n){声明块} 表示div下的第n个p标签的样式
div>p:only-child{声明块} 表示div下只有一个p标签时才会出现的样式
div>p:empty{声明块}表示如果p里面是空的元素内容才会有的样式
否定伪类结构选择器
div>ul>li:not(:nth-child(n)){声明块} 表示div下的ul下的除开第n个li之外的其他所有li的样式
伪元素选择器
p::selection{声明块} 表示选中文本时出现的样式 声明块里的规则只能有color和background-color
p::first-letter{声明块} 表示文本首字母样式
p::first-line{声明块} 表示文本第一行样式
p::before{
content:" "; 表示在p之前加入内容
color:red;表示给加入的内容变成红色
}
p::after{
content:" ";表示在p之后加入内容
}
在a标签中使用顺序为①②③④⑤或者②①③④⑤
属性选择器
标签名[属性名=“属性值”] (通常是input标签)

转载于:https://www.cnblogs.com/zhangyilxy/p/8098801.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值