标签：CSS3 03 color 元素 resize 光标 选择器 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>
标签：CSS3,03,color,元素,resize,光标,选择器,CSS 来源： https://blog.csdn.net/ligonglanyuan/article/details/121534949
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。