css选择器与css3伪类

css选择器

元素选择器

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

类选择器

.important {color:red;}

id选择器

#intro {font-weight:bold;}

属性选择器

a[href][title] {color:red;} // 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

后代选择器

h1 em {color:red;}  // 只对 h1 元素中的 em 元素应用样式

子元素选择器

h1 > strong {color:red;} // 选择只作为 h1 元素子元素的 strong 元素

相邻兄弟选择器

h1 + p {margin-top:50px;} // 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

伪类选择器

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   

伪类用：表示

伪元素选择器

p::first-line  // 对 p 元素的第一行文本进行格式化
  {
  color:#ff0000;
  font-variant:small-caps;
  }

css3修订伪元素用：： 表示

伪元素用途：

CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰（:first-line，:first-letter）或将元素添加到标记中（与 content:…组合）而不必修改标记（:before，:after）。

• :first-line和:first-letter可以用来修饰文字。
• 上面提到的.clearfix方法中，使用clear: both来添加不占空间的元素。
• 使用:before和after展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。

选择器权重

优先级为: !important > id > class > tag

• 优先级就近原则，同权重情况下样式定义最近者为准
• 载入样式以最后载入的定位为准
• important 比 内联优先级高

css伪类

:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。

:hover 当鼠标悬浮在元素上方时，向元素添加样式。

:link 向未被访问的链接添加样式

:visited 向已被访问的链接添加样式。

:first-child 向元素的第一个子元素添加样式。

:lang 向带有指定 lang 属性的元素添加样式

CSS3新增伪类

• p:first-of-type 选择属于其父元素的首个元素的每个元素。
• p:last-of-type 选择属于其父元素的最后元素的每个元素。
• p:only-of-type 选择属于其父元素唯一的元素的每个元素。
• p:only-child 选择属于其父元素的唯一子元素的每个元素。
• p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
• :after 在元素之前添加内容,也可以用来做清除浮动。
• :before 在元素之后添加内容
• :enabled
• :disabled 控制表单控件的禁用状态。
• :checked 单选框或复选框被选中