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 单选框或复选框被选中