一、CSS高级选择器(重点)
CSS 链接选择器 (UI伪类选择器)
CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法:
/*选择器:伪类选择器{}*/
selector:pseudo-class {property:value;}
CSS类也可以使用伪类:
selector.class:pseudo-class {property:value;}
链接样式
不同的链接可以有不同的样式。
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
/* 未访问链接*/
a:link {
color:#000000;
}
/* 已访问链接 */
a:visited {
color:#00FF00;
}
/* 鼠标移动到链接上 */
a:hover {
color:#FF00FF;
}
/* 鼠标点击时 */
a:active {
color:#0000FF;
}
当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
注意:伪类的名称不区分大小写。
常见的链接样式
根据上述链接的颜色变化的例子,看它是在什么状态。
让我们通过一些其他常见的方式转到链接样式:
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration:underline;
}
背景颜色属性指定链接背景色:
a:link {
background-color:#B2FF99;
}
a:visited {
background-color:#FFFF85;
}
a:hover {
background-color:#FF704D;
}
a:active {
background-color:#FF704D;
}
CSS分组和嵌套(交集)选择器
分组选择器
在样式表中有很多具有相同样式的元素。
h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}
为了尽量减少代码,你可以使用分组选择器。
每个选择器用逗号分隔。
h1,h2,p { color:green; }
交集选择器
选择既是某种类型又是某种类型的元素
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
p.marked{
text-decoration:underline;
}
CSS 组合选择符(CSS关系选择器)
组合选择符说明了两个选择器直接的关系。
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS 中包含了四种组合方式:
后代选择器(以空格分隔)
子元素选择器(以大于号分隔)
相邻兄弟选择器(以加号分隔)
普通兄弟选择器(以破折号分隔)
后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p>
元素插入到 <div>
元素中:
div p {
background-color:yellow; /*选择div的所有后代p元素*/
}
子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
以下实例选择了<div>
元素中所有直接子元素 <p>
:
div>p {
background-color:yellow; /*选择div的所有子元素p元素*/
}
相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
以下实例选取了所有位于 <div>
元素后的第一个 <p>
元素:
div+p {
background-color:yellow; /*选择div之后紧邻的兄弟p元素*/
}
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的所有兄弟元素。
以下实例选取了所有 <div>
元素之后的所有相邻兄弟元素 <p>
:
div~p {
background-color:yellow;
}
CSS属性选择器
选择器 | 示例 | 示例说明 |
---|---|---|
attribute | [target] | 选择所有带有target属性元素 |
attribute=value | [target=-blank] | 选择所有使用target="-blank"的元素 |
attribute~=value | [title~=flower] | 选择标题属性包含单词"flower"的所有元素[包含完整单词] |
CSS伪元素选择器(和元素内容有关)
CSS伪元素是用来添加一些选择器的特殊效果。
伪元素的语法:
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素:
selector.class:pseudo-element {property:value;}
选择器 | 示例 | 示例说明 |
---|---|---|
:first-letter | p:first-letter | 用来指定元素第一个字母的样式。 |
:first-line | p:first-line | 用来指定选择器第一行的样式。 |
:after | p:after | 向选定的元素之后插入内容。 |
:before | p:before | 向选定的元素前插入内容。 |
/*每个 <p>元素的第一个字母选择的样式:*/
p:first-letter{
font-size:200%;
color:#8A2BE2;
}
/*每个<p>元素的第一行选择的样式:*/
p:first-line{
background-color:yellow;
}
/*伪元素可以结合CSS类: */
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
/*每个 <p>元素之前插入内容:*/
p:before{
content:"Before Context: ";
}
/*每个<p>元素之后插入内容:*/
p:after{
content:"After Context: ";
}
注意::first-letter/:first-line选择器可以使用以下属性:
-
font properties
-
color properties
-
background properties
-
word-spacing
-
letter-spacing
-
text-decoration
-
vertical-align
-
text-transform
-
line-height
-
clear
CSS结构伪类选择器
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
在下面的例子中,选择器匹配作为任何元素的第一个子元素的 <p>
元素:
p:first-child{
color:blue;
}
在下面的例子中,选择相匹配的所有<p>
元素的第一个 <i>
元素:
p > i:first-child{
color:blue;
}
在下面的例子中,选择器匹配所有作为元素的第一个子元素的 <p>
元素中的所有 <i>
元素:
p:first-child i
{
color:blue;
}
CSS焦点选择器
选择器 | 示例 | 示例说明 |
---|---|---|
:focus | input:focus | 选择具有焦点的输入元素 |
二、CSS元素显示类型及可见性
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。
块元素是一个元素,占用了全部宽度,在前后都是换行符。
块元素的例子:h1、p、div
内联元素只需要必要的宽度,不强制换行。
内联元素的例子:span、a
CSS Display
display属性设置一个元素应如何显示。
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
其他:list-item/table/inline-table/table-cell/table-caption......,不过由于缺乏广泛支持或者支持程度不好,有的已经被删除或者很少使用;
CSS Visibility
visibility属性指定一个元素应可见还是隐藏。
值 | 描述 |
---|---|
visible | 默认值。元素是可见的。 |
hidden | 元素是不可见的。 |
display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
h1.hidden {
visibility:hidden;
}
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
h1.hidden {
display:none;
}
CSS鼠标样式
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
值 | 描述 |
---|---|
url | 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 自定义图标必须满足两个要求: 1、大小必须是32*32 2、必须是ico图标 |
default | 默认光标(通常是一个箭头) |
auto | 默认。浏览器设置的光标。 |
crosshair | 光标呈现为十字线。 |
pointer | 光标呈现为指示链接的指针(一只手) |
move | 此光标指示某对象可被移动。 |
e-resize | 此光标指示矩形框的边缘可被向右(东)移动。 |
ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 |
nw-resize | 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 |
n-resize | 此光标指示矩形框的边缘可被向上(北)移动。 |
se-resize | 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 |
sw-resize | 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 |
s-resize | 此光标指示矩形框的边缘可被向下移动(北/西)。 |
w-resize | 此光标指示矩形框的边缘可被向左移动(西)。 |
text | 此光标指示文本。 |
wait | 此光标指示程序正忙(通常是一只表或沙漏)。 |
help | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |
not-allowed | 禁用图标 |
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>