美文网首页
2.4 (案例)CSS3选择器--属性选择器

2.4 (案例)CSS3选择器--属性选择器

作者: 柒月柒日晴7 | 来源:发表于2017-06-07 09:23 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3选择器--属性选择器</title>
</head>
<body>
    <div id="section1">HTML5_1601</div>
    <div id="subsection1-1">HTML5_1601</div>
    <div id="subsection1-2">HTML5_1601</div>
    <div id="subsection1-3">HTML5_1601</div>
    <div id="section2">HTML5_1601</div>
    <div id="subsection2-1">HTML5_1601</div>
    <div id="subsection2-2">HTML5_1601</div>
    <div id="subsection2-3">HTML5_1601</div>
    <style>
        /*0.[attr]   选择有某个属性的元素*/
/*       [id]{
            background-color: yellow;
         }*/

        /*1.[attr="value"] 选择有对应属性和属性值的元素*/
        [id=section1]{
            background:yellow;
        }
         /*2. [attr~="value"] 选择有属性中[全等于value]属性值的元素   value必须是一个完整的类名不能是类名的一部分 */
/*      [id ~= section2]{
            background-color: red;
         }*/



        /*3.[attr*="value"]  选择attr属性值中[包含]子串"value"的所有元素*/
/*      [id *= section2]{
            background-color: red;
        }*/
        /*4.[attr ^="value"] 选择attr属性值中以子串"value"[开头]的所有元素*/
/*      [id ^= sub]{
            background-color: red;
        }*/
        
        /*5.[attr $="value"] 选择attr属性值中以子串"value"[结尾]的所有元素*/
/*      [id$="2"]{
            background-color: red;
        }*/

    </style>
</body>
</html>

相关文章

  • CSS3知识概要总结之选择器篇(二)

    是的,从这里开始我们就开始学习CSS3的选择器了,学习资源CSS3选择器 属性选择器 属性选择器 发现属性选择器真...

  • CSS和JQuery选择器

    一、 基本选择器 二、组合使用 三、属性选择器 四、 CSS3属性选择器

  • css3(1)

    之前的css属性选择器包括:类选择器,id选择器,标签选择器,关联选择器,组合选择器,伪类选择器等 css3属性选...

  • HTML5和CSS3新增内容

    CSS3选择器有哪些? 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些? 颜色:新增RGBA,HSL...

  • CSS3笔记(一)选择器

    回顾css3之前的选择器 css3选择器 1、属性选择器 2、结构 伪类选择器 注意点 : 选择是分类型,排序是不...

  • css3和html5

    css3如下:↓↓↓ 新增选择器:类选择器、属性选择器 动画: transition过渡 transform变形:...

  • 前端零基础课程--第八节课

    CSS3高级 复杂选择器:兄弟选择器、属性选择器、伪类选择器、伪元素选择器 兄弟选择器 相邻兄弟选择器(+):选出...

  • 2019前端经典面试题 CSS 部分常见问题

    CSS部分常见问题 1、CSS3选择器有哪些? 答:属性选择器、伪类选择器、伪元素选择器。 2、CSS3新特性有哪...

  • CSS3选择器 属性选择器

    CSS3选择器 属性选择器 :root根选择器 就相当于html :not 选择器称为否定选择器,和jQuery中...

  • ccs(一)

    css选择器 派生选择器 Id选择器 类选择器 属性选择器 css3背景 background-size规定背景图...

网友评论

      本文标题:2.4 (案例)CSS3选择器--属性选择器

      本文链接:https://www.haomeiwen.com/subject/zfdofxtx.html