规则结构: 每个规则都有连个基本部分, 选择器和声明块, 如 h2{font:large/150% sans-serif}(注意: 斜线分隔用来设置了字体和行高两个属性, 只有在这里才允许 font 声明中出现斜线, 其他关键字都用空格)
元素选择器: 通常是某个 html 元素, 如 p,h3,em,html,body 等
通配选择器:, 如 {color:red}
类选择器: 如 .className{}
多类选择器: 通过把两个类选择器链接在一起, 仅可选择同时包含这些类名的元素(类名顺序不限), 如:
- <p class="urgen warning">紧急又是警告</p>
- .urgen{font-weight:bold} .warning{color : #FF0000}
ID 选择器: 如:#idName{}, 在一个 html 文档中, ID 选择器仅使用一次
属性选择器: 1. 简单属性选择器, 如 h1[class]{color:silver}表示有 class 属性的元素字都设为银色
2. 属性值选择器, 如 planet[class="test"] {font-weight:bold}
3. 部分属性值选择器: 如: p[class~=warning] {font-weight : bold}表示包含类名中 warning 类的元素字体都加粗
4. 子串匹配属性选择器: 如: p[class^="bar"]-->选择 class 属性以 bar 开头的所有 p 元素
p[class$="bar"]-->选择 class 属性以 bar 结尾的所有 p 元素
p[class*="bar"]-->选择 class 属性包含子串 bar 的所有 p 元素
特定属性选择器: 如 *[lang |= "en"] {color : white}, 选择 lang 属性等于 en 或者以 en 开头的所有元素, 常见的用途是匹配语言值
后代选择器: h1 em {color:grey}选择 h1 元素中包含的所有 em 元素, 不管这个 em 元素是否被其他元素包裹
选择子元素: h1> p {color : red}选择 h1 元素的所有 em 子元素(若在 h1 中又被其他元素包裹就不叫子元素了)
选择相邻兄弟元素: 如 h + p {color : red} 选择紧接着 h1 元素后出现的所有段落, h1 与 p 元素要有共同的父元素
伪类选择器: 1. 链接伪类: :link 指示作为超链接 (即有一个 href 属性) 并指向一个未访问地址的所有锚
:visited 指示作为已访问地址超链接的所有锚
2. 动态伪类: :focus 当前拥有输入焦点的元素
:hover 鼠标停留的元素
:active 被用户输入或点击鼠标激活的元素
选择第一个子元素::first-child(说不清楚, 自己测试下吧)
伪元素选择器: 未完待续...........
来源: https://www.cnblogs.com/dami-xiaomi/p/9135175.html