css3选择器 - 天涯过客^

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

CSS3前缀:

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。标准写法如表顺序，再在后面添加无前缀的

我们需要全面的兼容性查阅手册 http://www.runoob.com/cssref/css3-browsersupport.html 兼容性参考手册

css3选择器

一、属性选择器

E[att^=“val”] {…} 选择匹配元素E, 且E元素定义了属性att, 其属性值以val开头的任何字符串

E[att$=“val”]{…}选择匹配元素E, 且E元素定义了属性att, 其属性值以val结尾的任何字符串

E[att*=“val”]{…}选择匹配元素E, 且E元素定义了属性att, 其属性值任意位置出现了“val”。即属性值包含了“val”，位置不限。

E[att~=“demo”]{…} 选择匹配元素E, 且E元素定义了属性att, 属性值里存在单词demo

二、伪类选择器

初级伪类选择器：伪类用于向某些选择器添加特殊的效果。

1.root 根标签选择器

“:root”选择器等同于<html>元素，简单点说：

:root{background:orange}

html{background:orange}

得到的效果等同

建议使用:root（xml等）

2.:not 否定选择器

用法和jQuery 中的not类似，可以排除某些特定条件的元素

div:not([class=“demo”]){ background-color:red; } 意思为除了class为demo的div以外，所有的div的背景颜色都变红

3.empty 空标签选择器

用来选择没有内容的元素、不在文档树中的元素，这里的没有内容指的是一点内容都没有，哪怕是一个空格。

    <style>
            div:empty{
                width:100px;
                height:100px;
                background-color:red;
                margin-top:10px;
            }
     </style>
</head>
<body>
    <div class = "demo"></div>
    <div class = "">
        <div class = "son"></div>
    </div>
    <div class = "xxx">

    </div>
    //empty选中的div是class为demo son的div

4.target 目标元素选择器（点击哪个哪个就是目标）

用来匹配被location.hash 选中的元素(即锚点元素) 选择器可用于选取当前活动的目标元素

    <style>
           .demo {
                width:100px;
                height:100px;
                background:red;
                margin-bottom:1000px;
            }
            div:target{
                background:greenyellow; 
            }
            //点击的demo作用于当前的黄绿颜色
     </style>
</head>
<body>
    <a href="#demo1">demo1</a>
    <a href="#demo2">demo2</a>
    <a href="#demo3">demo3</a>
    <div class="demo" id="demo1">demo1</div>
    <div class="demo" id="demo2">demo2</div>
    <div class="demo" id="demo3">demo3</div>

5、

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child(n){} //传1 代表第一个子元素、n+1代表 1、2、3一直到最后（n从0开始） 2n（0、2、4）偶数或用even、odd

:nth-last-child(){} 从后往前数

以上四个选择器均有弊端，即如果当前位置元素不是前面所修饰的元素，那么无效（注：其父元素的第 N 个子元素，不论元素的类型。）

           div：first-child {
                background:red;
            }
            //demo1 demo5变色
     </style>
</head>
<body>
    <div class="demo" id="demo1">demo1</div>
    <div class="demo" id="demo2">demo2</div>
    <div class="demo" id="demo3">demo3</div>
    <div class="demo" id="demo4">
        <div class="demo" id="demo5">demo5</div>
    </div>
    <div class="demo" id="demo6">demo6</div>

6、

:first-of-type （:last-of-type 是demo6 demo5变色）

:nth-of-type :nth-last-of-type 同理

此种选择器，限制了类型，即在所修饰元素的类型下选择特定位置的元素。

    <style>
           div：first-of-type {
                background:red;
            }
            //demo1 demo5变色
     </style>
</head>
<body>
    <div class="demo" id="demo1">demo1</div>
    <div class="demo" id="demo2">demo2</div>
    <div class="demo" id="demo3">demo3</div>
    <div class="demo" id="demo4">
        <p></p>
        <div class="demo" id="demo5">demo5</div>
    </div>
    <div class="demo" id="demo6">demo6</div>

7、

:only-child 唯一子元素选择器

选择是独生子的子元素，即该子元素不能有兄弟元素，它的父元素只有他一个直接子元素。

注意：选择的元素是独生子子元素，而非有唯一子元素的父元素。

:only-of-type

如果要选择第某类特定的子元素(p) 在兄弟节点中是此类元素唯一个的话就需要用到这个属性了

8、

:enabled 可用的元素

:disabled 不可用的元素

在web的表单中，有些表单元素有可用（“enabled”）和不可用（“disabled”）状态，比如输入框，密码框，复选框等。在默认情况下，这些表单元素都处在可用状态。那么我们可以通过伪类选择器 enabled 进行选择，disabled则相反。

    <style>
           input:enable{
               background: red;
           }
     </style>
</head>
<body>
    <input type="text" name="name">
    <input type="text" name="age"> 
    //两部分都变成红色

    <input type="text" name="name">
    <input type="text" name="age" disabled> 
    //最后一个不可选

    <style>
           input:enable{
               background: red;
           }
           input:disabled{
               background: blue;
           }
     </style>
</head>
<body>
    <input type="text" name="name">
    <input type="text" name="age" disabled>

9、

:checked 选择框的被选中状态

注：checkbox, radio 的一些默认状态不可用属性进行改变，如边框颜色。

    <style>
        input:checked{
           width:100px;
           height:100px;
        }
        //选中后的样式
  </style>
</head>
<body>
 <input type="checkbox">
 <input type="radio">

10、

:read-only 选中只读的元素

eg:<input type=“text” readonly=“readonly”/>

:read-write 选中非只读的元素

eg:<input type=“text”/>

三、伪元素选择器

CSS3对伪元素进行了一定的调整，在以前的基础上增加了一个: 也就是现在变成了::first-letter,::first-line,::before,::after 另外还增加了一个::selection

（伪元素的效果是需要通过添加一个实际的元素才能达到的。）

1、::selection

“::selection” 选择器是用来匹配突出显示的文本（用鼠标选择文本的时候）。浏览器默认情况下，用鼠标选择网页文本是以“蓝色的背景，白色的字体”显示的。

    <style>
        div::selection{
            background:yellowgreen;
        }
  </style>
</head>
<body>
 <div>风不停留何苦绕来摇晃灯火</div>


如设置成属性：user-select: none; 为不允许用户选择

        div{
            user-select: none;  //不允许用户选择
        }

::first-line 第一行

    <style>
        div{
            width:100px;
            height:100px;
        }
        p::first-line{
             background:blueviolet;
        }
        //选择p标签内文字第一行
  </style>
</head>
<body>
 <div>
     <p>笛声半山腰，而你在哪座桥，远远对他在微笑</p>
</div>

::first-letter 第一个字符

        p::first-letter{
            font-size:20px;
        }
        //第一个字符变大

::before ::after

        //标签前面添加样式
        //伪元素—— 可以通过标签/html实现效果
        p::before{
            content:'歌词：';
        }

四、条件选择器

E > F an F element child of an E element 直接子元素

E + F an F element immediately preceded by an E element 后面的紧挨着的兄弟节点

E ~ F an F element preceded by an E element 后面的兄弟节点

练习：手风琴效果

发表于 2018-12-24 23:26 天涯过客^ 阅读(138) 评论(0) 编辑收藏举报