精华内容
下载资源
问答
  • css伪类选择器
    2020-08-13 01:17:40

    css伪类选择器

    Learn about the CSS :root pseudo-class selector, and how you might want to use it in your projects!

    了解CSS :root伪类选择器,以及如何在项目中使用它!

    The CSS :root pseudo-class selector is used to select the highest-level parent of a given specification. In the HTML specification, the :root is essentially equivalent to the html selector.

    CSS :root伪类选择器用于选择给定规范的最高级别的父级。 在HTML规范中, :root本质上等效于html选择器。

    In the CSS snippet below the :root and html styles will do the same thing:

    :roothtml样式下面CSS代码段中,将执行相同的操作:

    :root {
      background-color: gray;
    }
    
    html {
      background-color: gray;
    }

    If you noticed I said :root is essentially equivalent to the html selector. In fact, the :root selector has more authority than html. This is because it’s actually considered a pseudo-class selector (like :first-child or :hover).

    如果您注意到我说的话, :root本质上等效于html选择器 。 实际上, :root选择器比html具有更多权限。 这是因为它实际上被视为伪类选择器(例如:first-child:hover )。

    As a pseudo-class selector, it has more authority/higher specificity than tag selectors:

    作为伪类选择器,它比标记选择器具有更多的权限/ 更高的特异性

    :root {
      background-color: blue;
      color: white;
    }
    
    html {
      background-color: red;
      color: white;
    }

    Despite the html selector coming after, the :root selector still wins, thanks to its higher specificity!

    尽管html其后的是html选择器,但:root选择器仍然胜出,这归功于其更高的特异性!

    交叉规格 (Cross-Specification)

    In the HTML specification, the :root pseudo-class targets the highest-level parent: html.

    在HTML规范中, :root伪类指定了最高级别的父类: html

    Since CSS is also designed for SVG and XML you can actually use :root and it will just correspond to a different element.

    由于CSS也是为SVGXML设计的,因此您实际上可以使用:root ,它将仅对应于另一个元素。

    For example, in SVG the highest-level parent is the svg tag.

    例如,在SVG中,最高级别的父级是svg标签。

    :root {
      fill: gold;
    }
    
    svg {
      fill: gold;
    }

    Similar to HTML, the :root and svg tags select the same element, however the :root selector will have higher specificity.

    与HTML相似, :rootsvg标记选择相同的元素,但是:root选择器将具有更高的特异性。

    实际用途 (Practical Uses)

    What are the practical uses for :root? As we covered earlier, it’s a safe substitute for the html selector.

    :root的实际用途是什么? 如前所述,它是html选择器的安全替代品。

    This means you can do anything you’d normally do with the html selector:

    这意味着您可以执行通常使用html选择器执行的任何操作:

    :root {
      margin: 0;
      padding: 0;
      color: #0000FF;
      font-family: "Helvetica", "Arial", sans-serif;
      line-height: 1.5;
    }

    If you’d like, you can refactor this code to use CSS Custom Properties to create variables at the global level!

    如果愿意,可以重构此代码以使用CSS自定义属性在全局级别创建变量!

    :root {
      margin: 0;
      padding: 0;
      --primary-color: #0000FF;
      --body-fonts: "Helvetica", "Arial", sans-serif;
      --line-height: 1.5;
    }
    
    p {
      color: var(--primary-color);
      font-family: var(--body-fonts);
      line-height: var(--line-height);
    }

    The added benefit of using :root instead of html is that you can style your SVG graphics! 🤯

    使用:root代替html的附加好处是您可以设置SVG图形的样式! 🤯

    :root {
      margin: 0;
      padding: 0;
      --primary-color: #0000FF;
      --body-fonts: "Helvetica", "Arial", sans-serif;
      --line-height: 1.5;
    }
    
    svg {
      font-family: var(--body-fonts);
    }
    
    svg circle {
      fill: var(--primary-color);
    }

    For extensive documentation on the :root pseudo-class selector, visit the Mozilla Developer Network

    有关:root伪类选择器的大量文档,请访问Mozilla开发人员网络。

    翻译自: https://www.digitalocean.com/community/tutorials/css-root-pseudo-class

    css伪类选择器

    更多相关内容
  • css伪类选择器

    2022-07-16 07:58:39
    链接伪类选择器、结构伪类选择器、目标伪类选择器

    伪类选择器用于向某些选择器添加特殊的效果。使用冒号“:”

    链接伪类选择器

    • :link 未访问的链接
    • :visited 已访问的链接 (已经点击过的链接)
    • :hover 鼠标移到连接上
    • :active 选定的链接(点击不松开鼠标时显示的状态)

    写的时候尽量按照这个顺序,助记:“ lv 包包 hao”

    示例代码

    css:

    a:link {
    
      color: red;
    
    }
    
    a:visited {
    
      color: green;
    
    }
    
    a:hover {
    
      color: pink;
    
    }
    
    a:active {
    
      color: blue;
    
    }
    

    html:

    <a href="https://bilibili.com">b站</a>
    

    (请自己复制代码运行一下,这个不方便截图)

    实际应用

    实际应用中,不会设置这么多种属性,一般设置:link和:hover就好,会采取标签选择器和链接伪类选择器的结合

    a{
    	font-size:16px;
    	color:gray;
    }
    a:hover{
    	color:red;
    }
    

    结构(位置)伪类选择器

    • :first-child 选取属于其父元素的首个子元素的指定选择器
    • :last-child 选取属于其父元素的最后一个子元素的指定选择器
    • :nth-child(n) 匹配属于其父元素的第n个子元素,不论元素的类型(另:可以用odd表示所有第奇数个子元素,even表示第偶数个子元素。)
    • :nth-last-child(n) 同上,但是是从最后一个子元素开始计数

    目标伪类选择器

    :target 可用于选取当前活动的目标元素

    这样说有点抽象,上代码

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>Document</title>
    
        <style>
    
            :target{
    
                color:red;
    
            }
    
            a:visited{
    
                color:green;
    
            }
    
        </style>
    
    </head>
    
    <body>
    
        <h2>目录</h2>
    
        <hr/>
    
        <a href="#content1">内容1</a>
    
        <br/>
    
        <a href="#content2">内容2</a>
    
        <h3 id="content1">内容1</h3>
    
        <hr/>
    
        <pre>
    
        《电工技术》是工科专业本科生的工程基础课程。
    
        课程对电路和电工技术的主要知识点给出引导性原理介绍和工程应用介绍。
    
        通过本课程的学习,学生掌握电工技术的基本概念和基本分析方法,能分析简单的直流、正弦交流和一阶动态电路,了解变压器和电机的原理和分析方法。
    
        课程培养学生的分析和解决基础电路问题的能力,为后续相关专业课程的学习提供必要的基础和引导。
    
        课程具体内容包括:电路基本概念,直流电路与正弦交流电路的分析方法,三相电路分析,电路暂态分析,磁路的基本概念与变压器的分析方法,电动机工作原理与控制方法介绍。
    
        </pre>
    
        <h3 id="content2">内容2</h3>
    
        <hr/>
    
        《电工技术》SPOC课程依托于北京交通大学电路分析MOOC课程资源,由北京交通大学电信学院国家级电工电子教学团队电路分析课程组全体教师精心打造。
    
        课程主要讲述了直流电路分析、动态电路时域分析、正弦交流相量分析等共6个单元的内容。
    
        教学环节主要包括视频讲授、单元测验、单元作业、讨论、答疑等。
    
      
    
    </body>
    
    </html>
    

    效果:
    效果





    在点了内容2之后,页面会跳转到内容2的部分,此时内容2字体变红。
    若点击内容1,则内容1字体变红,内容2字体恢复原本状态。



    (打卡第15天!)
    展开全文
  • CSS伪类选择器

    万次阅读 多人点赞 2021-11-01 13:35:22
    CSS选择器有很多种,有一种选择器,与其他选择器完全不同,我们来讲一讲这个选择器——伪类选择器 伪类选择器 我们伪类选择器有几种,我们来看看第一种 静态伪类: 只能用于超链接的样式 :link超链接点击之前 ...

    CSS的选择器有很多种,有一种选择器,与其他选择器完全不同,我们来讲一讲这个选择器——伪类选择器

    伪类选择器

    伪类选择器:用来描述一个元素的特殊状态!比如第一个元素、某个元素的子元素、鼠标点击的元素

    我们伪类选择器有几种,我们来看看第一种

    静态伪类: 只能用于超链接的样式

    • :link 超链接点击之前
    • :visited 链接被访问过之后

    以上两种样式,只能用于超链接

    实际用法还得实际分析,我们来看看这一张图:

    这里我写了两个超链接,看我箭头指的文章,你会发现这两个超链接颜色不一样

    为什么会不一样呢?

    因为第一个链接,是我访问过的网站链接

    而第二个链接,我的浏览器没有访问过,系统会默认给访问过与没访问过的超链接显示不同的颜色

    我们访问一下试试,看看他会不会变色

     访问过后,第二个超链接的颜色也变成了第一个一样了

    那么我们想让没访问过的链接显示其他颜色呢?

    这时候就需要我们的伪类选择器上场了,我们在style标签里面用css伪类选择一下

    我们使用link来选择没有访问过的超链接

    <style>
            a:link{color: aqua;}
    </style>

    注意,我们的伪类选择器是使用“:”来连接

    我们在添加一个超链接,也是没有访问过的网址

    我们看看效果

     这里,我们通过伪类选择器的link对没有访问过的网址进行颜色改变

    而访问过的链接颜色没有变化

    当我们访问之后,他也就不会被link选中了,所以访问过后,是这样的

     到这,有人就问了,访问之前可以被选择,那我想要访问后的链接也变色可不可以呢?

    当然可以,事物都有对立一面,编程也一样,可以选择访问之前的超链接,那就肯定可以选择访问之后的超链接

    我们写个访问之后的选择,让它变成其他颜色

    <style>
            a:link{color: aqua;}
            a:visited{color: chartreuse;}
    </style>

    下面那个a:visited就是另一个选择属性了,他会选择被访问过的超链接

    我们看看被访问过的超链接有没有变色

    最后,再补充一点,看看这张图!

     我这里使用一个字体属性,将:visited选择中的字体变大,可是字体并没有改变,这是为什么呢???

    因为为了保护隐私,我们的:visited只能改变颜色属性,其他都都不能改变,但是如果我改变:link选择的字体,将会是这样的

     不管是访问过还是没有访问过的链接,他都改变了字体!这个区别记住就可以,我这里给个测试代码,大家运行对比一下效果

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>伪类选择器</title>
    
        <style>
            a:link{color: aqua;font-size: 10px;}
            a:visited{color: chartreuse;font-size: 50px;}
        </style>
    </head>
    <body>
        <h1>伪类选择器</h1>
        <h2>静态伪类</h2>
        <p>什么是静态伪类?</p>
        <a href="https://blog.janyork.com/">我的博客</a>
        <a href="https://hao.360.com/">360导航</a>
        <a href="https://qq.com/">腾讯网</a>
        <a href="https://google.com">GooGle</a>
    </body>
    </html>

     这是,两个静态的伪类选择,我们还有一些其他状态的伪类选择

    我们继续讲几个

    动态伪类:针对所有标签都适用的样式

    • :hover “悬停”:鼠标放到标签上的时候
    • :active “激活”: 鼠标点击标签,但是不松手时。
    • :focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)

    我们经常看到一些网页,可以让鼠标的样式在其中发生改变,也就是说,我们这种标签,是对于鼠标产生效果

    比如,我要写一个鼠标悬停变色,我就得用伪类选择器的:hover来选择,我们来写一个

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <title>伪类选择器</title>
        <style>
            h3:hover{color: cyan;font-size: 25px;}
        </style>
    </head>
    <body>
        <h2>伪类选择器</h2>
        <h3>静态伪类选择</h3>
        <h3>动态伪类选择</h3>
        <h3>其他伪类选择</h3>
    </body>
    </html>

    这里有三个h3标签,我们使用hover对他进行选择

        <style>
            h3:hover{color: cyan;font-size: 25px;}
        </style>

    当我们鼠标移动到标题时,标题会变成天蓝色,字体变成25个像素大小

    比如这样

     然后我们还可以看看第二个属性

    :active可以让你鼠标点击但是不松开时显示你的CSS效果

    我们也来写一下,直接加在上面的代码里面

        <style>
            h3:hover{color: cyan;font-size: 25px;}
            h3:active{color:darkmagenta;font-size: 10px;}
        </style>

    这时,只要我在标题上按住左键,他就变成紫红色,字体缩小到10个像素大小

    是不是觉得很好玩呢?

     那么我们现在就玩一玩剩下的:focus选择

    这个可没什么意思了,他是针对于输入框等其他内容的,这里我演示不了,大家可以去W3里面试试这个效果:

    CSS :focus 伪类 (w3school.com.cn)icon-default.png?t=L9C2https://www.w3school.com.cn/cssref/pr_pseudo_focus.asp#:~:text=%3Afocus%20%E4%BC%AA%E7%B1%BB%E5%9C%A8%E5%85%83%E7%B4%A0%E8%8E%B7%E5%BE%97%E7%84%A6%E7%82%B9%E6%97%B6%E5%90%91%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E7%89%B9%E6%AE%8A%E7%9A%84%E6%A0%B7%E5%BC%8F%E3%80%82%20%E6%B3%A8%E9%87%8A%EF%BC%9A%20IE%20%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E6%94%AF%E6%8C%81%E6%AD%A4%E5%B1%9E%E6%80%A7%E3%80%82%20%E8%BF%99%E4%B8%AA%E4%BC%AA%E7%B1%BB%E5%BA%94%E7%94%A8%E4%BA%8E%E6%9C%89%E7%84%A6%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A0%E3%80%82,%E4%BE%8B%E5%A6%82%20HTML%20%E4%B8%AD%E4%B8%80%E4%B8%AA%E6%9C%89%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E7%84%A6%E7%82%B9%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86%EF%BC%8C%E5%85%B6%E4%B8%AD%E5%87%BA%E7%8E%B0%E4%BA%86%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E5%85%89%E6%A0%87%EF%BC%9B%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%EF%BC%8C%E5%9C%A8%E7%94%A8%E6%88%B7%E5%BC%80%E5%A7%8B%E9%94%AE%E5%85%A5%E6%97%B6%EF%BC%8C%E6%96%87%E6%9C%AC%E4%BC%9A%E8%BE%93%E5%85%A5%E5%88%B0%E8%BF%99%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%E3%80%82%20%E5%85%B6%E4%BB%96%E5%85%83%E7%B4%A0%EF%BC%88%E5%A6%82%E8%B6%85%E9%93%BE%E6%8E%A5%EF%BC%89%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%9C%89%E7%84%A6%E7%82%B9%EF%BC%8C%E4%B8%8D%E8%BF%87%20CSS%20%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%B9%89%E5%93%AA%E4%BA%9B%E5%85%83%E7%B4%A0%E5%8F%AF%E4%BB%A5%E6%9C%89%E7%84%A6%E7%82%B9%E3%80%82大家可以试试上面两个效果,不想亲自写可以复制我的,打开就可以观察属性变化了

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <title>伪类选择器</title>
        <style>
            h3:hover{color: cyan;font-size: 25px;}
            h3:active{color:darkmagenta;font-size: 10px;}
            h3:focus{color: green;font-size: 30;}
        </style>
    </head>
    <body>
        <h2>伪类选择器</h2>
        <h3>静态伪类选择</h3>
        <h3>动态伪类选择</h3>
        <h3>其他伪类选择</h3>
    </body>
    </html>

    其他伪类选择

    我们有时候会用到一些像列表一样的结构,比如这样

    <ui>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>

    如果我们想让它的第一个标签变色呢?该怎么选择?

    有人说,那多简单啊,加个class或者id都可以

    但是,当我将第一行删去,第二行就变成第一行,那此时第二行没有id,也没有class,那就不会变色,但是我要求第一行始终是我要的效果啊!

    那,这个时候,就可以用我们的伪类选择器来写了,这次我们用一些平常不怎么用的选择属性

    我们可以这样写,先看代码再分析

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>其他伪类选择</title>
        <style>
            li:first-child{color: green;}
        </style>
    </head>
    <body>
        <ui>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>
    </body>
    </html>

    这里我们使用:first-child选择li标签第一个元素,让他变成绿色,注意了,他是始终选择第一行

    我们看看效果:

     这个时候,我们删掉第一行,此时第二行变成了第一行

     此时,这个第一行仍然是绿色

    那么有人就问了,可不可以让最后一个标签也始终有CSS的效果?当然可以!

    我们使用:last-child可以达到这个效果,我这里就不做演示了,自己尝试

    那既然这样也可以,又有人问了,我想让他其他行数保持属性呢?或者说我想让他单数行或者双数行改变属性呢?

    当然,也可以实现,我们还要一个选择器——:nth-child()

    这个选择器有一个(),这个括号是干嘛的?当然是填你要改变的行数的,比如,改变所有行数样式可以这样:nth-child(n)

    改变第2行的颜色就是这样写:

    li:nth-child(2){color: mediumvioletred;}

    当然,既然括号里面可以指的数字,那我岂不是可以玩玩算法,我可以这样li:nth-child(2n)

    还真没错,真可以,效果是这样的

     那么,既然可以怎么玩,那么剩下的就自己研究吧!不过,其实选择单数双数有更简单的,不需要2n

    Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)

    所以,这样就可以:

    :nth-child(odd)
    :nth-child(even)

    不多说,大家自己去多试试吧!

    嘿嘿嘿!别以为就这样完了,我再说个让伪类选择更简单的选择

    我们上面的选择都是直接选择,但是我们还有一种伪类选择,可以反选,什么是反选?就是除了我选中的,其余都执行CSS效果

    这个选择器就是 li:not(),这个括号里面填需要排除的元素,比如我需要让除第一个元素,其他元素都变红色,我可以这样写

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>其他伪类选择</title>
        <style>
            li:not(li:first-child){color: orangered;}
        </style>
    </head>
    <body>
        <ui>
            <!-- <li>one</li> -->
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>
    </body>
    </html>

    这样就选择了li标签中除了li:first-child的所有元素,效果是这样的:

     最后,你有没有发现,我这个ui、标签里面全都是li标签,所以我每次都是选择li标签,但是我要是再里面加入其他标签,他也还是只改变li标签,比如这样:

     这个CSS效果没有让第一个元素变色,也没有让第一个li标签变色,像这样的情况,我们就应该用另一个选择方式——:first-of-type

    这个是直接选择父元素标签内指定标签的第一个元素,这样这个CSS效果就不会像上面那个一样失效

    所以,有时候写代码,发现CSS失效,可以看看是不是这个原因

    好了,伪类的选择器就讲到这,下次再说一说伪元素

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

    2020-12-13 06:08:43
    X:after  Example Source Code :.clearfix:after {content: “”;...:after伪类与content结合使用,用于往元素追加内容。:after伪类还有个妙用:用于产生阴影,点击这里查看。X:hover  Example S
  • css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之的了,因为这些在平时中是常用到的伪选择器,现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪 我们把":enabled",":disabled",":...
  • css伪类选择器的使用

    千次阅读 2021-08-04 07:38:06
    伪类选择器,在不同情况下显示的css伪类选择器在处理页面的美观是很大帮助。其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要。名字实例说明:linka:link选择所有未被访问的链接:visiteda:...

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助。其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要。

    名字

    实例

    说明

    :link

    a:link

    选择所有未被访问的链接

    :visited

    a:visited

    被访问的链接

    :active

    a:active

    所有活动的链接

    :hover

    a:hover

    鼠标所在的链接

    :focus

    Input:focus

    获得焦点的input的css

    :first-letter

    P:first-letter

    P元素的首字母样式

    :first-line

    P:first-line

    P元素的首行样式

    :first-child

    P:first-child

    选择属于父元素的第一个子元素的每个

    元素。

    :before

    P:before

    P元素之前插入信息

    :after

    P:after

    P元素之后插入信息

    :lang(langugae)

    P:lang(it)

    选择以it开头的所有p元素

    :first-of-type

    P:first-of-type

    选择属于其父元素的首个  

    元素的每个

    元素。

    :last-of-type

    P:last-of-type

    选择属于其父元素的最后  

    元素的每个

    元素。

    :only-of-type

    P:only-of-type

    选择属于其父元素唯一的  

    元素的每个

    元素。

    :only-child

    P:only-child

    选择属于其父元素唯一子元素的所有p元素

    :nth-child(n)

    P:nth-child(2)

    选择属于其父元素的第二个子元素的每个

    元素。

    :nth-last-child(n)

    P:nth-last-child(2)

    从最后一个元素开始计数,选择属于其父元素的第二个子元素的每个

    元素。

    :nth-of-type(n)

    P:nth-of-type(2)

    选择属于其父元素的第二个p元素的每个p元素

    :nth-last-of-type(n)

    P:nth-last-of-type(2)

    从最后开始计数的选择属于器父元素第二个p元素的每个p元素

    :last-child

    P:last-child

    选择其父元素的最后一个元素的每个p元素

    :root

    :root

    根元素的css

    :empty

    P:empty

    选择没有子元素的每个p元素,包含文本信息

    :target

    #new:target

    当前活动的#new元素

    :enabled

    Input:enabled

    选择每个启用的input元素

    :disabled

    Input:disabled

    选择每个禁用的input元素

    :checked

    Input:checked

    选择被选择的input元素

    :not(selector)

    :not(p)

    选择非p元素的元素

    ::selection

    ::selection

    选择被用户选取的部分元素

    列举实例:

    /* 未被访问时,正常情况下*/

    a:link{color: #ff3324;}

    /*点击后时的状态*/

    a:visited{color: #1E7DB9;}

    /*活动的链接*/

    a:active{color: #24d432;}

    /*鼠标所在的链接*/

    a:hover{color:#fcc100;}

    #p1:before,#p2:before,#p3:before{

    content: '我是p元素的前方!';

    color:#b82929;

    }

    #p1:after,#p2:after,#p3:after{

    content: '我是p元素的后方!';

    color: #5eac6e;

    }

    -->

    #p1:before,#p2:before,#p3:before{ content: '我是p元素的前方!'; color:#b82929; }

    #p1:after,#p2:after,#p3:after{ content: '我是p元素的后方!'; color: #5eac6e; }

    你好,我是p1元素。

    你好,我是p2元素。

    你好,我是p3元素。

    你好,我是p1元素。

    你好,我是p2元素。

    你好,我是p3元素。

    p:first-child{

    color: #b82929;

    }

    你好!

    你好!

    f3794d91777d8570f13719fdbd44933d.png

    css hover伪类选择器与JQuery hover&lpar;&rpar;方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

    HTML&amp&semi;CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 & ...

    CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

    CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

    CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

    前端开发HTML&amp&semi;css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

    css之伪类选择器&colon;before &colon;after&lpar;&colon;&colon;before &colon;&colon;after&rpar;

    一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before  :after的区别:css3中修订后的伪元素使用:: ...

    关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

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

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

    随机推荐

    将HTML特殊转义为实体字符的两种实现方式

    前端开发工作中,经常需要将HTML的左右尖括号等转义成实体形式.我们不能把,&等直接显示在最终看到的网页里.需要将其转义后才能在网页上显示. 转义字符(Escape Sequ ...

    Expect安装方法

    Expect安装方法 http://bluethink.iteye.com/blog/1079044 Tcl脚本SSHITeyeUnix  Expect是基于Tcl语言的一种脚本语言,其实无论是交互还 ...

    Linux文件锁定保护命令chattr介绍

    chattr命令的用法:chattr [ -RV ] [ -v version ] [ mode ] files- 最关键的是在[mode]部分,[mode]部分是由+-=和[ASacDdIijsTt ...

    Linux Oracle服务启动&amp&semi;停止脚本与开机自启动&lbrack;转&rsqb;

    在CentOS 6.3下安装完Oracle 10g R2,重开机之后,你会发现Oracle没有自行启动,这是正常的,因为在Linux下安装Oracle的确不会自行启动,必须要自行设定相关参数,首先先介 ...

    Memcache在&period;Net中的使用

    一.Memcache基本概念(socket服务器) 本质:是一个在内存上存储的hash表,key的最大值是255字符,最长过期时间为30天 特点:惰性删除,没有监控数据过期的机制,实现最基本的key- ...

    Java语法基础学习DayTwelve(泛型)

    一.泛型(Generic)在集合中的使用 1.作用 (1)解决元素存储的安全问题 (2)解决获取数据元素时,需要类型强转的问题 2.代码案例 //在集合没有使用泛型的情况下 List list = n ...

    SOA&amp&semi;微服务&amp&semi;服务网格&amp&semi;高可用

    SOA 架构 SOA 全称是:Service Oriented Architecture,“面向服务的架构”. 它是一种设计理念,其中包含多个服务,服务之间通过相互依赖最终提供一系列完整的功能. 各个 ...

    &lbrack;转帖&rsqb;Ubuntu 安装VNC的一个方法

    来源: https://blog.csdn.net/CSDN_duomaomao/article/details/75270271 Ubuntu 16.04 LTS 安装VNC,在百度和谷歌找了很多教 ...

    FreeBSD NTP 简单使用

    FreeBSD NTP 简单使用 来源 https://blog.csdn.net/stevexk/article/details/1349506 1.ntptrace xxx.xxx.xxx.xxx ...

    Confluence 6 找到未使用的空间

    有时候,你希望找到你系统中没有使用的内容.有时候你也希望能够对这些内容进行更多的关注,但是如何找到一些有关长期不更新的页面,或者长期不使用的空间? View Space Activity 页面中的内容 ...

    展开全文
  • 伪类,用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:hover,表单元素的:disabled。 元素,如div、p、h1等,是实实在在存在的元素。 元素,是html中不...
  • 无论是伪类还是元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3,两者都已经是推荐标准。
  • 六、伪类选择器类选择器一起使用 示意图
  • 今天没上班,脑袋不太清晰,就简单给小白们讲一个很实用的css伪类选择器,这个在你们写导航或者其他列表的css时特别实用,而且利于后期维护。 这个选择器就是 元素:fist-child / last-child / nth-child(子节点...
  • 伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;层次选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;伪类选择器;...
  • css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器 链接伪类选择器:顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active,a:link表示的是未访问的链接,a:...
  • 结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
  • 一、X:nth-child(n) ...demo的用法是最简单的,X:nth-child()更强大的用处在于奇偶匹配,明河不展开讲,有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X
  • css选择器大全,css伪类选择大全,前置伪,后置伪,伪筛选,常用选择器,交集选择器
  • 让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、伪类选择器介绍 伪类选择器(简称:伪)通过冒号来定义,它定义了...
  • 如果说 css 作为前端开发的基本功, 那么 选择器 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们: ...
  • 比较简单又比较常用的是利用伪类选择器,在网页上也有很多用到这种效果,比如tips信息提示框。下面是自己写的实心三角形,原理其实很简单,代码都能看懂。 <!DOCTYPE html> <title></title> ...
  • CSS中常用的伪类选择器

    千次阅读 2022-04-10 11:29:36
    一 、伪类(不存在的,特殊的) -伪类用来描述一个元素的特殊状态 比如:第一个元素,被点击的元素,鼠标移入的元素··· -特点:一般请情况下,使用:开头 1、 :first-child 第一个子元素 2、 :last-...
  • css选择器有八种: 1、标签选择器(如:body,div,p,ul,li)。 2、.类选择器(如:class="head",class="head_logo") 。...7、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、vi
  • CSS——伪类选择器

    2021-11-01 16:58:03
    伪类选择器 1.定义:用来描述一个元素的特殊状态的一种不存在的选择器或特殊的选择器 2.特点:一般情况下都用:开头 3.类别: ① 根据所有的子元素排序 :first-child 第一个子元素 :last-child 最后一个子元素 :nth-...
  • :before 选择器在被选元素的内容前面插入内容。 其中的属性: content属性来指定要插入的内容。 W3School示例: p:before { content:"台词:-"; background-color:yellow; color:red; font-weight:bold; }
  • 今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器
  • before: 元素选择器用于在某个元素之前插入一些内容伪类选择器:before使用content属性插入字符、属性插入图片css3.p_before:before {content: 'H';color: #01B4EE;}.p_beforeImg {background: #eeeeee;width: 200...
  • CSS伪类选择器使用实例

    千次阅读 2018-03-14 16:08:58
    今天的小技巧主要是搞明白了CSS3新增的伪类选择器,并和之前的伪类选择器做比较~~~ 每一次看伪类选择器的介绍总有一种语文没学好的感觉,so只能上实例理解了~ 这次主要学习了 :first-of-type/:last-of-type/:only-...
  • css中的伪类选择器有哪些

    千次阅读 多人点赞 2021-03-26 00:08:34
    1 伪类选择器 ① 动态伪类选择器(5个) :link 选择地址没有被访问过的超链接元素 :visited 选择地址被访问过的超链接元素 :hover 选择鼠标悬停在上面的元素。 :active 选择鼠标在上面并且按键按下不松手的元素 :...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 75,635
精华内容 30,254
关键字:

css伪类选择器

友情链接: Stm32f4-master.zip