CSS3入门之选择器

属性选择器

    前面章节介绍过 这里重点介绍CSS3新增的几个 主要有以下几个：

  1. 格式 E[attr^="value"] 选取E元素 适配其中属性attr 并且属性值以value字符开头 进行操作
  2. 格式 E[attr$="value"] 选取E元素 适配其中属性attr 并且属性值以value字符结尾 进行操作
  3. 格式 E[attr*="value"] 选取E元素 适配其中属性attr 并且属性值包含value字符 进行操作
结构伪类选择器

主要有以下几个：

  1. :first-child 选择第一个子元素
  2. :last-child 选择最后一个子元素
  3. :nth-child(n)选择第n个子元素
  4. :only-child 选择父元素有且仅有一个子元素的孩子
  5. :first-of-type 同级元素第一个兄弟元素
  6. :last-of-type 同级元素最后一个兄弟元素
  7. :nth-of-type(n)同级元素中第n个兄弟元素 无论是否包含其它类型同级元素
  8. :only-of-type 匹配有且仅有一个同类型元素的子元素
  9. :root 根元素
  10. :empty 不包含任何子元素或者内容的元素
  11. :not() 该元素之外的所有元素
  12. :target 选取页面中某个target元素
UI元素状态伪类选择器

主要有以下几个：一般应用于表单

  1. :focus 指定元素获得光标焦点时 所设置的样式
  2. :checked 给所有设置checked选择属性的元素 设置样式
  3. ::selection 给元素中被选择的网页文本 设置样式
  4. :enabled 给所有设置enabled可用属性的元素 设置样式
  5. :disabled 给所有设置disabled不可用属性的元素 设置样式
  6. :read-write 给所有设置只写属性的元素 设置样式
  7. :read-only 给所有设置只读属性的元素 设置样式
  8. ::before 在指定元素之前插入内容
  9. ::after 在指定元素之前插入内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS3选择器</title>
    <style type="text/css">
        /* 属性选择器 */
        /*选取input元素 适配其中属性type 并且属性值以te字符开头 进行操作*/
        p[align^="cen"] {
            width: 150px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #f00;
            color: #000;
            font-size: 20px;
        }
        /* 选取所有元素 适配其中属性align 并且属性值以ght字符结尾 进行操作 */
        [align$="ght"] {
            width: 150px;
            height: 40px;
            line-height: 40px;
            border: 1px dashed #0f0;
            color: #000;
            font-size: 20px;
        }
        /* 选取所有元素 适配其中属性align 并且属性值包含ef字符 进行操作 */
        [align*="ef"] {
            width: 150px;
            height: 40px;
            line-height: 40px;
            border: 1px dotted #0f0;
            color: #00f;
            font-size: 20px;
        }

        /* 结构伪类选择器 */
        ul li {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            list-style: none;
        }
        /* 第一个子元素 li 设置相关属性 */
        /*ul li:first-child {
            color: #f00;
            border: 1px dotted blue;
        }*/
        /* 最后一个子元素 li 设置相关属性 */
        /*ul li:last-child {
            border: 2px dashed skyblue;
            border-radius: 10px;
            color: #0f0;
        }*/
        /* 第2个子元素 li 设置相关属性 */
        /*ul li:nth-child(2) {
            color: #00f;
            border: 2px solid green;
            border-radius: 5px;
        }*/
        /* 匹配父元素有且只有一个子元素 */
        /*div span:only-child {
            color: #f00;
            font-size: 20px;
        }*/
        /* 选择同元素类型的第1个同级兄弟元素 */
        div span:first-of-type {
            color: #00f;
        }
        /* 选择同元素类型的最后1个同级兄弟元素 */
        div span:last-of-type {
            color: #f00;
        }
        /* 匹配同元素类型的第n个同级兄弟元素 */
        div span:nth-of-type(3) {
            color: #0f0;
        }
        /* 匹配父元素中特定类型的唯一子元素 */
        .s:only-of-type {
            color: blue;
        }

        :root {
            background-color: #999;
        }
        /* 不包含子元素或者没有内容的元素 进行样式设置 */
        div:empty {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }
        /* 列表中 类名是li2的除外 其它同类型同级元素设置样式 */
        ul li:not(.li2) {
            font-size: 30px;
        }
        /* :target选择器一般都是结合锚点链接来使用 */
        :target p
        {
            color:red;
        }

        /* UI元素状态伪类选择器 一般应用于表单 */
        [type*="text"] {
            height: 20px;
            border: 1px dashed blue;
            border-radius: 5px;
            /* 去掉默认编辑框外边框样式 */
            outline: none;
        }
        [type*="text"]:focus {
            height: 20px;
            border: 1px dashed red;
            border-radius: 5px;
            outline: none;
        }
        [type*="password"] {
            height: 20px;
            border: 1px dotted blue;
            border-radius: 5px;
            outline: none;
        }
        [type*="password"]:focus {
            height: 20px;
            border: 1px dotted red;
            border-radius: 5px;
            outline: none;
        }
                /* 默认选中状态下的样式 */
        [type^="ra"]:checked {
            width: 20px;
            height: 30px;
        }
        /* 选中文本样式 */
        .s::selection {
            color: #fff;
            background-color: yellow;
        }
        
        /* 编辑框不可用状态样式 用户名框不可用*/
        /*[type="text"]:disabled {
            background-color: #666;
            
        }*/
        /* 编辑框可使用状态样式 密码框可用 */
        /*[type$="word"]:enabled {
            background-color: red;
        }*/

        /* 前面插入内容 */
        ul li:first-child:before {
            content: "小"
        }
        /* 后面插入内容 */
        ul li:last-child:after {
            content: "娃"
        }

    </style>
</head>
<body>
    <!-- 属性选择器 -->
    <!-- 前面的文章我们已经详细的介绍 这里再次提一下 CSS3中新增的几个 具体用法看前面文章 -->
    <!-- 结构伪类选择器 -->
    <!-- 前面我们也学过几个 <a>标签的几个伪类选择器 :link{未访问状态} :visited{已访问状态} :hover{鼠标悬停状态} :active{点击一瞬间状态} -->
    <!-- UI 元素状态伪类选择器 -->


    <a href="#music">音乐</a>

    <div id="music">
        <p>音乐</p>
    </div>

    <div class="box1"></div>

    <p align="center">段落 中国</p>

    <p align="right">段落 文化</p>

    <p align="left">段落 博大精深</p>

    <ul class="list1">
        <li>选项一</li>
        <li class="li2">选项二</li>
        <li>选项三</li>
        <li>选项四</li>
        <li>选项五</li>
        <li>选项六</li>
        <li>选项七</li>
        <li>选项八</li>
    </ul>

    <div>
        <span>行内元素1</span><br />
        <span>行内元素1.5</span><br />
        <p>段落</p>
        <span>行内元素2</span><br />
        <span>行内元素2.5</span><br />
        <p>段落</p>
        <span>行内元素3</span><br />
        <span>行内元素4</span>
    </div>

    <div>
        <span class="s">内容</span>
    </div>

    <form class="fr" method="get" action="http:www.baidu.com">
                <!-- 只读 readonly="readonly" -->
        用户名：<input type="text" readonly="readonly" name="姓名" value="请输入姓名" /><br />
                <!-- 只写 readonly="read-write" -->
        密&nbsp;&nbsp;&nbsp;码：<input type="password" readonly="read-write" name="密码" /><br />
        性&nbsp;&nbsp;&nbsp;别：<input id="man" type="radio" name="sex" checked="checked"><label for="man">男</label><input id="woman" type="radio" name="sex"><label for="woman">女</label><br />
        爱&nbsp;&nbsp;&nbsp;好：<input id="music" type="checkbox" checked="checked"><label for="music">音乐</label>
                               <input id="movie" type="checkbox"><label for="movie">电影</label>
                               <input id="baseketball" type="checkbox"><label for="baseketball">篮球</label>
                               <input id="pingpong" type="checkbox"><label for="pingpong">乒乓球</label>
                               <input id="badminton" type="checkbox"><label for="badminton">羽毛球</label>


    </form>

</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3学习之选择器
    一、基本选择器 基本选择器是css中使用最频繁、最基础，也是css中最早定义的选择器。 通配符选择器通配符选择器用...
    LemonnYan阅读 342评论 0赞 0
  • CSS选择器和CSS3属性
    关注我的个人博客:https://pinbolei.cn，获取更多内容 1、CSS3的概念和优势 A、CSS3的概...
    pinbolei阅读 804评论 0赞 3
  • CSS3选择器
    属性选择器 在CSS3中，增加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]。...
    oWSQo阅读 748评论 0赞 0
  • CSS3选择器
    基础 属性选择器(CSS2) [attr=val] attr代表属性值，val代表变量值 属性选择器的扩展(CSS...
    秋枫残红阅读 337评论 0赞 1
  • CSS选择器（入门7作业）
    1.class 和 id 的使用场景? 当页面中某元素的样式并不独有，或与其他元素共用一个样式时，可以为该元素指定...
    Feiyu_有猫病阅读 978评论 0赞 0