CSS3学习笔记-01-CSS3简介和属性选择器

CSS3学习笔记-01-CSS3简介和将属性选择器

这几天不断地从html 到 css 到html5 到css3 到js 前段大致来说算是一只脚跨入门槛了…

什么? 这才是门槛? 没错,就是门槛,前段要学的东西,可以说是一座山。真的多好吧。可以去看看往上的前端学习路线。哎! 果然世上没有简单的事情啊!但是只要努力一定可以学的好的。由于css3的特殊性(好玩)!我决定更一波学习css3的系列,很短!!只跟常用的部分。。。。我也只学了这一部分。放心,够用了!重点在动画和2d和3d上面
想看的看看

css3是什么。

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 [1] 。<来自百度百科>

css是什么就不用说了吧,自己百度丰衣足食,不知道你就看个热闹哈哈哈!!!
ok,进入正题

CSS3兼容性问题

由于css3是css的发展,很多老的浏览器都无法使用,所以兼容能力比较差。iE9以上的浏览器才可以兼容。所以如果不考虑兼容问题,可以发挥自己的创造力,创造惊艳的世界。

新增选择器

新增属性选择器

  • 选择含有某个标签的元素
    格式: 元素[标签]




    
    Document
    


    
我没有class
我没有class
我有class
我没有class
我没有class

效果如下:
CSS3学习笔记-01-CSS3简介和属性选择器_第1张图片

  • 格式:元素[标签=内容]
    作用:选择元素里面的标签为那个内容的元素



    
    Document
    


    
我没有class
我class = 'box1'
我class = 'box'
我没有class
我没有class

效果如下:
CSS3学习笔记-01-CSS3简介和属性选择器_第2张图片

内容可以带引号也可以不带,自己尝试

  • 格式:元素[标签 ^= 内容]
    作用:选择’元素’ 里面的’标签’ 并且 ‘标签’ 里面的内容开头字符为’内容’ 的元素
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        /* class标签里面的内容里面以box开头的元素的文字为红色 */
        div[class ^= 'box']{
            color: red;
        }
    style>
head>
<body>
    <div>我没有classdiv>
    <div class="box1">我class = 'box1'div>
    <div class="box">我class = 'box'div>
    <div>我没有classdiv>
    <div>我没有classdiv>
body>
html>

效果如下:
CSS3学习笔记-01-CSS3简介和属性选择器_第3张图片

  • 格式:元素[标签 $= 内容]
    作用:选择以标签的内容以’内容’结尾的元素
    有开头就有结尾哈哈
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        /* class标签里面的内容里面以1结尾的元素的文字为红色 */
        div[class $= '1']{
            color: red;
        }
    style>
head>
<body>
    <div>我没有classdiv>
    <div class="box1">我class = 'box1'div>
    <div class="box">我class = 'box'div>
    <div class="box1">class = 'box1'div>
    <div>我没有classdiv>
body>
html>

效果如下:
CSS3学习笔记-01-CSS3简介和属性选择器_第4张图片

  • 格式:元素 [标签 *= 内容]
    作用:选择标签包含有内容的元素
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        /* class标签里面的内容里面含有ox的元素的文字为红色 */
        div[class *= 'ox']{
            color: red;
        }
    style>
head>
<body>
    <div class = 'ox'>我class = 'ox'div>
    <div class="box1">我class = 'box1'div>
    <div class="box">我class = 'box'div>
    <div class="box1">class = 'box1'div>
    <div>我没有classdiv>
body>
html>

效果如下:
CSS3学习笔记-01-CSS3简介和属性选择器_第5张图片

特别提醒: 属性选择器的权重为10 ,也就是每个选择器里面的中括号里面的所有内容权重为10,然后加上前面的元素选择器内容是1,结果加起来就是11

总的来说我上面写的所有选择器的权重都是11

你可能感兴趣的:(前端学习之css3,css3)