精华内容
下载资源
问答
  • 选择器和伪元素选择器
    千次阅读
    2019-05-16 02:20:37

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

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


    当鼠标划过的时候

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



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

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

    更多相关内容
  • 结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
  • 无论是伪还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors CSS Selector Level 3,两者都已经是推荐标准。
  • 分为状态性结构性选择器 ...伪元素选择器: p::before{ content: "终于找到你"; <!--在段落前添加内容--> } p::after{ content: "不舍离开你"; } p::first-line{ background-color: yellow...

     

    伪类分为状态性和结构性选择器 

     

     

    p:first-child{
    	background-color: red;
    }
    p:last-child{
    	background-color: blue;
    }

    伪元素选择器:

     

    p::before{
    	content: "终于找到你";   <!--在段落前添加内容-->
    }
    p::after{
    	content: "不舍离开你";
    }
    p::first-line{
    	background-color: yellow;
    }
    p::selection{
    	background-color: red;  <!--实时选中添加背景色,若打*则是页面任何一个内容都可以-->
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<link rel="stylesheet" type="text/css" href="03.css">
    </head>
    <body>
    	<p>诫子书
    (蜀)诸葛亮
    夫君子之行,静以修身,俭以养德。非淡泊无以明志,非宁静无以致远。夫学须静也,才须学也,非学无以广才,非志无以成学。淫慢则不能励精,险躁则不能治性。年与时驰,意与日去,遂成枯落,多不接世,悲守穷庐,将复何及!</p>
    <p>诫子书
    (蜀)诸葛亮
    夫君子之行,静以修身,俭以养德。非淡泊无以明志,非宁静无以致远。夫学须静也,才须学也,非学无以广才,非志无以成学。淫慢则不能励精,险躁则不能治性。年与时驰,意与日去,遂成枯落,多不接世,悲守穷庐,将复何及!</p>
    </body>
    </html>

    展开全文
  • 类和伪元素的区别 ,用户定义的类名,这个是具体的,看得见的,如div.div0,选择具有div0的div元素。 伪,用于向某些选择器添加特殊的效果。用伪定义的样式并不是作用在标记上,而是作用在标记的状态上...

    伪类和伪元素的区别

    • 类,用户定义的类名,这个类是具体的,看得见的,如div.div0,选择具有类div0的div元素。
    • 伪类,用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:hover,表单元素的:disabled。
    • 元素,如div、p、h1等,是实实在在存在的元素。
    • 伪元素,是html中不存在的元素,仅在css中用来渲染的,伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。如::before、::after。

    伪类选择器

    伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类通常表示的是一种“状态”。伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。

    anchor伪类

    如果设置a标签的四种状态,顺序必须是LVHA,即:link、:visited、:hover、:active。

    一般情况下只需要设置a标签的默认效果和鼠标划过的效果,a{}、a:hover{}。

    选择器示例示例说明
    :linka:link选择所有未访问链接
    :visiteda:visited选择所有访问过的链接
    :activea:active选择正在活动链接
    :hovera:hover把鼠标放在链接上的状态

    目标伪类选择器

    :target 超链接后目标样式,当使用超链接后,链接的目标可以用目标选择器设置,目标只有被跳转后才会显示对应的样式。

    a标签的href属性的值可以指向链接地址、标签的id,或者a标签的name。

    <style>
    :target  {
         font-size:20pt;
         border:1px solid gray;
    }
    div:target  {
         background-color:#ccc;
    }
    </style>
    <p><a href="#news1">按钮1</a></p>
    <p><a href="#news2">按钮2</a></p>
    
    <a name="news1">内容 1</a>
    <div id="news2">内容 2</div>
    

    当点击按钮2时,效果如下:
    在这里插入图片描述

    表单元素伪类选择器

    选择器示例示例说明
    :focusinput:focus选择元素输入后具有焦点
    :enabledinput:enabled匹配每个已启用的元素
    :disabledinput:disabled匹配每个被禁用的元素
    :checkedinput:checked匹配每个已被选中的 input 元素
    :requiredinput:required选择有"required"属性指定的元素属性
    :optionalinput:optional选择没有"required"的元素属性
    :read-onlyinput:read-only选择只读属性的元素属性
    :read-writeinput:read-write选择没有只读属性的元素属性
    :validinput:valid选择所有有效值的属性
    :invalidinput:invalid在表单元素中的值是非法时设置指定样式
    :in-rangeinput:in-range用于标签的值在指定区间值时显示的样式
    :out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性

    :in-range只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性;
    :invalid只作用于能指定区间值的元素,例如 |input 元素中的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等

    <style>
    input:in-range{border:2px solid yellow;}
    input:out-of-range{border:2px solid blue;}
    input:invalid{background-color: red;}
    input:valid{background-color: yellow;}
    </style>
    <input type="number" min="5" max="10" value="7" />
    <input type="email"/>
    

    结构伪类选择器

    选择器示例示例说明
    :first-childp:first-child匹配属于任意元素的第一个子元素的p元素
    :first-of-typep:first-of-type选择父元素中的第一个 p 元素
    :last-childp:last-child选择所有p元素的最后一个子元素
    :last-of-typep:last-of-type选择父元素中最后一个p元素
    :emptyp:empty匹配没有子元素(包括文本节点)的p元素
    :nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素
    :nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
    :nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
    :nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
    :only-childp:only-child选择所有仅有一个子元素,并且子元素是p元素
    :only-of-typep:only-of-type选择所有仅有一个子元素中为p的元素
     <style>
        p:first-child{color:red;}/*第一个元素是h1,所以没有选中*/
        p:first-of-type{color:blue;}
        p:nth-child(4){color:green;}/*第4个元素是span,所以没有选中*/
        p:nth-of-type(4){color:pink;}
        p:only-child{color:yellow;}/*选中了第7个p,但是样式被覆盖了*/
        p:only-of-type{color:orange;}/*选中了第7个和第8个p*/
    </style>
    <h1>标题1</h1>
    <p>第一个p</p>
    <p>第二个p</p>
    <span>文字内容</span>
    <p>第三个p</p>
    <p>第四个p</p>
    <p><i>文字内容</i>第五个p</p>
    <p>第六个p</p>
    <h5>标题5</h5>
    <div><p>第七个p</p> </div>
    <div><p>第八个p</p> <span>文字内容</span></div>
    <div><p>第九个p</p> <p>第十个p</p></div>
    

    页面效果如下:
    在这里插入图片描述

    否定伪类选择器

    选择器示例示例说明
    :not(selector):not§选择所有p以外的元素

    伪元素

    伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码)。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容。伪元素的由两个冒号::开头,然后是伪元素的名称。
    简单来说,伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。

    css3中伪元素选择器和css2中伪类选择器中, before和after是完全相同。

    伪元素只有以下几种:

    选择器示例示例说明
    ::first-letterp::first-letter选择器的首字母
    ::first-linep::first-line选择器的首行
    ::selectionp::selection被用户选取的部分
    ::beforep::before在选择器前增加内容
    ::afterp::after在选择器后增加内容

    content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。可以使用伪类+伪元素。

    div::after{content: url("./img/1.jpg");}
    div:hover::after{content: url("./img/2.jpg");}
    

    CSS样式权重

    css优先级规则:

    1、css选择规则的权重值不同时,权重值高的优先;
    2、css选择规则的权重值相同时,后定义的规则优先;
    3、css属性后面加 !importand 时,无条件绝对优先;

    权重值的计算:

    选择器权重值
    行内样式1000
    id选择器100
    class选择器/属性选择器/伪类10
    元素名/伪元素1

    第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;
    第二等级:代表 ID选择器,如 #id="", 权值为 0,1,0,0;
    第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;
    第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

    此外,通用选择器(*),子选择器(>), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;

    展开全文
  • 选择器和伪元素选择器可以为文档中非具体存在的结果指定样式,或者为某些元素(包括文档本身)的状态指定样式,它会根据某种条件而非文档结构应用样式。 伪选择器的使用方法如下: HTML标记 伪类名{伪类名:...
  • CSS全称Cascading Style Sheet 层叠样式表。 CSS选择器 ... 一对多或者多对一的控制 ...2:元素选择器 a{} 3: class选择器 .lei{} 4: 属性选择器 [type=redio]{} 5: id选择器 #id{} //一个i...

    CSS选择器

     什么是选择器:使用css对HTML页面中的元素实现一对一,
     一对多或者多对一的控制
    
    选择器的分类样式
    1:通用选择器*{}
    2:元素选择器a{}
    3: class类选择器.lei{}
    4: 属性选择器[type=redio]{}
    5: id选择器#id{} //一个id只能有一个对应的元素
    6:伪元素::before{}
    7:伪类:hover{}
    8:组合选择器:有四种组合方式 :后代选择器(以空格分隔)、子元素选择器(以大于号分隔)、相邻兄弟选择器(以加号分隔)、普通兄弟选择器(以破折号分隔)
    9:否定选择器:not(.lei){}

    其中比较容易弄混的就是伪元素选择器以及伪类选择器

    伪类:伪类存在的意义是为了通过选择器格式化DOM树以外的信息 (比如: <a> 标签的:link、:visited等。这些信息不存在于DOM树中。);还有不能被常规CSS选择器获取到的信息。(比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child来获取到。)只有一个:

    伪元素:本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式。伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码),伪元素不是节点,它不会出现在DOM树中,但是在显示上会具备节点的效果
    有两个::

    区别
    伪类与伪元素都是用于向选择器加特殊效果 ,伪类与伪元素的本质区别就是是否抽象创造了新元素 ,伪类只要不是互斥可以叠加使用, 伪元素在一个选择器中只能出现一次,并且只能出现在末尾

    说到选择器便涉及到一个优先级的问题:
    首先: !important>内联样式>内部样式>外部样式
    选择器的优先级中:最高的是ID选择器
    紧接着是:类选择器、属性选择器、伪类选择器
    再下来是:元素选择器、伪元素选择器
    最后是:其他选择器
    至于同级的选择器一般看在页面中出现的位置,后写的生效。

    选择器的权重计算:

    第一等:代表内联样式,如: style=” ”,权值为1000。
    第二等:代表ID选择器,如:#content,权值为0100。
    第三等:代表class,伪类和属性选择器,如.content,权值为0010。
    第四等:代表元素选择器和伪元素选择器,如div p,权值为0001。
    通配符、子选择器、相邻选择器等的。如*>+,权值为0000。
    继承的样式没有权值
    
    展开全文
  • 主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、activefocus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
  • 通过上面的解释,我们大概可以更加的分清伪选择器和伪元素选择器的不同,前者是给选择器里的东西添加效果,而后者则是给选择器本身添加的效果,我们可以这样理解,后者好像更高级一些,因为它作用的对象是需要有...
  • 类选择器和伪元素

    千次阅读 2018-07-04 15:02:16
    伪类选择器什么是伪类伪类就是与一样能够定义样式,但却不是真正意义上的。 不是真正意义上的?也就是说你可以在css中定义它的样式,就像定义一样,但是你在HTML中不能找到该伪类的踪影。 HTML中没有伪类...
  • 伪类选择器一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的来达到。 a:link|a:...
  • 四种css 伪类选择器

    2020-12-13 06:08:43
    X:after  Example Source Code :.clearfix:after {content: “”;...:after伪类与content结合使用,用于往元素类追加内容。:after伪类还有个妙用:用于产生阴影,点击这里查看。X:hover  Example S
  • CSS伪伪元素选择器,如超链接的a:link、a:visited、a:hover等等,本文整理了一些,喜欢的朋友可以收藏下
  • 给链接定义样式 a:link 表示尚未访问的链接,鼠标未划过点击 a:visited 表示已经访问的链接 a:hover 表示鼠标划入的链接 ...注意上面这四个链接的伪在...更多伪类和伪元素 :before 可以在指定元素的前面添加内容。比
  • 1. CSS选择器及其优先级 选择器 格式 优先级权重 id选择器 #id 100 选择器 .classname 10 ...伪元素选择器 li::after 1 相邻兄弟选择器 h1+p 0 子选择器 ul>li 0 后代选择器 li a 0 通配符选择...
  •  接下来的几个伪类选择器使用上非常类似,功能也比较接近。 :nth-child(n),用于匹配索引值为n的子元素。索引值从1开始。 X:nth-child()用法实际上有三种变化,demo的用法是最简单的,X:nth-child()更强大的用处...
  • 元素选择器 例如: html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时...
  • CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素。接下来通过本文给大家介绍CSS3 :default伪类选择器使用简介,感兴趣的朋友跟随脚本之家小编一起看看吧
  • css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之的了,因为这些在平时中是常用到的伪类选择器,现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
  • 3.5结构选择器 (1)后代选择器:可以选择一个元素的后代元素,这个...(2)子元素选择器:某一个元素的直接后代。 (3)并选择器:将相同的样式放在一起,类名直接用英文逗号分隔 写法E,F   #myself d
  • css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器 链接伪类选择器:顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active,a:link表示的是未访问的链接,a:...
  • 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用。 CSS提供的伪元素选择器有如下几个: first-letter:对指定对象的第一个字符起作用。 first-line:对指定对象的第一行内容起作用。 before:与内容...
  • css伪选择器与伪元素选择器区别

    千次阅读 2016-10-02 12:25:40
    伪类选择器一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的来达到。 a:link|...
  • 如何计算:计算选择符中 ID 选择器的个数(a),计算选择符中选择器、属性选择器以及伪选择器的个数之(b),计算选择符中标签选择器和伪元素选择器的个数之(c)。按 a、b、c 的顺序依次比较大小,大的则...
  • 结构伪类选择器

    2021-06-11 10:53:02
    属性选择器元素的属性,我们都知道是什么。例如下面代码中typevalue就是input元素的属性。属性选择器,顾名思义,就是通过属性来选择元素的一种方式。属性选择器 说明E[attr^="abc"] 选取了元素E,其中E元素定义了...
  • 伪元素选择器

    2014-12-14 16:18:32
    主要讲的是css3中新增加的选择器,伪元素选择器

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 99,495
精华内容 39,798
关键字:

伪类选择器和伪元素选择器