精华内容
下载资源
问答
  • 伪元素选择器

    2014-12-14 16:18:32
    主要讲的是css3中新增加的选择器,伪元素选择器
  • 伪类选择器和伪元素选择器可以为文档中非具体存在的结果指定样式,或者为某些元素(包括文档本身)的状态指定样式,它会根据某种条件而非文档结构应用样式。 伪类选择器的使用方法如下: HTML标记 伪类名{伪类名:...
  • CSS伪元素选择器

    2018-01-11 20:05:21
    伪元素选择器 伪元素选择器,并不是基于真正的元素,而是基于元素当前所具有的特性来选取元素。由于这些元素本身并不存在于文档中,只是基于元素的抽象,因此称作伪元素。 伪元素选择器是CSS 中已经定义好的选择器...

    伪元素选择器,并不是基于真正的元素,而是基于元素当前所具有的特性来选取元素。由于这些元素本身并不存在于文档中,只是基于元素的抽象,因此称作伪元素。

    伪元素选择器是CSS 中已经定义好的选择器,不能由用户随便起名,只能按CSS规定的标准格式使用。语法格式为:

    选择器:伪元素 { 属性: 值 }

    伪元素选择器在CSS中一直存在,但CSS3对伪元素进行了一定的调整,把选择器和伪元素之间冒号,由CSS1和CSS2.1中的一个冒号,改成了两个冒号。但是,为了向下兼容,现代浏览器仍然支持老的写法,因此,两种写法都是合法的。

    表 2-4 伪元素选择器
    选择器功能描述版本
    E:first-letter/E::first-letter选择E元素内的第一个字符1/3
    E:first-line/E::first-line选择E元素内的第一行1/3
    E:before/E::before在E元素之前插入由content属性生成的内容2/3
    E:after/E::after在E元素之后插入由content属性生成的内容2/3
    E::placeholder选择表单输入框文字占位符3
    E::selection选择被用户选取的元素3

    E: first-letter/E::first-letter

    E::first-letter 伪选择器用于选择E元素中的第一个字符,第一个字符包括 E::before 插入的内容。

    许多报刊或杂志的文章中,开篇第一个字都很大,通过首字放大来吸引读者的眼球。而这个首字放大的效果,就可以使用 E::first-letter 伪选择器来实现。如:

    
    
    1. p:first-child::first-letter {
    2.       font-size: 3em;
    3. }
    
    
    1. <p>许多报刊或杂志的文章中,…,就可以使用E::first-letter伪选择器来实现。 </p>
    2. <p>这里首先使用 …以免所有段落的第一个字都被放大。 </p>

    首先,使用 p:first-child选择第一个段落,然后,再使用 E::first-letter 伪选择器。这样的话,只有第一个段落中的第一个字是正常字体的3倍,以免所有段落的第一个字都被放大。

    运行结果如图 2‑8 所示:

    首字放大图2-8 首字放大

    E: first-line/E::first-line

    E::first-line伪选择器用于选择E元素中的第一行文本。第一行是指在浏览器中显示的第一行文本,如果调整浏览器窗口的尺寸,第一行的内容会跟着变化。第一行的内容包括E::before和E::after插入的内容。如,让段落的第一行文本以红色显示:

    
    
    1. p::first-line {
    2.     color: red;
    3. }
    
    
    1. <p>E::first-line伪选择器用于…第一行的内容会跟着变化。</p>

    运行结果如图 2‑9 所示:

    改变首行文本颜色图2-9 改变首行文本颜色

    E::before/E::after

    使用 E::before和E::after 伪元素选择器,可以很方便地为页面添加一些令人难以置信的设计效果。它们可以跟 content 属性结合使用,来创建所谓的生成内容,并将生成的内容插入到元素E的前面或后面。E::before和E::after的作用相同,只是插入位置不同而已。

    尽管生成的内容不会成为DOM的一部分,但同样可以通过CSS来格式化生成的内容。可以设置生成内容的颜色、字体、背景颜色、背景图像(包括渐变)、宽度、高度、边框、圆角等样式。如果未设置样式,则生成的内容会继承元素自身的可继承属性。

    使用E::before和E::after的好处是,可以直接通过CSS向页面添加内容,而不必在页面上增加HTML元素。可插入的内容包括:

    1)文本

    通过 content 属性来指定待插入的文本,文本会原封不动输出,即便文本中包含HTML标记也不例外。如,在一个段落的前后,分别插入指定的文本:

    
    
    1. p::before {
    2. color: #00f;
    3. content: "<strong>段落之前插入的内容</strong>,";
    4. }
    5. p::after {
    6. color: #f00;
    7. content: ",段落之后插入的内容";
    8. }
    
    
    1. <p>段落文本</p>

    由于生成的内容不会成为DOM的一部分,因此,这些HTML标记仅仅作为纯文本显示在页面上。运行结果如图 2‑10 所示:

    段落前后插入文本图2-10 段落前后插入文本

    2)文本符号

    生成内容中,有一种特殊形式,就是文本符号,如双引号、单引号、括号等。在一个元素前后插入文本符号的方法为:

    首先,在元素样式中,通过 quotes 属性来定义文本符号的内容。quotes 属性的值必须是一对字符串,中间用一个或多个空格分开,第一个串定义了开始符号(open-quote),第一个串定义了结束符号(close-quote)。因此,以下三种声明中,只有第一个是合法的:

    
    
    1. cite { quotes: '“' '”'; }
    2. cite { quotes: '“'; }
    3. cite { quotes: '”'; }

    由于文本符号是字符串,所以,要用引号把字符串包围起来,可以使用双引号,也可以使用单引号。事实上,文本符号可以是任意字符串。因此,以下声明都是合法的:

    
    
    1. cite { quotes: "{" "}"; }
    2. cite { quotes: '(' ')'; }
    3. cite { quotes: 'start' 'end'; }

    然后,把 content 属性的值设置为 open-quote 和 close-quote,就可以在元素的前面和后面分别插入由 open-quote 和 close-quote 定义的文本符号。如:

    
    
    1. cite { quotes: '“' '”'; font-style: normal; }
    2. cite::before { content: open-quote; }
    3. cite::after  { content: close-quote; }
    
    
    1. <p>子在川上曰:<cite>逝者如斯夫</cite></p>

    上述的代码,在引文的两侧分别添加双引号。运行结果如图 2‑11 所示:

    插入文本符号图2-11 插入文本符号

    因为不同的语言有不同的文本符号,如中文使用全角引号,英文使用半角引号。所以,使用 quotes 属性来确定使用什么文本符号是有道理的。

    当然,quotes 属性可以支持任意多层嵌套引用模式。通常的做法是,先以双引号开头,内层嵌套的引用使用单引号。如:

    
    
    1. cite { quotes: '“'  '”' '‘'  '’'; font-style:normal;}
    2. cite::before { content:open-quote; }
    3. cite::after  { content:close-quote; }
    
    
    1. <p>《水调歌头·游泳》:<cite>子在川上曰:<q>逝者如斯夫</q></cite></p>

    上述的代码,外层引文使用双引号,内层引文使用单引号。运行结果如图 2‑12 所示:

    文本符号嵌套图2-12 文本符号嵌套

    CSS2.1规范还规定,如果引号的嵌套层数大于已定义的引号对数,更深层次的嵌套,将使用最后一对引号。

    3)外部资源

    使用E::before和E::after选择器,不仅可以插入文本,也可以插入外部资源,如图片。插入外部资源时,需要在 content 属性中,通过url来指定资源的路径。

    如,上一节中根据文件类型,显示相应文件类型的图标的例子,也可以使用E::before伪元素选择器来实现:

    
    
    1. a { display:block; padding:4px; font-size:14px; }
    2. a::before { padding-right:10px; }
    3. a[href $= "doc"]::before { content: url('img/doc.gif'); }
    4. a[href $= "xls"]::before { content: url('img/xls.gif'); }
    5. a[href $= "ppt"]::before { content: url('img/ppt.gif'); }
    6. a[href $= "pdf"]::before { content: url('img/pdf.gif'); }
    7. a[href $= "rar"]::before { content: url('img/rar.gif'); }
    8. a[href $= "wmv"]::before { content: url('img/wmv.gif'); }

    如果浏览器出于某种原因不支持所指定的资源,如插入SVG,但该浏览器不能识别SVG,此时,浏览器就会忽略该资源,不插入任何内容。

    虽然CSS2.1规范规定,可以通过 url 属性来插入音频、视频或浏览器支持的其他任何资源。但目前为止,还没有任何浏览器支持。

    4)元素的属性值

    除了文本和外部资源,也可以插入元素的某个属性值。插入属性值时,需要在content属性中,通过 attr 来指定元素的属性名称。

    如,为了方便用户查看外部链接的地址,可以把页面上的每个外部链接的 href 属性值显示在链接的后面:

    
    
    1. a[href ^= "http://"]:after {
    2. content: " ["attr(href)"]";
    3. }
    
    
    1. <a href="http://www.waibo.wang/">歪脖网</a>

    上述代码的运行结果如图 2‑13 所示:

    插入属性值图2-13 插入属性值

    注意,如果插入的属性不存在,则会在相应的位置插入一个空字符串。另外,到目前为止,各浏览器对 attr 属性值的支持有限,并非任何属性都能支持。

    5)空内容

    如果设置content: "",则不插入任何内容。借助元素自身的特征,通过巧妙设置一些CSS属性,虽然在元素的前后没有插入任何内容,却可以实现很多非常有趣的效果。如:

    
    
    1. #gossip {
    2. width: 96px;
    3. height: 48px;
    4. background: #fff;
    5. border-color: #000;
    6. border-style: solid;
    7. border-width: 1px 1px 50px 1px;
    8. border-radius: 100%;
    9. position: relative;
    10. }
    11. #gossip:before {
    12. content: "";
    13. width: 12px;
    14. height: 12px;
    15. top: 50%;
    16. left: 0;
    17. position: absolute;
    18. background: #fff;
    19. border: 18px solid #000;
    20. border-radius: 100%;
    21. }
    22. #gossip:after {
    23. content: "";
    24. width: 12px;
    25. height: 12px;
    26. top: 50%;
    27. left: 50%;
    28. position: absolute;
    29. background: #000;
    30. border: 18px solid #fff;
    31. border-radius: 100%;
    32. }
    
    
    1. <div id="gossip"></div>

    上述代码将实现一个八卦图的效果。运行结果如图 2‑14 所示:

    插入空内容图2-14 插入空内容

    6)项目符号

    插入的内容还可以是列表的项目符号,只要 list-style-type 属性能支持的符号类型,均可插入。这是一个非常实用的功能。

    假如在写一篇文章,文章有各级标题,有时需要调整标题的顺序。如果每次调整顺序或增删标题后,都要人工重新调整编号,就极不方便。如果采用自动编号,那就方便多了。这种情况,就可以借助 content 属性,在标题前插入自动编号,省时省力。效果如图 2‑15 所示:

    章节自动编号图2-15 章节自动编号

    插入自动章节编号的具体方法,将在11.3.1节中详细介绍,这里不再赘述,先有个感性认识就可以了。

    E::placeholder

    E::placeholder伪选择器用于控制表单输入框占位符的外观,它允许设计师改变文字占位符的样式。默认情况下,占位符文字为浅灰色,无边框。目前所有的浏览器都不支持该选择器,需要添加浏览器私有前缀。如:

    
    
    1. input::-webkit-input-placeholder {
    2. color: #f00;
    3. border: 1px solid #00f;
    4. }
    
    
    1. <input  placeholder = "用户名" />

    上述代码,把占位符文本的颜色设置为红色,并为它添加了一个宽度为1像素的蓝色实线边框。运行结果如图 2‑16 所示:

    控制文本占位符样式图2-16 控制文本占位符样式

    E::selection

    E::selection选择器用于选择被选中的文本。可以使用该选择器,为被选中的文本设计一个与众不同的效果,如改变其背景色、前景色、文字阴影等。

    这里有一个文本输入框和一个p元素。当文本输入框处于被选中状态时,被选中文本的背景色将会变成绿色。

    
    
    1. input[type = text]::selection {
    2. background: #0f0;
    3. }
    
    
    1. <input  type="text" />

    上述代码的运行结果如图 2‑17 所示:

    改变被选中文本背景色图2-17 改变被选中文本背景色

    这里有一个段落,段落中被选中文本的背景色将会变成黑色,文本颜色会变成白色,并为文本添加了阴影。代码如下:

    
    
    1. p::selection {
    2. background: #000;
    3. color: #fff;
    4. text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
    5. }

    <p>鼠标选中这段文字后,文本的背景色将会变成黑色,文本颜色会变成白色,并为文本添加了阴影,快用鼠标选中试一试吧O(∩_∩)O~</p>

    上述代码的运行结果如图 2‑18 所示:

    改变被选中文本背景、前景、阴影图2-18 改变被选中文本背景、前景、阴影

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • CSS伪类及伪元素选择器,如超链接的a:link、a:visited、a:hover等等,本文整理了一些,喜欢的朋友可以收藏下
  • 伪类选择器和伪元素选择器

    千次阅读 2019-05-16 02:20:37
    我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下: 伪类选择器: 伪类选择器很简单的理解就是在某种特殊的状态下的样式,比如说“点击链接...

    我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下:

    伪类选择器:
    伪类选择器很简单的理解就是在某种特殊的状态下的样式,比如说“点击链接”这个状态下的样式。比如说“鼠标划过”这个状态下的样式。主流的伪类选择器有5种
    link 超链接点击之前
    visited 链接被访问过之后
    以上两种样式,只能用于超链接。
    动态伪类:针对所有标签都适用的样式。如下:
    hover “悬停”:鼠标放到标签上的时候
    active “激活”: 鼠标点击标签,但是不松手时。
    focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)
    别逼逼看代码:


    当鼠标划过的时候

    大家可以写一下代码试一下,更直观一些



    伪元素选择器:
    伪元素选择器使用后的效果是在不用伪元素选择器的情况下得通过创造一个新的的元素(标签)才能做到
    主要的伪元素选择器有以下几种:
    为某个元素的第一行文字使用样式。
    :first-line
    为某个元素中的文字的首字母或第一个字使用样式。
    :first-letter
    在某个元素之前插入一些内容。
    :before
    在某个元素之后插入一些内容。
    :after
    别逼逼看代码

    如果现在还对我的伪元素的定义不理解的话,想一想我们不用伪元素的话,什么样的方法可以实现上述效果

    展开全文
  • 23_伪元素选择器.html

    2021-10-14 19:45:41
    23_伪元素选择器.html
  • 伪元素选择器 1、E:before / E::before(规范写法) before选择器在被选元素的“内容”前面加上内容。用来和content属性一起使用。 格式 p::before{ content:"在p标签元素的内容前加了内容";/*记住一定要加""*/ ...

    关系选择器

    后代选择器(E F)

    选择所有被E元素包含的F元素,中间用空格隔开。

    子代选择器(E>F)

    选择所有作为E元素的直接子元素F,对孙元素不起作,用>表示

    相邻兄弟选择器(E+F)

    选择紧贴在E元素之后的F元素,用加号表示,选择相邻的第一个兄弟。

    通用兄弟选择器(E~F)

    选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开。

    属性选择器

    E[att]

    选择具有att属性的E元素

    E[att=“val”]

    选择具有att属性且值等于val的E元素

    E[att~=“val”]

    选择具有att属性的元素,且属性值列表中有一个符合val的元素

    E[att^=“val”]

    选择器E元素中有att属性,且以“val”开头

    E[att$=“val”]

    选择具有att属性且属性值以“val”结尾

    E[att*=“val”]

    选择具有att属性且属性值包含“val”字符串的E元素

    E[att|=“val”]

    选择具有att属性,并且属性值用“链接符隔开”,以val开头的元素(val为链接符前完整的前缀)

    伪类选择器

    前四个为链接伪类选择器,后面为结构选择器

    E:link

    设置超链接未被访问时的样式,限a标签

    E:visited

    设置超链接已被访问时的样式,限a标签

    E:hover

    鼠标悬停在元素上的样式,不限a

    E:active

    鼠标按下时的样式,不限a

    E:not(s选择器)

    匹配不含有s选择器的元素E

    E:first-child

    父元素的第一个子元素E,E元素必须是某个元素的第一个子元素才有效

    E:last-child

    父元素最后一个子元素E

    E:only-child

    E元素是唯一的子元素时被匹配

    E:empty

    匹配没有任何子元素(并且不包括text节点)的元素E

    E:checked

    常用,匹配用户界面上处于选中状态的元素E(用于input type为radio与checkbox时)

    E:nth-child()

    选中第几个子元素
    odd:奇 even:偶 n:所有 3n:3的倍数

    伪元素选择器

    1、E:before / E::before(规范写法)

    before选择器在被选元素的“内容”前面加上内容。用来和content属性一起使用。
    格式

    p::before{
    	content:"在p标签元素的内容前加了内容";/*记住一定要加""*/
    	color:red;
    	content:url("");/*可添加图片*/
    }
    

    2、E:after/E::after(规范写法)

    使用和before一样

    <!DOCTYPE html>
    <html>
    <head>
    	<title>伪对象选择器</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		p::before{
    			content:"选择器";
    			color:red;
    			/*content:url("../过渡与动画/1.jpg");*/
    
    		}
    		p::after{
    			content:"哈哈哈";
    			color:blue;
    
    		}
    	</style>
    </head>
    <body>
    	<p>伪对象</p>
    </body>
    </html>
    
    展开全文
  • 结构选择器介绍 结构选择器是用来处理一些特殊的效果。 结构选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
  • 关于伪元素选择器的使用说明 1、什么叫做伪元素选择器? 和元素选择器很像,但不是一个元素;伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)。 2、我们经常会用到伪元素选择器的情况? 情况一:当...

    关于伪元素选择器的使用说明

    1、什么叫做伪元素选择器?
    和元素选择器很像,但不是一个元素;伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)。
    2、我们经常会用到伪元素选择器的情况?
    情况一:当我们在浏览网页的时候,鼠标经过一些内容,其字体颜色和背景色需要发生改变,从而提升用户体验。
    情况二:当我们的在书写HTML代码和css代码的时候,当HTML代码书写完毕,我们想在文档中某个标签前面或者末尾批量添加某些内容的时候。
    情况三:首字母/词改变样式;首行改变样式的时候。
    3、对应的伪元素标签有哪些及其作用?
    ①::selection (鼠标选中内容发生改变,目前支持字体颜色和背景色)
    ②::before(在元素的开始需要操作某些东西的时候)
    ③::after(在元素的开始需要操作某些东西的时候)
    ④::first-letter (用于向某元素的第一个英文字母或第一个汉字添加样式)
    ⑤::first-line (用于向某个元素的第一行添加样式)
    4、代码样式及其展现内容(一般书写在单独的css样式表中)
    ①::selection
    代码书写格式
    在这里插入图片描述
    展现效果:

    在这里插入图片描述
    ②::before/after
    代码书写格式
    在这里插入图片描述
    展现效果
    在这里插入图片描述
    ③::first-letter (letter:书信/报纸 ps之前我们看到的报纸,首字母/汉字都会大写,在这里代表同样的意思)
    代码书写格式
    在这里插入图片描述
    展现效果
    在这里插入图片描述
    ④::first-line
    代码书写格式
    在这里插入图片描述
    展现效果
    在这里插入图片描述

    展开全文
  • css系列教程1—选择器全解css伪元素选择器伪元素选择器,用于选择元素内的局部,包括first-letter、first-line等代码如下:p:first-letter{ /* first-letter行内元素首字母 */ } p:first-line{ /* first-
  • css伪元素选择器before 和 after 的使用

    千次阅读 2019-02-07 22:49:05
    css3伪元素选择器before 和 after 的使用 前言:最近收集了一些关于before 和 after 的使用,汇总了一下,不全面,但是,希望便于以后自己查看。 :before 的作用:在子元素的最前面, 添加一个伪元素, 伪元素内容通过 ...
  • css伪类选择器与伪元素选择器区别

    千次阅读 2016-10-02 12:25:40
    选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。类的效果可以通过添加一个实际的类来达到。 a:link|...
  • :before 与 :after 分别在被选择元素的内容之前和内容之后插入元素,所以必须在双标签中使用伪元素选择器,在单标签中无效;使用伪元素选择器时必须要设置 content 属性来指定要插入的内容,若内容为空将其属性值...
  • CSS全称Cascading Style Sheet 层叠样式表。 CSS选择器 ... 一对多或者多对一的控制 ...2:元素选择器 a{} 3: class类选择器 .lei{} 4: 属性选择器 [type=redio]{} 5: id选择器 #id{} //一个i...
  • CSS伪元素选择器:before和:after

    千次阅读 2017-04-18 10:08:24
    CSS 中的伪元素选择器:before 和:after,按照其官方的说法,是在被选中的元素的内容之前插入内容。根据最近几次的实践,我觉得所谓被选中的元素,需要是能包含其他元素的元素,比如,,,等,他们之中可以插入其他的...
  • 元素选择器 例如: html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时...
  • CSS3的4大伪元素选择器详解

    千次阅读 2016-12-27 14:04:34
    在CSS3开发中,常见的伪元素选择器主要有4种,下面就和大家一起来扒一扒。 first-line伪元素选择器  我们在这个后面接着来写,我们写一个段落  在CSS中,主要有四个伪元素选择器  first-line伪元素选择器...
  • 伪类,用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:hover,表单元素的:disabled。 元素,如div、p、h1等,是实实在在存在的元素。 伪元素,是html中不...
  • 选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。类的效果可以通过添加一个实际的类来达到。 a:link|a:...
  • E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理 ...:before 伪元素选择器用于在被选元素...
  • 3.5结构选择器 (1)后代选择器:可以选择一个元素的后代元素,这个...(2)子元素选择器:某一个元素的直接后代。 (3)并选择器:将相同的样式放在一起,类名直接用英文逗号分隔 写法E,F   #myself d

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,340
精华内容 36,136
关键字:

伪元素选择器