CSS3学习笔记-选择器

类选择器 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用于标记页面中的块级元素，类适用于具有相同类型的元素