类选择器 class="className"
.className 选取class为className的元素
p.chassName 选取p标签中class为className的元素
.className1.className2 选取同时拥有.className1和.className2的元素
id选择器 id="id"
p#idName 选取p标签中id为id的元素
标签选择器
p span 选取p标签下的所有span元素
p>span 选取p标签下一级的所有子span元素
p+span 选取p标签的下一个兄弟元素span
p~span 选取p标签后的所有的兄弟span元素
通配选择符
*
p * span 选取所有p的孙子span
常用伪类选择器 (推荐在css3中使用::而不是:)
a:link
a:hover 悬停
a:visited 访问过
a:active 用户点击时
:focus 获得焦点时的样式
:target a标签href=‘#id’指向同页面的id标识的元素时,设置的样式。
::first-letter 首字母
::first-line首行
::before{ content:''}元素前
::after{content:''}元素内容后面添加而不是元素后面添加
::selection 用来匹配突出显示的文本。用鼠标拉取复制的样式。
语言伪类选择器
E:lang(en) E:lang(zh)
UI元素状态选择器
:checked :disabled :enabled
:nth-of-type比:nth_child更为可靠,选择的是某父元素下同类型的子元素。
:only-of-type 表示一个元素有很多个子元素,而其中只有一个元素是唯一的。例子:元素中只有一个元素时的样式和元素中有多个元素时的样式。
:not()否定选择器 例如::not(input[type="submit"])
tips
a标签href属性设置‘#id’可以导航到同一页面上具有id的标签处,设置‘#’则会返回页面头部
id用于标记页面中的块级元素,类适用于具有相同类型的元素