精华内容
下载资源
问答
  • 伪对象选择器
    2020-03-02 13:31:10

    伪对象(伪元素)选择器,一共5个,权重是1
    1) :after或者::after与content属性一起使用,定义在对象后的内容

                        div:after{content:”文字”}
                        div:after{content:url();}   
    

    2):before或者::before与content属性一起使用,定义在对象前的内容

                    div:before{content:”文字”}
                    div:before{content:url();}  
    

    3) :first-letter或者::first-letter定义对象内第一个字符的样式
    注: 该伪元素只能用于块元素

                    div:first-letter{}
    

    4) :first-line或者::first-line 定义对象内第一行的样式
    注: 该伪元素只能用于块元素

                        div:first-line  {}
    

    5) ::selection 选中之后的样式 只支持这background color属性

                    div::selection{} 
    

    注意点:
    前面的4个可以是双冒号也可以是单冒号, 但是::selection必须是双冒号

    伪类和伪对象选择器的区别

    1、伪类选择器只能是:,伪对象(伪元素选择器):也可以::
    2、伪类选择器的权重是10 伪对象选择器的权重是1
    3、伪类选择器分很多类,但是伪对象选择器就5个

    更多相关内容
  • CSS3的伪对象选择器

    2017-02-23 18:41:01
    经常会遇到的伪对象选择器主要有以下几个: 1 .:before 选择器在被选元素的内容前面插入内容。 2. :after 选择器在被选元素的内容后面插入内容。 下面我们是想在下面的div的前面和后面分别追加内容。  a ...

    在学习css3的过程中,我们会遇到伪对象这个名词,顾名思义伪对象不是真正的对象,但它和对象所表示的意思又十分相似。

    经常会遇到的伪对象选择器主要有以下几个:

    1 .:before  选择器在被选元素的内容前面插入内容。

    2. :after  选择器在被选元素的内容后面插入内容。

    下面我们是想在下面的div的前面和后面分别追加内容。

    <body>

      <div class="content">a</div>

    </body>

    此时css代码为:

    .content:before {

          content: 'a';

          color: #f40;

        }

      .content:after {

          content: 'c';

          color: #f40;

    }

    运行结果为


    在使用伪对象选择器的时候,我们要注意一点before after必须和content结合使用,即使没有内容插入也要写content=' '

    伪对象选择器在样式的编写中使用很多,这一点大家要知道的。

    展开全文
  • CSS3:伪对象选择器

    千次阅读 2015-12-24 15:08:46
    选择器在被选元素的内容前面插入内容。  :after 选择器在被选元素的内容后面插入内容。 注意:before 和after必须和content结合使用,即使没有内容插入也要写content=' ' 示例代码: #poem : ...

    1.   :before     选择器在被选元素的内容前面插入内容。

       :after     选择器在被选元素的内容后面插入内容。

    注意:before 和after必须和content结合使用,即使没有内容插入也要写content=' '

    示例代码:

    #poem:before{
        content: '最是那一低头的温柔,';
    }
    #poem:after{
        content: '不胜凉风的娇羞。';
    }

    <p id="poem">像一朵水莲花,</p>
    运行结果:



    2.小示例:

    #user{
        width: 300px;
        height: 30px;
        border: #24164c solid 1px;
        margin: auto;    /*div居中显示*/
        padding:0px;
        font-size: 14px;
    }
    #user input{
        width: 200px;
        height: 30px;
        margin: 0px;
        padding: 0px;
        vertical-align: middle;
        border:none;
    }
    #user:before{
        content: '';
        width: 31px;
        height: 24px;
        display: inline-block;        /*默认是行内显示,没有高度的,要通过display属性来使得宽高起作用*/
        background: url("icon1.PNG") no-repeat;
        vertical-align: middle;
        margin: 0 2px 0 5px;   /*上右下左*/
    
    }
    #user:after{
        content: '';
        width: 25px;
        height: 25px;
        display: inline-block;   /*只有添加了这个属性,背景图片才会显示出来*/
        background: url("icon2.png") no-repeat;
        vertical-align: middle;      /*居中对齐*/
        margin: 0 2px 0 20px;
    }
    <div id="user">
        <input type="text"  value="username">
    </div>
    运行效果:



    展开全文
  • CSS3选择器-- 元素选择器 元素选择器 01 元素选择器 所谓元素选择器,是针对CSS中已经定义好的元素使用的选择器。CSS中常用的元素选择器有:before元素选择器和:after元素选择器 :before选择器 :...
  • 选择符 用处简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 例如: ...元素选择器在实际开发中用的还是蛮多的,比如一些ico图标就可以用元素插入到其中...
    选择符用处简介
    ::before在元素内部的前面插入内容
    ::after在元素内部的后面插入内容

    例如:

    <style>
    p::before {
      	content: '你好,';
    }
    p::after {
      	content: '迪迦奥特曼';
    }
    </style>
    
    <p>我是:</p>
    /*最后就会组成一句话:你好,我是:迪迦奥特曼*/
    

    伪元素选择器在实际开发中用的还是蛮多的,比如一些ico图标就可以用伪元素插入到其中,就不用再新建一个类元素了。
    注意点:
    before和after必须有content属性;
    before在内容前面,after在内容后面;
    before和after会创建一个元素,但属于行内元素;
    在dom里看不见before和after创建的元素,所以叫伪元素;
    伪元素和标签选择器一样,权重都是1。

    展开全文
  • 选择器元素选择器的区别

    千次阅读 2021-10-28 10:27:48
    通过上面的解释,我们大概可以更加的分清选择器元素选择器的不同,前者是给选择器里的东西添加效果,而后者则是给选择器本身添加的效果,我们可以这样理解,后者好像更高级一些,因为它作用的对象是需要有...
  • 在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的...3、常用的复合选择器包括:后代选择器、子选择器、并集选择器选择器等等
  • 本篇主要介绍css对边框(border)的属性控制和链接(link)的选择器. 边框(border): css控制的边框属性包括border-width, border-color, border-style. Border之所以让人很困惑主要源于IE5错综复杂的BUG, 由于IE5是...
  • CSS选择器种类: ①。标记类型选择器 ②。包含关系选择器 ③。类选择器
  • CSS结构选择器

    万次阅读 多人点赞 2018-01-11 20:08:37
    结构选择器 结构选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。 表 2-6 结构选择器 选择器 功能描述 版本 E:last-...
  • 元素选择器 1、E:before / E::before(规范写法) before选择器在被选元素的“内容”前面加上内容。用来和content属性一起使用。 格式 p::before{ content:"在p标签元素的内容前加了内容";/*记住一定要加""*/ ...
  • 选择器 3. 标签选择器 根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。 示例代码 <style type="text/css"> p{ color: red; } </style> <
  • jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS选择器语法是相同的都以冒号(:)开头。按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性...
  • first-line选择器用来指定选择器第一行的样式。:first-line是元素,它生成包含元素的第一个格式化行的元素。:first-line样式表示元素中的第一行文本,无论该行中可能出现多少个词。:first-line只能附加到块级...
  • $ 函数不管使用选择器选中了几个元素,$函数的返回值都是一个对象数组) jq选择器是jq最核心的内容,大大简化的了DOM对象的查询 css1-css3的选择器,都可以当做$函数的参数,如下: Id选择器: $(#box); Class...
  • 旧时我们经常给父元素添加一个带有clear:both的块级子元素,这种方法给多个盒子清除浮动时,会创造出大量无用块级元素,增加服务器压力,而使用after元素添加子元素(转化成块级元素)清除浮动,创造的子元素并不...
  • CSS3 结构选择器(全)

    千次阅读 2019-10-30 23:17:57
    CSS3 结构选择器 1.结构选择器 ???? 结构类可以根据文档结构关系来匹配特定的元素。结构类主要包括一下几种: 命令 注释 :first-child 匹配第一个子元素 :last-child ...
  • WEB前端 -- CSS类、元素选择器

    千次阅读 2017-11-27 18:28:39
    一、选择器 类通过冒号(:)进行定义,它定义了元素的状态,如点击按下、点击完等。以前都是直接操作元素的样式,现在可为元素的状态改样式,看上去更“动态”。 类一般反映无法在CSS中轻松或可靠检测到的...
  • 结构选择器

    2017-07-13 20:16:58
    a) first-child:用来选取结构中的第一个元素,格式:结构名称 匹配对象:first-child{样式声明} b) last-child:用来选取结构中的最后一个元素,格式:结构名称 匹配对象:first-child{样式声明} c) nth-child...
  • CSS中元素、选择器 元素选择器 元素选择器只能针对CSS中已有的元素起作用。 CSS提供的元素选择器有如下几个: first-letter:对指定对象的第一个字符起作用。 first-line:对指定对象的第一行...
  • 元素选择器

    千次阅读 2019-07-23 10:19:11
    :hover 关键字 “:” 代表选择器选择器本质是用来选择对象的 :: 关键字“::”选择器本质上是插入了一个元素或者说插入了一个盒子,元素选择器默认插入的是Inline(行内元素) <!...
  • :target 选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。 单个url(单个target)处理: HTML代码: <p><a href="#ex">显示按钮</a></p> <div class="example...
  • 一、元素选择符(Element Selectors) 其中,常用的选择符有 ID选择符(#...描述:选定所有对象。 <style> /* 选定页面所有元素(含body/html) */ *{ color:cadetblue; } </style> <h1>title</...
  • QSS对象选择器

    千次阅读 2018-06-11 13:45:26
    选择器决定了 style sheet 作用于哪些 widget,QSS ...选择器 Subcontrol 选择器 很多时候,可以使用不同的选择器实现相同效果的样式,使用非常灵活。 通用选择器 作为选择器,作用于所有的 widget。 类型...
  • CSS伪选择器

    2019-08-28 15:00:53
    伪选择器是一种特殊的选择器,它分为伪类选择器和伪对象选择器2种。 1.伪类选择器 CSS提供了五种基本伪类选择器,分别对应HTML标记的五种状态。 伪类选择器 作用 应用对象 :hover 定义标记在鼠标悬停(划过)时的...
  • 伪元素(伪对象)和伪类的区别?

    千次阅读 2018-10-29 15:47:58
    其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。 伪元素/伪对象:不存在在DOM...伪对象选择符 Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 ...
  • CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中...
  • 伪类选择器使用:,伪对象选择器使用::,因为兼容旧版,所以伪对象使用:也能解析。 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关...
  • 伪选择器包括伪类和伪对象选择器,伪选择器以冒号(:)作为前缀标识符。冒号前可以添加选择器,限定伪类应用的范围,冒号后为伪类和伪对象名,冒号前后没有空格,否则将错认为类选择器: 单纯式,E:pseudo-class{...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 84,358
精华内容 33,743
关键字:

伪对象选择器

友情链接: STM32_SP2.rar