1.属性选择器
  完全匹配的属性选择器 [id=article]{}
    示例:
      <style>
        input[type=text]{ border: 2px solid red;}
      </style>

      <input type="text">
      <input type="text">
      <input type="password">
    结果:前两文本框的边框为两像素红色。

  包含匹配元素选择器,包含制定的字符串。
    语法:[attribute*=vlue] attribute指的属性名,value 指的是属性值。
    示例:
      <style>
        p[id*=css]{color: red;}
      </style>

      <p id="css_one">css3巩固学习</p>
      <p id="left">css3巩固学习</p>
      <p id="css_two">css3巩固学习</p>
    结果:第一个和第三个文本会变红

  首字符匹配选择器,只要开头字符符合匹配。
    语法:[attribute^=vlue] attribute指的属性名,value 指的是属性值。
    示例:
      <style>
        p[id^=c]{ color: red;}
      </style>

      <p id="css_one">css3巩固学习</p>
      <p id="css_two">css3巩固学习</p>
      <p id="mss_one">css3巩固学习</p>
    结果:第一个第二个文字变为红色,第三个颜色不变

  尾字符匹配选择器,只要匹配结尾的字符串。
    语法:[attribute$=vlue] attribute指的属性名,value 指的是属性值。
    示例:
      <style>
        p[id$=e]{color: red;}
      </style>
      <p id="css_one">css3巩固学习</p>
      <p id="css_two">css3巩固学习</p>
      <p id="mss_one">css3巩固学习</p>
    结果:第一个和第三个文字变成红色,第二个颜色不变

  匹配所有包含该单词属性的选择器。
    语法 [attribute~=vlue] vlue 是一个单词
    示例:
      <style>
        p[id~=css]{color: red;}
      </style>
      <p id="cmm one">css3巩固学习</p>
      <p id="cmm two">css3巩固学习</p>
      <p id="cnn three">css3巩固学习</p>
    结果:第一个第二文字会变红,第三个不会变

  匹配开头必须是特定单词属性选择器。
    语法 [attribute|=vlue] vlue 是一个单词
    示例:
      <style>
        p[id|=cmm]{color: red;}
      </style>
      <p id="cmm-one">css3巩固学习</p>
      <p id="cmm-two">css3巩固学习</p>
      <p id="cnn-three">css3巩固学习</p>
    结果:第一个第二文字会变红,第三个不会变。

2.伪类选择器

  指定元素列表中第一个元素:first-child
    语法:li:first-child{}
    示例:
      <style>
        li:first-child{color: red;}
      </style>
      <ul>
        <li>css3巩固</li>
        <li>css3巩固</li>
        <li>css3巩固</li>
      </ul>
    结果:第一个li的文字变为红色

  指定元素列表中最后一个元素:last-child
    语法:li:last-child{}
    示例:
      <style>
        li:last-child{color: red;}
      </style>
      <ul>
        <li>css3巩固</li>
        <li>css3巩固</li>
        <li>css3巩固</li>
      </ul>
    结果:最后一个li里的文字变为红色。
    注意:p:last-child 等同于 p:nth-last-child(1)

  父标签下的指定类型的子元素:nth-child
    语法:p:nth-child(){}
    示例:
      <style>
        p:nth-child(2){color: red}
      </style>
      <div>
        <p>css3巩固</p>
        <p>css3巩固</p>
        <div>css3巩固</div>
      </div>
    结果:第二p标签内的元素变为红色。
      <style>
        p:nth-child(2){color: red}
      </style>
      <div>
        <p>css3巩固</p>
        <div>css3巩固</div>
        <p>css3巩固</p>
      </div>
    结果 :没有任何效果

  选择父标签下的第几个指定元素:nth-of-type
    语法::nth-of-type(){}
    示例:
      <style>
        p:nth-of-type(2){color: red;}
      </style>
      <div>
        <p>css3巩固</p>
        <div>css3巩固</div>
        <p>css3巩固</p>
      </div>
    结果:最后一个元素内文字变为红色。

  :nth-child(odd),nth-child(even) 选择奇数和偶数。
    示例:
      <style>
        li:nth-child(odd){color: red;}
        li:nth-child(even){color: blue;}
      </style>
      <ul>
        <li>css3巩固</li>
        <li>css3巩固</li>
        <li>css3巩固</li>
        <li>css3巩固</li>
      </ul>
    结果:奇数行内的文字变为红色,偶数行内的文字变为

  指定的属于父元素特定类型的唯一的子元素:only-of-type。
    示例:
      <style>
        p:only-of-type{background:#ff0000;}
      </style>
      <div>
        <p>这是一个段落。</p>
      </div>
      <div>
        <p>这是一个段落。</p>
        <p>这是一个段落。</p>
      </div>
    结果: 第一个div里面的p元素背景会变成红色 第二div里面的不会变色。

  选择指定的空元素p:empty
    示例:
      <style>
        li{width: 100px; height: 20px;}
        li:empty{background: red;}
      </style>
      <ul>
        <li></li>
        <li>123</li>
        <li></li>
      </ul>
    结果:第一个li和最后一个li北京会变成红色。

  选择器可以用于选取当前活动的目标元素:target。
    示例:
      <style>
        div{width:300px;height:200px;background:yellow; font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;}
        div:target{ display:block;}
      </style>
      <a href="#div1">div1</a>
      <a href="#div2">div2</a>
      <a href="#div3">div3</a>

      <div id="div1">div1</div>
      <div id="div2">div2</div>
      <div id="div3">div3</div>
    结果:点击对应的a标签下面对应的div 显示。

  选取启用的表单元素:enabled。
    示例:
      <style>
        input[type="text"]:enabled{background:red; }
      </style>
      <input type="text">
      <input type="text" disabled>
      结果:第一个input 背景会变为红色 ,第二个不会变。

  选取启用的表单元素:disabled。
    示例:
      <style>
        input[type="text"]:disabled{background:red; }
      </style>
      <input type="text">
      <input type="text" disabled>
    结果:第一个input 背景不会变色 ,第二个变为红色。

  选择已被选中的input元素(只用于单选按钮和复选框)
    示例:
      <style>
        input:checked{width:30px; height: 30px;}
      </style>
      <input type="radio">
      <input type="checkbox">
      <input type="button">
    结果:第一个和第二个input会变大,第三个不会变。
    示例:
      <style>
        .test_checkbox,
        .test_more,
        .test_hide,
        .test_checkbox:checked ~ .test_label .test_show {position:absolute;display: none;}
        .test_checkbox:checked ~ .test_more,
        .test_checkbox:checked ~ .test_label .test_hide {position: static;display: inline-block;}
      </style>
      css3巩固学习...
      <input type="checkbox" id="testToggleCheckbox" class="test_checkbox" />
      <span class="test_more">撸起袖子加油干!</span>
      <label class="test_label" for="testToggleCheckbox">
        <span class="test_hide">收起↑</span>
        <span class="test_show">展开↓</span>
      </label>
    结果:点击收起和展开实现省略号后面的显示和隐藏。

    示例:
      <style>
        .test_box{width: 50%; min-width: 250px; margin: 1em auto; position: relative;}
        .test_tab{width: 33.1%; margin-right: -1px; border: 1px solid #ccc; border-bottom: 0; float: left;}
        .test_label{display: block; padding-top: 5px; padding-bottom: 5px; background-color: #eee;text-align: center;}
        .test_radio,.test_tab_content { position: absolute; display: none;}
        .test_radio:checked ~ .test_tab_content {margin-top: -1px; padding: 1em 2em; border: 1px solid #ccc; left: 0; right: 0;
          display: block;}
        .test_radio:checked ~ .test_label{background-color: #fff; border-bottom: 1px solid #fff; position: relative; z-index: 1;}
      </style>
      <div class="test_box">
        <div class="test_tab">
          <input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked">
          <label class="test_label" for="testTabRadio1">选项卡1</label>
          <div class="test_tab_content">
            <p>我是选项卡1对应的内容</p>
          </div>
        </div>
        <div class="test_tab">
          <input type="radio" id="testTabRadio2" class="test_radio" name="tab" >
          <label class="test_label" for="testTabRadio2">选项卡2</label>
          <div class="test_tab_content">
            <p>我是选项卡2对应的内容</p>
          </div>
        </div>
        <div class="test_tab">
          <input type="radio" id="testTabRadio3" class="test_radio" name="tab">
          <label class="test_label" for="testTabRadio3">选项卡3</label>
          <div class="test_tab_content">
            <p>我是选项卡3对应的内容</p>
          </div>
        </div>
      </div>
    结果:点击对应的选项卡实现切换。

  选择器用于选取指定选择器的首行 :first-line
  伪元素像文本的第一个字母添加特殊样式:first-letter
  选择器匹配被用户选取的选择部分::selection

    示例:
      <style>
        p:first-line{background: red;}
        P:first-letter{color: blue;}
        p::selection{background: yellow;}
      </style>
      <p>2017撸起袖子加油干!2017撸起袖子加油干!2017撸起袖子加油干!</p>
    结果:第一行的背景会变为红色,第一个字字体颜色会变为蓝色,选中的背景变为黄色。

  在被选择元素的内容前面插入内容:before
  在被选择元素的内容后面插入内容:after
    示例:
      <style>
        p:before{content: "2017.2.3"}
        p:after{content: "2017.2.5"}
      </style>
      <p>2017.2.4</p>
    结果:三个日期依次排列。

  选择器匹配非指定元素/ 选择器的每个元素:not(selector)
    示例:
      <style>
        p{color: blue}
        :not(p){color: red;}
      </style>
      <div>2017 加油干。</div>
      <p>2017 加油干。</p>
      <div>2017 加油干。</div>
    结果:div内的文字会变为红色。

3.文字修饰

  文本设置阴影text-shadow
    语法:text-shadow: h-shadow v-shadow blur color;
       h-shadow 必须 水平阴影的位置,允许负值。
       v-shadow 必须 垂直阴影的位置。允许负值。
       blur 可选,模糊的距离。
       color 可选 阴影的颜色。
    示例:
      <style>
        p{font-size: 35px; color: yellow;text-shadow: 2px 2px 1px red;}
      </style>
      <p>2017 撸起袖子干吧!</p>
    结果:出现红色的模糊阴影。

  文字描边text-stroke
    语法 :text-stroke: <'text-stroke-width'> || <'text-stroke-color'>
        text-stroke-width 文字的描边厚度
        text-stroke-color 文字的描边颜色
    示例:
      <style>
        p{font-size: 40px; color: yellow; -webkit-text-stroke:1px red;}
      </style>
      <p>文字描边效果</p>
    结果:文字添加了红色的描边。

  规定文本的书写方向: direction
  设置文本文的方向: unicode-bidi
    语法:direction 可选的值: ltr 默认,文本方向从左到右
      rtl 文本方向从右到左,inberit 规定从父元素继承。
    示例:
      <style>
        p{ direction:rtl;unicode-bidi:bidi-override;}
      </style>
      <p>实现自己的小目标</p>
    结果:实现自己的小目标
    超出的文字用省略号表示
    示例:
      <style>
        p{width:200px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
      </style>
      <p>2017做好自己该做的事情,此时不努力更待何时。</p>
    结果:超出的宽度用省略号表示。

  demo下载https://github.com/ningmengxs/css3.git

css3基础知识——回顾的更多相关文章

  1. java基础知识回顾之---java String final类普通方法

    辞职了,最近一段时间在找工作,把在大二的时候学习java基础知识回顾下,拿出来跟大家分享,如果有问题,欢迎大家的指正. /*     * 按照面向对象的思想对字符串进行功能分类.     *      ...

  2. C#基础知识回顾-- 反射(3)

    C#基础知识回顾-- 反射(3)   获取Type对象的构造函数: 前一篇因为篇幅问题因为篇幅太短被移除首页,反射这一块还有一篇“怎样在程序集中使用反射”, 其他没有什么可以写的了,前两篇主要是铺垫, ...

  3. C#基础知识回顾-- 反射(1)

    C#基础知识回顾-- 反射(1)   反射(reflection)是一种允许用户获得类型信息的C#特性.术语“反射”源自于它的工作方式: Type对象映射它所代表的底层对象.对Type对象进行查询可以 ...

  4. CSS3 基础知识

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  5. C#基础知识回顾--线程传参

    C#基础知识回顾--线程传参 在不传递参数情况下,一般大家都使用ThreadStart代理来连接执行函数,ThreadStart委托接收的函数不能有参数, 也不能有返回值.如果希望传递参数给执行函数, ...

  6. CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  7. python爬虫主要就是五个模块:爬虫启动入口模块,URL管理器存放已经爬虫的URL和待爬虫URL列表,html下载器,html解析器,html输出器 同时可以掌握到urllib2的使用、bs4(BeautifulSoup)页面解析器、re正则表达式、urlparse、python基础知识回顾(set集合操作)等相关内容。

    本次python爬虫百步百科,里面详细分析了爬虫的步骤,对每一步代码都有详细的注释说明,可通过本案例掌握python爬虫的特点: 1.爬虫调度入口(crawler_main.py) # coding: ...

  8. Java基础知识回顾之七 ----- 总结篇

    前言 在之前Java基础知识回顾中,我们回顾了基础数据类型.修饰符和String.三大特性.集合.多线程和IO.本篇文章则对之前学过的知识进行总结.除了简单的复习之外,还会增加一些相应的理解. 基础数 ...

  9. C++ 基础知识回顾总结

    一.前言 为啥要写这篇博客?答:之前学习的C和C++相关的知识,早就被自己忘到一边去了.但是,随着音视频的学习的不断深入,和C/C++打交道的次数越来越多,看代码是没问题的,但是真到自己操刀去写一些代 ...

随机推荐

  1. (H5)FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

  2. ICE第三篇------一些疑难点

    1 间接代理 参考http://blog.sina.com.cn/s/blog_53e8499c0100lkoo.html IceGrid用于支持分布式网络服务应用,一个IceGrid域由一个注册表( ...

  3. 函数(swift)

    输入输出参数(In-Out Parameters) 如果你想要一个函数可以修改参数的值,并且想要在这些修改在函数调用结束后仍然存在,那么就应该把这个参数定义为输入输出参数(In-Out Paramet ...

  4. C# 6.0 11个新特性

    1. 静态using(static using) 静态using声明允许不使用类名直接调用静态方法. The static using declaration allows invoking stat ...

  5. 入门经典——基础数据结构专题(List)

    UVA127 链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  6. JNI中的内存管理(转)

    源:JNI中的内存管理 JNI 编程简介 JNI,Java Native Interface,是 native code 的编程接口.JNI 使 Java 代码程序可以与 native code 交互 ...

  7. NSDateFormatter调整时间格式的代码

    NSDateFormatter调整时间格式的代码 在开发iOS程序时,有时候需要将时间格式调整成自己希望的格式,这个时候我们可以用NSDateFormatter类来处理.例如://实例化一个NSDat ...

  8. Thinking in scala (1)----类

    ChecksumAccumulator.scala import scala.collection.mutable.Map class ChecksumAccumulator { private va ...

  9. 在GitHub上创建上传下载开源项目代码

    1.注册GitHub帐号,创建GitHub项目代码仓库 1.1.注册GitHub帐号 在使GitHub之前,需要先登录其官网注册一个免费使用的账号.登录 https://github.com/join ...

  10. UOJ #192 【UR #14】 最强跳蚤

    题目链接:最强跳蚤 这道题本来不想写博客的--但是鉴于自己犯了低级错误,还是写篇博客记载一下. 一开始我的想法和题解里面的算法而比较类似,也是先分解质因数,然后用质因子是否出现偶数次来判断当前这个数是 ...