【CSS 11】组合器 选择器 伪类 锚伪类 元素匹配 伪元素 结合CSS类 |
您所在的位置：网站首页 › css的选择器及其用法 › 【CSS 11】组合器 选择器 伪类 锚伪类 元素匹配 伪元素 结合CSS类 |
|
CSS
combinators 组合器pseudo classes 伪类pseudo elements 伪元素
combinators 组合器
组合器是解释选择器之间关系的某种机制 CSS 选择器可以包含多个简单选择器 在简单选择器之间可以包含组合器，从而组合成复杂选择器 CSS 中有四种不同的组合器： 后代选择器 - 空格子选择器 - 大于号 >相邻兄弟选择器 - 加号 +通用兄弟选择器 - 波浪号 ~后代选择器 后代选择器匹配属于指定元素后代的所有元素 /*例如选择元素内的所有元素*/ div p { background-color: yellow; } 子选择器 子选择器匹配属于指定元素子元素的所有元素 div > p { background-color: yellow; }相邻兄弟选择器 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素 兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后” div + p { background-color: yellow; }通用兄弟选择器 通用兄弟选择器匹配属于指定元素的同级元素的所有元素 div ~ p { background-color: yellow; } pseudo classes 伪类伪类用于定义元素的特殊状态 可以用于： 设置鼠标悬停在元素之上时的样式给已访问或是未访问的链接设置不同的样式设置元素获得焦点时的样式伪类的语法 selector:pseudo-class { property: value; }锚伪类 链接通过不同的方式显示 /*未访问的链接*/ a:link { color: #FF0000; } /*已访问的链接*/ a:visited { color: #00FF00; } /*鼠标悬停链接*/ a:hover { color: #FF00FF; } /*已选择的链接*/ a:active { color: #0000FF; } /* a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效 a:active 必须在 CSS 定义中的 a:hover 之后才能生效 伪类名称对大小写不敏感 */ /* 伪类可以与 CSS 类结合使用 当您将鼠标悬停在例子中的链接上时，它会改变颜色 */ a.highlight:hover { color: #ff0000; } /*在 元素上使用 :hover 伪类*/ div:hover { background-color: yellow; }有意思的工具提示悬停 DOCTYPE html> p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; } 鼠标移入显示p元素 Hi,I'm here /* :first-child 伪类与指定元素匹配 该元素是另一个元素的第一个子元素 例如下面的选择器匹配作为任何元素的第一个子元素的任何元素 */ p:first-child { color: blue; } /* 匹配所有 元素中的首个元素 */ p i:first-child { color: blue; } /* 匹配所有首个 元素中的所有 元素 */ p:first-child i { color: blue; } DOCTYPE html> q:lang(en) { quotes: "~" "~"; } Some text A quote in a paragraph Some text. :focus 伪类的用法 DOCTYPE html> input:focus { background-color: hotpink; height: 144px; } First name: Last name:更多CSS伪类与伪元素 pseudo elements 伪元素CSS 伪元素用于设置元素指定部分的样式 可以用于： 设置元素首字母以及首行的样式在元素内容之前或之后插入内容伪元素语法： selector::pseudo-element { property: value; }::first-line 伪元素 ::first-line 伪元素用于为文本的首行添加特殊样式 /* 例如为所有的元素中的首行添加样式 */ p::first-line { color: #ff0000; font-variant: small-caps; /*将所有英文字母改写为小型大写形式，对中文没有影响*/ } ::first-line 伪元素只能应用于块级元素 下面的属性适用于::first-line伪元素 字体属性颜色属性背景属性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear请注意双冒号表示法 ::first-line 在 CSS3 中，双冒号取代了伪元素的单冒号表示法 这是 W3C 试图区分伪类和伪元素的尝试 ::first-letter 伪元素 ::first-letter 伪元素用于向文本的首字母添加特殊样式 /* 例如为所有元素中文本的首字母添加特殊样式 */ p::first-letter { color: #ff0000; font-size: xx-large; } ::first-letter 伪元素只适用于块级元素 以下属性适用于::first-letter伪元素 字体属性颜色属性背景属性外边距属性内边距属性边框属性text-decorationvertical-aligntext-transformline-heightfloatclear伪元素与CSS类 伪元素可以与 CSS 类结合使用 p.intro::first-letter { color: #ff0000; font-size: 200%;上面的例子将以红色和较大的字体显示 class=“intro” 的段落的首字母 多个伪元素 可以组合几个伪元素 段落的第一个字母将是红色，字体大小为 xx-large 第一行的其余部分将变为蓝色，并使用小型大写字母 该段的其余部分将是默认的字体大小和颜色 DOCTYPE html> p::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-varaint: small-caps; } 可以结合 ::first-letter 和 ::first-line 伪元素来为文本的首字母和首行添加特殊效果::before 伪元素 ::before 伪元素可用于在元素内容之前插入一些内容 DOCTYPE html> h1::before { content: url(/i/photo/smile.gif); } 我是一句标题hh ::before伪元素在元素的内容之前插入内容 我还是一句标题gg::after 伪元素 ::after 伪元素可用于在元素内容之后插入一些内容 DOCTYPE html> h1::after { content: url(/i/photo/smile.gif); } 我是一句标题hh ::after伪元素在元素的内容之后插入内容 我还是一句标题gg::selection 伪元素 ::selection 伪元素匹配用户选择的元素部分 下面的CSS属性可以应用于::selection伪元素 colorbackgroundcursoroutline DOCTYPE html> ::-moz-selection { /*针对 Firefox 的代码 */ color: red; background: yellow; } ::selection { color: red; background: yellow; } 随便选择页面中的文本 我是一个段落hh 不管是什么标签元素，只要选中都会展现相应的样式 注释:Firefox 支持可以替代的 ::-moz-selection属性 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |