【前端系列教程之CSS3】03_CSS高级选择器和元素显示类型

一、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>

 

上一篇:css常用代码大全,html+css代码


下一篇:ceph简单用户管理