CSS3选择器（二）

最新推荐文章于 2023-06-22 15:09:42 发布

小白变怪兽

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量353

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/u013558749/article/details/48436481

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

5.only-child选择器
<子元素>:nth-child(1):nth-last-child(1)一个意思；

6.UI元素状态伪类选择器
主要有：E:hover/E:active/E:focus/E:enabled/E:disabled/E:read-only/E:read-

write/E:checked/E:default/E:indeterminate/E::sekection

6-1:首先先来介绍一下E:hover/E:active/E:focus这三种：
    E:hover{  }代表的是指定的E元素鼠标滑过的时候应用的设定的样式；
    E:active{  }代表的是指定元素被激活（也就是鼠标在元素上按下还没松开）时应用的样式；
    E:focus{  }代表的是指定元素获得光标焦点时候应用的样式；（一般用于input）

6-2:接下来我们再来学习一下E:enabled/E:disabled；
    E:enabled{  }代表的是当指定元素处于**可用**状态下时应用样式；
    E:disabled{  }代表的是当指定元素处于**不可用**状态时的样式；

6-3:接着我们来看一下E:read-only/E:read-write；
    E:read-only{  }代表的是指定元素处于只读状态时的样式；（即当元素中有readonly="readonly"）
    E:read-write{  }代表的是指定元素处于非只读状态时的样式；(默认状态)

6-4:接着再来讲另外三个E:checked/E:default/E:indeterminate；
    E:checked{  }这个伪类选择器主要是针对input中type为radio或者checkbox元素被选中时的样式；
    E:default{  }代表的是当页面打开时默认处于被选中状态的radio、checkbox应用的样式；
    E:indeterminate{  }代表的是打开页面的时候如果整组的单选框或者复选框都没有被设定为指定样式时应用的样式，当其中有一个被选中后，应用的样式就会消失。

6-5:最后来讲一个比较实用的伪类选择器E::selection；
    E::selection{  }代表的是用来指定当元素处于选中那个状态时的样式。（即平时我们要复制一段文字时，选中文字会看到的样式。默认的是蓝底白字，我们可以根据自己的需要进行修改；）

7.通用兄弟元素选择器（用来指定位于同一个父元素之中的某个呀U尿素之后的所有其他某个种类的兄弟元素）；
<子元素>～<子元素之后的同级兄弟元素>{ 指定样式 }
eg:

    <div>
        <p></p>
    </div>
    <ul>
        <li></li>
        <li></li>   
    </ul>

div～ul{  }代表的就是div后与它同级的ul.

8.利用选择器在页面中插入内容E:after/E:before;

在(一)中，我们已经简单的介绍过了:after/:before这两个选择器，接下来我们就来详细的了解一下它们（

因为这两个选择器的基本用法是一致的，所以下面我就以before为例来进行介绍。）；

 8-1:before选择器不仅能将文字内容插入，同时也能够插入图片信息。
    例 h2:before { content:url(mark.png); }

 8-2:另外也可以将img的alt属性值放入；
    例 img:before { content:attr(alt); }

 8-3:使用content属性来插入项目编号；
    例   h2:before { content:counter(计数器名); } //计数器名字可任意起
    h2 { counter-increment:计数器名; }
    eg:<h2><p></p></h2>
       <h2><p></p></h2>
       <h2><p></p></h2>

   **注意**:如果想给加入的数字添加文字（比如：第1章）样式如下所示：
    h2:before { content:'第'counter(计数器名)'章'; }其他不变；

 8-4:上方讲了如何插入计数器，接下来就来讲下如何设置指定的编号种类；
    h2:before { content:counter(计数器名，编号种类); }
    编号种类里面的可选项就是list-style-type里的可选项；

 8-5:最后再来讲一下编号的嵌套
    h2:before { content:counter(父计数器名); } //计数器名字可任意起
    h2 { counter-increment:父计数器名; }
    p:before { content:counter(子计数器名); } //计数器名字可任意起
    p { counter-increment:子计数器名; }

如上所示运行的结果p标签会按顺序1,2,3排列下去，那么如何让h2下的p标签都从1开始呢，其实很简单，只
要在h2处加上counter-reset:子计数器名;：即h2最终样式是：
h2 { counter-increment:父计数器名;counter-reset:子计数器名; }