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 后面的兄弟节点

 

练习:手风琴效果