精华内容
下载资源
问答
  • html伪类选择器

    2020-03-25 10:03:48
    什么是伪类选择器? CSS伪类(pseudo-class)是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字 当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类。 伪类选择器有...

    什么是伪类选择器?
    CSS伪类(pseudo-class)是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字
    当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类。
    伪类选择器有哪些?
    一:伪类选择器之状态类
    :checked该伪类表示表单元素被选中的状态,可以用于单选按钮,复选框等元素上。
    :hover 该伪类表示鼠标箭头放在被选中的元素上的状态,可以用于任意元素上,用来设置鼠标悬停样式
    :active 该伪类表示表单元素、链接等元素被激活的状态,此处被激活的概念比较特殊(对于输入框而言,是鼠标左键按下且未抬起的时候;对于a元素,也是鼠标左键按下且未抬起的时候)
    :focus 该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发
    示例代码:

     <style>
            .exp1:checked+span{
               color: red;
            }
            /*单选按钮被选中的时候男变成红色*/
            .exp2:focus{
                background-color: sienna;
            }
            /*向文本框内输入字体的时候背景颜色改变*/
            a{
                font-size: 18px;
            }
            a:link{
                color:black ;
            }
            /*链接未被访问的时候是黑色*/
            a:visited{
                color: gray;
            }
            /* 链接被访问过后变成灰色 */
            a:hover{
                color: blue;
            }
            /* 鼠标悬停的时候是蓝色 */
            a:active{
                color:red ;
            }
            /* 链接被激活的时候是红色 */
    </style>
    
    <body>
        <form action="">
            <input type="radio"class="exp1" name="check"><span>男</span>
            <input type="radio" name="check">女
            <input type="text" class="exp2">
        </form>
        <a href="http://www.baidu.com">百度一下,你就知道</a>
    </body>


    /*单选按钮被选中的时候男变成红色*/
     
    /*向文本框内输入字体的时候背景颜色改变*/
     
    /*链接未被访问的时候是黑色*/
     
    /* 鼠标悬停的时候是蓝色 */
     
     /* 链接被激活的时候是红色 */
     
    /* 链接被访问过后变成灰色 */
     

    注意:a标签的样式顺序,不可颠倒。可简记为l v h a (love and hate)
    二:伪类选择器之结构类
    :nth-child(n) 选择器匹配父元素的第n个元素,元素类型没有限制
    示例代码:

    <style>
            div:nth-child(2n){
                color: red;
            }
            /* 选中偶数标签,将其颜色变为红色 */
    </style>
    
    <body>
        <div>1</div>
        <p>2</p>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </body>

    结果
     
    因为第二个是p标签所以不变色

    :nth-of-type(n) 选中匹配伪类选择器前标签的第n个元素,其他标签不占位

    示例:

     <style>
            div:nth-of-type(2n){
                color: red;
            }
            /* 选中div的偶数标签,将其颜色变为红色 */
    </style>
    <body>
        <div>1</div>
        <p>2</p>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </body>


    :nth-last-child(n)匹配父元素的倒数第n个元素

    示例:

     <style>
            div:nth-last-child(2){
                color: red;
            }
            /* 选中倒数第二个标签且要是div,将其颜色变为红色 */
    </style>
    <body>
        <div>1</div>
        <p>3</p>
        <div>2</div>
        <div>4</div>
        <p>5</p>
        <div>6</div>
    </body>

     


    :nth-last-of-type(n) 选中匹配伪类选择器前标签的倒数第n个元素,其他标签不占位

    示例:

     <style>
            div:nth-last-of-type(2){
                color: red;
            }
            /* 选中倒数第二个div标签,将其颜色变为红色 */
    </style>
    
    <body>
        <div>1</div>
        <p>3</p>
        <div>2</div>
        <div>3</div>
        <p>4</p>
        <div>5</div>
    </body>


    其他诸如:first-child、:first-of-type、:last-child、:last-of-type等等
    三:伪类选择器之属性类
    该选择器选择伪类前选择器所选中的元素中间包含attr属性的元素(attr属性名称)
    [attr=val]:选择attr属性值被赋值为val的所有元素(相等)
    [attr~=val]:选择attr属性中包含值为val的所有元素(包含)
    [attr^=val]:选择attr属性的值以val开头的元素

    [attr$=val]:选择attr属性值以val结尾的元素

    [attr*=val]:选择attr属性值中包含字符val的所有元素

    示例代码:

    <style>
            div[class="box1"]{
                color: red;
            }
            /* div[class~="box1"]{
                color: blue;
            } */
    </style>
    
    <body>
        <div class="box1 box2">box1 box2</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
    </body>

    结果:

    =符号要属性名全部等于指定名称所以没有变色

    对比:

    <style>
          /* div[class="box1"]{
                color: red;
            } */
            div[class~="box1"]{
                color: blue;
            }
    </style>
    
    <body>
        <div class="box1 box2">box1 box2</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
    </body>

    ~只要属性中包含box1即可

    最后附上CSS3新增伪类:

    :enabled

    :disabled 控制表单控件的禁用状态。

    :checked,单选框或复选框被选中。

    :before在元素之前添加内容,也可以用来做清除浮动

    :after在元素之后添加内容

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

    展开全文
  • HTML伪类选择器

    2020-07-16 17:53:59
    伪类选择器:向某些选择器添加效果。 语法: 选择器:伪类{ declaration1; declaration2; … } 类型 link:向未被访问过的链接添加样式。 <a href="http://www.baidu.com">百度一下</a> <style> ...

    伪类选择器:向某些选择器添加效果。
    语法:
    选择器:伪类{
    declaration1;
    declaration2;

    }

    类型

    link:向未被访问过的链接添加样式。

    <a href="http://www.baidu.com">百度一下</a>
    
    <style>
    	span{
    		background-color: blue;
    	}
    </style>
    	
    <style>
        a:link{
    	    background-color: red;
        }
    </style>
    

    在链接未被访问过时背景色为红色,访问过一次以后背景色变为蓝色。
    visited:向已被访问的链接添加样式。

    <a href="http://www.baidu.com">百度一下</a>
    
    <style>
    	span{
    		background-color: blue;
    	}
    </style>	
    		
    <style>
    	a:visited{
    		background-color: red;
    	}
    </style>
    

    在链接未被访问过时背景色为蓝色,访问过以后背景色变为红色。
    hover:当鼠标悬浮在元素上方时,向元素添加样式。

    <a href="http://www.baidu.com">百度一下</a>
    
    <style>
    	span{
    		background-color: blue;
    	}
    </style>	
    		
    <style>
    	a:hover{
    		background-color: red;
    	}
    </style>
    

    当鼠标不放置在链接上时背景色为蓝色,放在链接上时背景色变为红色。
    active:向被激活的元素添加样式。

    <a href="http://www.baidu.com">百度一下</a>
    
    <style>
    	span{
    		background-color: blue;
    	}
    </style>	
    		
    <style>
    	a:active{
    		background-color: red;
    	}
    </style>
    

    当该链接不被点击时背景色为蓝色,在鼠标点击而不松开时背景色为红色。
    注意:若四种伪类选择器一起使用,顺序为link,visited ,hover ,active。

    展开全文
  • }与hover相关的伪类:● :hover 选择器可用于所有元素,不仅是链接。● :link 选择器设置了未访问过的页面链接样式,● :visited 选择器设置访问过的页面链接的样式● :active选择器设置当你点击...

    :hover选择器用于选择鼠标指针浮动在上面的元素。当鼠标悬停在元素上时,可使用此选择器设置元素的样式;它可用于每个元素。

    749affe49a69

    image

    语法:

    element :hover{

    CSS样式;

    }

    与hover相关的伪类:

    ● :hover 选择器可用于所有元素,不仅是链接。

    ● :link 选择器设置了未访问过的页面链接样式,

    ● :visited 选择器设置访问过的页面链接的样式

    ● :active选择器设置当你点击链接时的样式

    说明:为了产生预期的效果,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

    示例1:在悬停在元素上时更改背景颜色。

    h1:hover {

    color: white;

    background-color: plum;

    }

    悬停文本

    效果图:

    749affe49a69

    1.gif

    示例2:在文本上悬停时显示隐藏的块

    div {

    background: plum;

    width: 250px;

    height: 50px;

    padding: 20px;

    font-size: 30px;

    color: white;

    display: none;

    margin: auto;

    text-align: center;

    }

    h1:hover + div {

    display: block;

    }

    悬停文本

    一段测试文本!

    效果图:

    749affe49a69

    2.gif

    展开全文
  • 选择器的优先级table{background-color:rgb(255,230,0);}table{background-color:rgb(255,0,0);}tr{background-color:rgb(174,0,255);}.cls{background-color:rgb(9,255,0);}#idcls{background-...

    4b44104714bee8f5143d5292d291edb7.png

    实例

    html>

    选择器的优先级

    table {

    background-color: rgb(255, 230, 0);

    }

    table {

    background-color: rgb(255, 0, 0);

    }

    tr {

    background-color: rgb(174, 0, 255);

    }

    .cls {

    background-color: rgb(9, 255, 0);

    }

    #idcls {

    background-color: rgb(0, 26, 255);

    }

    1111
    2222
    3333
    4444
    5555
    6666

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    4e4a4ad1b1b94ddf0ec40af293315d88.png

    实例

    html>

    实例演示前端组件样式模块化的原理与实现

    我是头部内容

    首页

    动态

    产品

    导航

    我是主体内容

    我是页脚内容

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    6ebef0d28b97db8f27aa10a34d45b98e.png

    实例

    html>

    实例演示常用伪类选择器的使用方式

    .ulstyle > li:nth-of-type(1) {

    background-color: salmon;

    }

    .ulstyle > li:nth-of-type(2) {

    background-color: rgb(3, 142, 235);

    }

    .ulstyle > li:last-of-type {

    background-color: rgb(114, 250, 143);

    }

    .ulstyle > li:nth-last-of-type(3) {

    background-color: rgb(53, 66, 247);

    }

    .ulstyle ol:only-of-type {

    background-color: rgb(172, 9, 136);

    }

    /* 伪类选择 */

    /* 选择任何一个: : nth-of-type(n) */

    /* 选择第一个: :first-of-type */

    /* 选择最后一个: : last-of-type */

    /* 选择倒数某一个: :nth-last-of-type() */

    /* 唯一子元素的元素: :only-of-typel */

    /* +表示,同级相邻的选中,不能选上面,只能选下面 */

    .on + li {

    background-color: rgb(184, 4, 255);

    }

    /* ~表示,同级所有兄弟都选中 */

    .on2 ~ li {

    color: rgb(173, 179, 157);

    }

    • 111111
    • 2222222
    • 3333333
    • 44444444
    • 555555
    • 666666
    • 7777777
    • 888888
    • 99999999
    • 101010101010

    我是唯一的

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    展开全文
  • css&html伪类选择器(27)

    2019-03-27 15:25:16
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>... * 伪类专门用来表示元素的一种特殊的状态 * 比如:访问过的链接,比如普通的超...
  • 本文目标:1、掌握CSS中结构性伪类选择器—nth-child的用法问题:1、实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器—first-of-type附加说明:1、整体宽为5002、每个名言标签的间距为20,内部间距为25,...
  • css有哪些伪类选择器伪类选择器是CSS五种选择器当中应用最灵活的一种,其包含六个分类。接下来,我将对这六个分类,逐一介绍。1、动态伪类选择器不同的状态,使用不同的样式。E:linkE:visitedE:activeE:hoverE:fo....
  • 伪类选择器 伪元素选择器 我们将在本文中更具体地讨论伪类的主题! 首先,您可能会问什么是伪类。 它们是CSS语言的关键字,可让您与外部因素或事件进行交互,例如将鼠标移到元素上或访问链接。 我们不会在这里介绍...
  • 如何使用CSS3中的结构伪类选择器和伪元素选择器结构伪类选择器介绍结构伪类选择器是用来处理一些特殊的效果。结构伪类选择器属性说明表属性描述E:first-child匹配E元素的第一个子元素。E:last-child匹配E元素的最后...
  • 表单属性伪类选择器body{background-color: #e6fbff;color: #000;font-size: 20px;padding: 0 30px;}li{list-style: none;}a{color: red;text-decoration: none;}.red{color: red;}.pink{background-color: #20ce7d;...
  • Lorem 一很等指似很一者下插近直好一的的有段文,ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihi调代求学功解宗维如请框总行断随以移泉动实使时近用码的会能,,护小求架结商的机我动水画现用...
  • 伪类选择器 伪类选择器和伪元素选择器可以为文档中非具体存在的结果指定样式,或者为某些元素(包括文档本身)的状态指定样式,它会根据某种条件而非文档结构应用样式。 伪类选择器的使用方法如下: HTML标记 伪类名...
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil?Lorem ipsum dolor sit amet, consectetur adipisicing ...
  • ***HTML基础笔记之伪类选择器***伪类选择器动态伪类选择器目标伪类选择器结构伪类选择器UI元素状态伪类选择器其他css3中伪类选择器和伪对象选择器的区别小结 伪类选择器 同一个标签根据其不同状态会显示不同的样式...
  • 动态伪类并不存在于html中,只有当用户和网站交互的时候才会体现出来。动态伪类包含两种,一种是在链接中常看到的锚点伪类,一种是用户行为伪类。 链接伪类选择器:E:link(未被访问过) 和 ...用户行为伪类选择器...
  • html,css lorem乱序铭文 ...
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil?Lorem ipsum dolor sit amet, consectetur adipisicing ...
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil?Lorem ipsum dolor sit amet, consectetur adipisicing ...
  • 伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么这里就和大家分享一下css3常用伪类选择改变表单样式的使用方法改变input输入框中placeholder的字体...
  • 本章给大家带来css中什么是伪类选择器伪类选择器的简要介绍。让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 更多...
  • 结构伪类选择器介绍结构伪类选择器是用来处理一些特殊的效果。结构伪类选择器属性说明表属性描述E:first-child匹配E元素的第一个子元素。E:last-child匹配E元素的最后一个子元素。E:nth-child(n)匹配E元素的第n个子...
  • 伪类选择器和伪元素

    2020-07-02 17:13:35
    伪类选择器 伪类选择器有以下6种: 动态伪类: 锚点伪类 用户行为伪类 目标伪类 UI元素状态伪类 否定伪类选择器 语言伪类选择器 CSS3结构伪类 动态伪类 这些伪类并不存在于HTML中,只有当用户和网站...
  • 一、input标签1.实现按钮效果-与表单相关的按钮效果-2.标签表示按钮-与表单无关的按钮效果:按钮-类似于 - 提交表单3.-... 类选择器/属性选择器 < ID选择器2.元素选择器 - 定位当前页面的指定标签名ID选择器 - 定...
  • HTML结构伪类选择器

    2020-12-27 17:02:03
    HTML结构伪类选择器 选择器 功能描述 E:first-child 作为父元素的第一个子元素的元素E E:last-child 作为父元素的最后一个子元素的元素E E F:nth-child(n) 选择父级元素E的第n个子元素F,(n可以是1、2...
  • html伪类选择器

    千次阅读 2016-10-23 10:00:02
    html伪类选择器 伪类选择器,并不是像之前css中选择器一样,选择一种标签,而是选择标签的一种状态,是属于html标记语言内容。  例如以a标签为例,  a:link{ } 表示鼠标没有被点击之前。CSS。  a:hover{ } ...
  • 伪类选择器

    千次阅读 2018-10-23 14:41:54
    伪类选择器 CSS伪类(Pseudo-class)用于向某些选择器添加特殊的效果。 使用伪类选择器的语法如下: selector:pseudo-class {property:value;} 常用的CSS伪类见表3-1。书写时尽量不要颠倒 下面的代码给出了伪类...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,331
精华内容 932
关键字:

html伪类选择器