精华内容
下载资源
问答
  • 结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
  • 选择器和伪元素选择器可以为文档中非具体存在的结果指定样式,或者为某些元素(包括文档本身)的状态指定样式,它会根据某种条件而非文档结构应用样式。 伪选择器的使用方法如下: HTML标记 伪类名{伪类名:...
  • 主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
  • 无论是伪还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3,两者都已经是推荐标准。
  • 类选择器伪元素

    千次阅读 2018-07-04 15:02:16
    伪类选择器什么是伪类伪类就是与一样能够定义样式,但却不是真正意义上的。 不是真正意义上的?也就是说你可以在css中定义它的样式,就像定义一样,但是你在HTML中不能找到该伪类的踪影。 HTML中没有伪类...

    伪类选择器

    什么是伪类?伪类就是与类一样能够定义样式,但却不是真正意义上的类。
    不是真正意义上的类?也就是说你可以在css中定义它的样式,就像定义类一样,但是你在HTML中不能找到该伪类的踪影。
    HTML中没有伪类的踪影,那它是如何实现样式的呢?浏览器会在后台向这些伪类增加和删除元素。

    对于<a>元素,我们可以用“多重人格”来形容它。对于该标签,它一共有五种状态:link, :visited, :hover, :focus, :active.

    “:link”可以用于声明未访问状态链接的样式;
    “:visited”可以用于声明已经访问链接的样式;
    “:hover”可以用于声明鼠标悬停在链接上的样式;
    “:focus”可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接);
    “:active”可以用于声明浏览器点击链接的样式。

    注意:冒号前后不要出现空格。

    常见伪元素

    ::first-letter,::first-line,::before,::after,::selection

    ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。
    这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。
    所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。

    举例:网站有些联系电话,希望在它们前加一个icon☎,就可以使用:before伪元素,如下:

    <!DOCTYPE html>
    <meta charset="utf-8" />
    <style type="text/css">
        .phoneNumber::before {
        content:'\260E';
        font-size: 15px;
    }
    </style>
    <p class="phoneNumber">12345645654</p>


    这些特殊字符的html,js和css的写法是不同的,具体可查看这里

    伪类/伪元素一览表

    • 伪类

      SelectorMeaningCSS
      :active选择正在被激活的元素1
      :hover选择被鼠标悬浮着元素1
      :link选择未被访问的元素1
      :visited选择已被访问的元素1
      :first-child选择满足是其父元素的第一个子元素的元素2
      :lang选择带有指定 lang 属性的元素2
      :focus选择拥有键盘输入焦点的元素2
      :enable选择每个已启动的元素3
      :disable选择每个已禁止的元素3
      :checked选择每个被选中的元素3
      :target选择当前的锚点元素3
      :first-of-type选择满足是其父元素的第一个某类型子元素的元素3
      :last-of-type选择满足是其父元素的最后一个某类型子元素的元素3
      :only-of-type选择满足是其父元素的唯一一个某类型子元素的元素3
      :nth-of-type(n)选择满足是其父元素的第n个某类型子元素的元素3
      :nth-last-of-type(n)选择满足是其父元素的倒数第n个某类型的元素3
      :only-child选择满足是其父元素的唯一一个子元素的元素3
      :last-child选择满足是其父元素的最后一个元素的元素3
      :nth-child(n)选择满足是其父元素的第n个子元素的元素3
      :nth-last-child(n)选择满足是其父元素的倒数第n个子元素的元素3
      :empty选择满足没有子元素的元素3
      :in-range选择满足值在指定范围内的元素3
      :out-of-range选择值不在指定范围内的元素3
      :invalid选择满足值为无效值的元素3
      :valid选择满足值为有效值的元素3
      :not(selector)选择不满足selector的元素3
      :optional选择为可选项的表单元素,即没有“required”属性3
      :read-only选择有"readonly"的表单元素3
      :read-write选择没有"readonly"的表单元素3
      :root选择根元素3

    注意:p:first-child表示选择的元素既要是p标签,同时要是其父元素的第一个子元素,不要错误认为是表示p元素的第一个子元素;同理,p:first-of-type表示选择的元素要是p标签,同时要是其父元素的第一个p标签元素;其他类似的伪类含义相似。

    • 伪元素

      SelectorMeaningCSS
      ::first-letter选择指定元素的第一个单词1
      ::first-line选择指定元素的第一行1
      ::after在指定元素的内容前面插入内容2
      ::before在指定元素的内容后面插入内容2
      ::selection选择指定元素中被用户选中的内容3

    展开全文
  • 3.5结构选择器 (1)后代选择器:可以选择一个元素的后代元素,这个...(2)子元素选择器:某一个元素的直接后代。 (3)并选择器:将相同的样式放在一起,类名直接用英文逗号分隔 写法E,F   #myself d

    3.5结构选择器

    (1)后代选择器:可以选择一个元素的后代元素,这个后代元素包括儿子,孙子,以及后代结构。

    <<style type="text/css">

            .content a{

                font-size: 25px;

            }

    (2)子元素选择器:某一个元素的直接后代。

    (3)并选择器:将相同的样式放在一起,类名直接用英文逗号分隔

    写法E,F


     

    #myself div{
        background-color: green;

    空格号:选中所有后代

    +号:选中他的第一个弟弟

    ~号:选中他所有弟弟

    >号:选中第一代后代

    3.7通配符选择器

    通配符选择器可以选中页面所有的标签

    注意:通配选择器对页面所有的元素都会设置对应的样式,但是实际上,有很多元素默认是不带任何的样式       

    3.8兄弟选择器   

    E+F;    选中最近的“弟弟”元素。不选中自己

    3.9伪类,伪元素选择器

    1.伪类

    (1)根据元素不同的状态,自动选择不同的样式

    (2)直接添加一个class,给这个class设定特殊的样式

     Li:first-child


    分别是点击前,点击后,放置在上面,点击的那一刻(ctrl+左键) 两个以上同时出现时,必须先定义link属性

    2.伪元素选择器

       2.1需要设置特殊效果的内容放到一个元素(标签) 里面span

       2.2在添加一个class,对class设置特色样式。

    展开全文
  • 选择器和伪元素选择器

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

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

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


    当鼠标划过的时候

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



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

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

    展开全文
  • 四种css 伪类选择器

    2020-12-13 06:08:43
    X:after  Example Source Code :.clearfix:after {content: “”;...:after伪类与content结合使用,用于往元素类追加内容。:after伪类还有个妙用:用于产生阴影,点击这里查看。X:hover  Example S
  • CSS选择器伪类选择器元素

    千次阅读 2021-01-16 18:38:44
    CSS选择器伪类选择器元素) :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元素 :last-of-type ...

    CSS选择器之伪类选择器(元素)

    :first-child 选择某个元素的第一个子元素(IE6不支持)

    :last-child 选择某个元素的最后一个子元素

    :first-of-type  [CSS3]选择一个上级元素下的第一个同类子元素

    :last-of-type  [CSS3]选择一个上级元素的最后一个同类子元素

    :only-child  [CSS3]如果某个元素是父元素中唯一的子元素,那将会被匹配(IE6-8不支持)

    :only-of-type  [CSS3] 如果某个元素是父元素中唯一的子元素,那将会被匹配  选择一个元素是它的上级元素的唯一一个相同类型的子元素(IE6-8不支持)

    :nth-child()  [CSS3]选择某个元素的一个或多个特定的子元素(IE6-8不支持)

    :nth-last-child()   [CSS3]选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算(IE6-8不支持)

    :nth-of-type()    [CSS3]选择指定的元素(IE6-8不支持)

    :nth-last-of-type()   [CSS3]选择指定的元素,从元素的最后一个开始计算(IE6-8不支持)

    first、last和only伪类选择器

    <body>

    <p>($1)这个段落是其父元素(body)的首个子元素。</p>

    <h1>欢迎访问csdn的博客</h1>

    <p>($2)这个段落不是其父元素的首个子元素,也不是其父元素的最后一个子元素。</p>

    <div>

    <p>($3)这个段落是其父元素(div)的首个子元素。</p>

    <p>($4)这个段落是其父元素(div)的最后一个子元素。</p>

    </div>

     

    <nav>

    <ul>($4)这个是ul元素,是父元素(nav)的首个子元素。。</ul>

    <p>($5)这个段落是其父元素(nav)的段落子元素中的首个子元素。</p>

    <p>($6)这个段落是其父元素(nav)的段落子元素中的最后一个子元素。</p>

    <ul>($7)这个是ul元素,是父元素(nav)的最后一个子元素。。</ul>

    </nav>

     

    <div>

    <p>($8)这个段落是其父元素(div)的唯一一个子元素。</p>

    </div>

     

    <nav>

    <span>这个span也是父元素(nav)的一个子元素</span>

    <p>($9)这个段落不是其父元素(nav)的唯一一个子元素。</p>

    </nav>

     

    <p>($10)这个段落是其父元素(body)的最后一个子元素。</p>

    </body>

     

    p:first-child { background:red; } 原理:首先p会筛选出页面所有的<p>标签,:first-child再从这些<p>标签中选中是其父元素的首个子元素的<p>标签,应用{ background:red; }这个样式。对于上面的例子,则会给$1、$3和$8添加红色的背景色。

    p:last-child { background:yellow; } 流程是一样的,对于上面的例子则会给$4、$8、$9和$10添加黄色的背景色。

    p:first-of-type { background:red; } 与:first-child比较,除了在$1、$3和$8添加红色的背景色外,$5和$9也将会被添加红色的背景色。原理:首先p会筛选出页面所有的<p>标签,:first-of-type再从这些<p>标签中选中排在第一位的<p>标签。通俗的讲,:first-of-type很强势,只要某个标签(比如div标签)内含有<p>标签,它不管怎么样都会选择一个,选择的这个<p>标签是div标签中第一个出现的。

    p:last-of-type { background:yellow; } 流程是一样的,对于上面的例子则会给$4、$6、$8、$9和$10添加黄色的背景色。

    p:only-child { background:red; } 原理:首先p会筛选出页面所有的<p>标签,然后一一确认这些<p>标签哪些没有任何的兄弟元素。对于上面的例子$8是没有任何的兄弟的元素的,因此会被添加红色的背景色。

    p:only-of-type { background:red; } 与:only-child比较,除了$8以外,$9也会被添加红色的背景色。原理就不做讲解了,参照:first-of-type。

    nth伪类选择器

    <!DOCTYPE html>

    <html><head>

    <style>

    p { width:50px;float:left;text-align:center;border:1px solid gray; }

    </style>

    </head>

    <body>

    <h1>CSDN博客</h1>

    <p>$1</p><p>$2</p><p>$3</p><p>$4</p><p>$5</p>

    <p>$6</p><p>$7</p><p>$8</p><p>$9</p><p>$10</p>

    </body></html>

    先看看伪类添加之后,会产生什么样的效果。比如下述nth伪类:

    p:nth-child(odd) { background:red; } 加入之后效果如下图所示(odd是奇数的意思):

     

    有意思的事情发生了,为什么不是奇数的段落背景色为红色呢?先放下这个问题,再来看看下面这个伪类:p:nth-of-type(odd) { background:red; },显示效果如下图所示:

    原理(上例):nth-child是计算body中所有的子元素(包括h1),然后按照奇偶进行排列,那么“第一个”p标签的顺序标号成为了“2”。而nth-of-type则不同,它是计算body中所有的标签为p的子元素,其他的子元素它不管,然后按照奇偶进行排列。

    至于:nth-last-child()和:nth-last-of-type()原理也是一样的,不过它计算的方式,是倒序的。关于这两个伪类就不多展开了。

    虽然不展开:nth-last-child()和:nth-last-of-type(),但是nth-child还有东西需要展示一下,比如这个伪类p:nth-child(2n+1) { background:red; },显示效果与p:nth-child(odd) { background:red; }是一模一样的,这里就不贴图了。

    其中需要说的是这个n,写成2i+1,行不行?不行!浏览器认不出来,浏览器只认识n。当然这是规则,就不深究了,下面要继续讨论的是,它只能进行奇偶选择吗?再来看看这个伪类:

    p:nth-child(3n+1) { background:red; } 渲染的结果如下图所示:

    因为有h1这个标签在,所以这里计算起来有点不太好理解,下面去掉h1那个标签。看看下图:

     

    原理:n是从0开始取值,逐个代入。3n+1的结果就是 1、4、7、10、13……当然例子这里没有那么多元素。当然也可以试试:p:nth-child(5n+1) { background:red; } 等等。

    甚至可以试试下面这些伪类:

    p:nth-child(-n+5) { background:red; }

     

    p:nth-child(n+5) { background:red; }

     

    p:nth-child(n) { background:red; }

     

    对于nth-of-type、nth-last-child和nth-last-of-type的玩法也脱离不了上面的这些东西,只不过是计算的元素标签的集合不同,计算的开始位置不同。写再多也是重复,就不展开了。

     

     

     

     

     

     

     

     

     

     

    展开全文
  • CSS伪伪元素选择器,如超链接的a:link、a:visited、a:hover等等,本文整理了一些,喜欢的朋友可以收藏下
  • 元素选择器 例如: html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时...
  • CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素。接下来通过本文给大家介绍CSS3 :default伪类选择器使用简介,感兴趣的朋友跟随脚本之家小编一起看看吧
  • ,用于向某些选择器添加特殊的效果。用伪定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:hover,表单元素的:disabled。 元素,如div、p、h1等,是实实在在存在的元素。 伪元素,是html中不...
  • CSS全称Cascading Style Sheet 层叠样式表。 CSS选择器 ... 一对多或者多对一的控制 ...2:元素选择器 a{} 3: class选择器 .lei{} 4: 属性选择器 [type=redio]{} 5: id选择器 #id{} //一个i...
  • css伪类伪元素域高级选择器的介绍,需要的朋友可以参考一下
  • 伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的来达到。 a:link|a:...
  • 伪类选择器的简单介绍

    千次阅读 2019-11-24 22:47:54
    一、伪类选择器介绍 伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式。 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中的元素...
  • 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用。 CSS提供的伪元素选择器有如下几个: first-letter:对指定对象的第一个字符起作用。 first-line:对指定对象的第一行内容起作用。 before:与内容...
  • css3的强大,让人惊叹,今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式,具体的详细示例可以参考下文,希望对大家有所帮助
  • 今天终于开始学前端了,以前一直被其他...选择器指定了对哪些网页元素进行样式设置,选择器可以是HTML标签名、元素的类名、元素的ID名等。而且根据选择器的构成形式可以将选择器分为基本选择器和复合选择器。 将CSS...
  • 伪元素选择器

    2014-12-14 16:18:32
    主要讲的是css3中新增加的选择器,伪元素选择器
  • 伪元素选择器 1、E:before / E::before(规范写法) before选择器在被选元素的“内容”前面加上内容。用来和content属性一起使用。 格式 p::before{ content:"在p标签元素的内容前加了内容";/*记住一定要加""*/ ...
  • /伪元素选择符/选择器 深入了解: 一、伪选择符/选择器 CSS伪是用来添加一些选择器的特殊效果。 就是给某个元素后面加上冒号然后加上需要的特殊修饰词 选择到所需要的效果,或者是元素。 ①元素...
  • NULL 博文链接:https://onestopweb.iteye.com/blog/2262510

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,936
精华内容 35,974
关键字:

伪类元素选择器