常见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
常见CSS选择器分类相关推荐
- html中css选择器的分类,CSS选择器分类
CSS选择器分类 标签(空格分隔): CSS 选择器 标签选择器 标签选择器:html代码中的标签.例如:html.form.span 为p标签设置12px字号,行间距设置1.6em的样式: p{ f ...
- CSS选择器分类大全
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用. 简单来说,就是选择标签用的. 分类:基础选择器.复合选择器 目录 一.基础选择器 二.复合选择器 三.CSS3选择器补充: (一 ...
- CSS选择器分类(有例子非常全)
1.基础选择器 单个选择器组成 1)标签选择器 指用HTML标签名称作为选择器,为页面中某一类标签指定统一的CSS样式. p {color: green; } div {color: pink; } ...
- CSS选择器分类与优先级
详见附件 转载于:https://blog.51cto.com/xiaoxiaojinya/1948308
- CSS选择器及其优先级排序
一. CSS选择器分类 CSS选择器如下: CSS的选择器其实大类的话可以分为三类,即id选择器.class选择器.标签选择器. 用法如下: id选择器: #id名 { 属性名:属性值; } clas ...
- CSS选择器有哪些?选择器的优先级如何排序?
本文章转载于:https://www.cnblogs.com/AIonTheRoad/p/11283100.html CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选 ...
- CSS基本知识之常用的选择器分类
一.CSS基本知识: 1.CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表. 2.CSS 是也是一种标记语言 3.CS ...
- HTML及CSS学习笔记 06 - CSS简介和常见的选择器
本文是HTML及CSS课程的第六课.W3C提倡网页的内容与表现分离,层叠样式表(Cascading Style Sheet)即是网页中的"表现"部分,它描述HTML标签将会显示成什 ...
- css初级知识点(css样式分类、css选择器种类及优先级)
美化样式 Css样式分类 行内样式:<标签名style="属性名:属性值;"></标签名> 内部样式:<style></style> ...
最新文章
- HTTP 错误 500.21 - Internal Server Error 解决方案
- 解决虚拟机 Virtualbox 中 linux 共享文件夹只读问题
- XScuGic_Connect分析
- 检测和语义分割_分割和对象检测-第1部分
- c++builder 运行网站的api_04 将您的API Builder Docker映像发布到AMPLIFY运行时服务(ARS)...
- 判断php图片是否存在,php判断远程图片是否存在
- 关于软件系统维护的一点想法
- Android学习笔记---29_构建soap协议内容,发送xml数据和调用webservice,手机号码归属地查询器
- Java中的SOAP技术
- BigDecimal 部署测试环境精度丢失
- FusionCharts 学习总结
- 联想 K5 Pro(L38041)免解锁BL 免rec 保留数据 ROOT Magisk Xposed 救砖 ZUI 5.0.188
- 数组中大于等于左侧所有数,小于等于右侧所有数的数
- android点击不同次切换不同图片,Android实现简单的上一张、下一张图片切换显示...
- JavaCV推流实战(MP4文件)
- 嘉兴 机器人仓库 菜鸟_双11前菜鸟网络升级智能仓库 浙江嘉兴仓担当大任
- Windows编程 DirectInput 鼠标和键盘的输入
- go+sqlite实现sgk完整部署,privacy,privacy-main
- python教程 廖雪_Python 2.7教程
- mysql关键字释义_数据库连接字符串ConnectionString 中的关键字值释义
热门文章
- Shell编程(逻辑判断、文件目录属性判断、if特殊用法、case判断)
- GMTC 大前端时代前端监控的最佳实践 1
- 何时使用hadoop fs、hadoop dfs与hdfs dfs命令(转)
- bzoj4195 noi2015 day1 t1
- 微软职位内部推荐-Software Engineer II_VS
- hive serde 序列化与反序列化 - 一行数据写入hive表
- [转]直接拿来用!最火的Android开源项目(一)
- LeetCode 187. 重复的DNA序列
- LeetCode 36. 有效的数独
- LeetCode-39. 组合总和 I