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

    2019-03-26 18:50:13
    CSS伪类选择器 在html的标记中,所有的锚(a)元素看起来都一样,实际上是有两种基本的锚类型:已访问的和未访问的。这些类型称为伪类,使用这些伪类的选择器成为伪类选择器。 链接伪类 CSS2.1中定义了两个只应用于超...

    CSS伪类选择器

    在html的标记中,所有的锚(a)元素看起来都一样,实际上是有两种基本的锚类型:已访问的和未访问的。这些类型称为伪类,使用这些伪类的选择器成为伪类选择器。

    链接伪类

    CSS2.1中定义了两个只应用于超链接的伪类:

    伪类名 描述
    :link 指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚
    :visited 指示作为已访问地址超链接的所有锚

    如果我们需要所有的未访问页面锚都是紫色,而所有已访问页面的锚是银色,则可以使用CSS这样表示:

    a:link {color:purple;}
    a:visited {color:silver;}
    
    动态伪类

    CSS2.1中定义了3个动态伪类,它们可以根据用户行为改版文档的外观。

    伪类名 描述
    :focus 指示当前拥有输入的焦点元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素
    :hover 指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上,:hover就会指示这个超链接
    :active 指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接
    结合伪类

    CSS2.1中,可以在同一个选择器中结合使用伪类。例如,鼠标指针停留在未访问的链接时,可以让这些链接变为红色,而鼠标指针停留在已访问的链接上时,链接会变成紫红色。

    a:link:hover {color:gray}
    a:visited:hover {color:maroon;}
    

    伪类的结合顺序不重要,a:hover:linka:link:hover会得到一样的效果,但是要注意,不要把两个互斥的伪类结合在一起,比如,一个链接不可能同时是已经访问的,又是没有访问的,所以a:link:visited没有任何意义,这种选择器一般会被忽略。

    伪元素选择器

    伪元素是能够在文档种插入的假象元素,CSS2.1中定义了4个伪元素,设置首字母样式设置第一行样式设置之前和之后的元素的样式

    设置首字母样式

    第一个伪元素用于设置一个块级元素首字母的样式,而且仅对于该首字母设置样式:

    p:first-letter{color :red;}
    

    这个规则会将每一段的第一个字母变成红色。

    设置第一行样式

    和first-letter类似,first-letter可以用来影响元素中的第一个文本行,例如:让文本第一段的第一行变成紫色:

    p:first-line{color:purple;}
    
    设置之前和之后元素的样式

    如果你想在每个h2元素之前加一堆银色中括号:

    h2:before {conten:"}}";color:silver;}
    

    CSS2.1中允许插入生成的内容,然后使用伪元素:before和:after直接设置样式。

    展开全文
  • css 伪类选择器

    2018-10-18 18:59:00
    css 伪类选择器 伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器 遵循"爱恨准则",LoVe HAte/*没有被访问的a标签的样式*/ .box ul li.item1 a:link{ color: #666; } /*...
    伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器 遵循"爱恨准则",LoVe HAte
    /*
    没有被访问的a标签的样式*/ .box ul li.item1 a:link{ color: #666; } /*访问过后的a标签的样式*/ .box ul li.item2 a:visited{ color: yellow; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{ color: green; } /*鼠标摁住的时候a标签的样式*/ .box ul li.item4 a:active{ color: yellowgreen; }

     

    posted on 2018-10-18 18:59 徐建0304 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/Treasuremy/p/9812472.html

    展开全文
  • css伪类选择器

    2019-12-05 16:02:08
    css伪类选择器用于点击选择时产生不同的样式 css中常用的伪类 伪类名 含义 :active 向被激活的元素添加样式 :focus 向拥有输入焦点的元素添加样式 :hover 向鼠标悬停在上方的元素添加样式 :link 向未...

    css伪类选择器用于点击选择时产生不同的样式

    css中常用的伪类

    伪类名 含义
    :active 向被激活的元素添加样式
    :focus 向拥有输入焦点的元素添加样式
    :hover 向鼠标悬停在上方的元素添加样式
    :link 向未被访问的链接添加样式
    :visited 向已被访问的链接添加样式
    :first-child 向元素添加样式,且该元素是它的父元素的第一个子元素
    :lang 向带有指定的lang属性的元素添加样式
    示例:
    <style>
            a:link{
                font-size: 20px;
                color: blue
            }
            a:hover{
                color: red;
            }
            a:active{
                font-size: 30px;
            }
            input:focus{
                background-color: yellow;
            }
            li:first-child{
                font-size: 30px;
            }
     </style>
    <body>
    <a href="http://www.baidu.com">www.baidu.com</a><br>
    <a href="http://www.sohu.com">搜狐</a><br>
    <a href="http://www.sina.com">新浪</a><br>
    <from >
        用户名: <input type="text" id="username" ><br>
        密码: <input type="password"><br>
        <input type="submit" value="提交"><br>
    </from>
    <from>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li>西</li>
            <li></li>
        </ul>
    </from>
    </body>
    

    结果:
    在这里插入图片描述

    当点击输入框时框里面的背景会变成黄色

    在这里插入图片描述

    展开全文
  • CSS 伪类选择器

    2019-02-26 23:41:48
    CSS 伪类选择器 :first-child 兼容性:IE8+、FireFox、Chrome、Safari、Opera &lt;style&gt; section:first-child { color: yellowgreen; } &lt;/style&gt; &lt;!-- 只有第一个section 被...

    CSS 伪类选择器

    :first-child

    兼容性:IE8+、FireFox、Chrome、Safari、Opera

    <style>
      section:first-child {
        color: yellowgreen;
      }
    </style>
    <!-- 只有第一个section 被选中 -->
    <section>
       <div>1-1</div>
       <div>1-2</div>
       <div>1-3</div>
     </section>
     <section>
       <div>2-1</div>
       <div>2-2</div>
       <div>2-3</div>
     </section>
    

    :last-child

    兼容性:IE8+、FireFox、Chrome、Safari、Opera

    说明:last-child 和 first-child 级别并列。xxx:last-child,表示如果最后一个元素是xxx 的话,则匹配,否则不匹配。(而不是最后一个xxx 匹配)

    :nth-child(N)

    兼容性:IE9+、FireFox4、Chrome、Safari、Opera

    ul > li:nth-child(3) {
      background: yellowgreen;
    }
    

    说明:代码表示,ul 里面的第3 个元素,如果是li 则匹配,如果不是,则不匹配。

    :nth-child(n)
    其中n 代表一个表达式,取值从0 开始。

    /* 偶数 */
    ul > li:nth-child(2n) {
      background: yellowgreen;
    }
    ul > li:nth-child(even) {
      background: yellowgreen;
    }
    /* 基数 */
    ul > li:nth-child(2n+1) {
      background: lightblue;
    }
    ul > li:nth-child(odd) {
      background: lightblue;
    }
    /* 变通使用 */
    ul > li:nth-child(3n+1) {
      background: lightblue;
    }
    

    :nth-last-child(N)

    兼容性:IE9+、FireFox4、Chrome、Safari、Opera

    说明:用法同:nth-child(N),不同的是从尾部计数。

    :nth-of-type(N)

    概念:匹配属于父元素的特定类型的第N 个子元素的每个元素。
    兼容性:IE9+、FireFox4、Chrome、Safari、Opera

    说明:注意个:nth-child(N) 的区别。:nth-child(N) 表示如果第N 个元素是对应类型时匹配。

    :nth-last-of-type(N)

    说明:与:nth-of-type(N) 相同,不同之处是倒着计数的。

    :first-of-type

    概念:匹配属于其父元素的特定类型的首个子元素的每个元素。
    兼容性:IE9+、FireFox、Chrome、Safari、Opera

    说明:等同于:nth-of-type(1)。

    :last-of-type

    兼容性:IE9+、FireFox、Chrome、Safari、Opera

    说明:和:first-of-type 成对。

    :only-child

    概念:匹配属于其父元素的唯一子元素的每个元素。
    兼容性:IE9+、FireFox、Chrome、Safari、Opera

    :only-of-type

    概念:匹配属于其父元素的特定类型的唯一子元素的每个元素。
    兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

    <!-- article:only-child 匹配a1,不匹配a2 -->
    <!-- article:only-of-type 匹配a1,匹配a2 -->
    <section>
    	<article>a1</article>
    </section>
    <section>
    	<div>d2</div>
    	<article>a2</article>
    </section>
    

    说明:注意区分:only-child。

    :empty

    概念:空选择。
    兼容性:IE9+、FireFox、Chrome、Safari、Opera

    :not

    概念:匹配非指定元素/选择器的每个元素
    兼容性:IE9+、FireFox、Chrome、Safari、Opera
    语法:父元素:not(子元素/子选择器)

    <!-- 元素之间的间隔,最后一个除外 -->
    nav > a:not(:last-of-type) {
    	border-right: 1px solid red;
    }
    

    css 权重

    权重等级与权值:

    行内样式(1000) > ID 选择器(100) > 类、属性选择器和伪类选择器(10) > 元素和为元素(1) > *(0)

    权重计算口诀:

    从0 开始,一个行内样式+1000,一个id+100,一个属性选择器、class或者伪类+10,一个元素名或者伪元素+1。

    伪元素

    概念:css 伪元素用于向有些选择器设置特殊效果。
    兼容性:IE9+、FireFox、Chrome、Safari、Opera
    语法格式:元素::伪元素 (Element::pseudo-element)
    说明:两个冒号在新版本中,可以只写一个冒号。

    ::first-line

    只用于块级元素。

    ::first-letter

    只用于块级元素。

    ::before
    在元素的内容前面插入新内容,常用“content” 来配合。

    ::after

    同::before。

    ::selection

    用于设置在浏览器中选中文本后的背景色与前景色。

    兼容性:IE9+、FireFox 需要加 -moz、其他都可以兼容

    至此,结束。

    展开全文
  • css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器 链接伪类选择器:顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active,a:link表示的是未访问的链接,a:...
  • css伪类选择器In contrast to standard CSS selectors, pseudo selectors allow you to alter the appearance of a state or fragment of an element. They are divided into pseudo class selectors and pseudo ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,770
精华内容 3,108
关键字:

css伪类选择器