css3基础知识——回顾

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

event事件对象

event: 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象,供我们在需要的时候调...

10920
来自专栏HTML5学堂

利用JavaScript获取浏览器计算后的样式

HTML5学堂:JavaScript可以用style对象给标签设置样式、获取样式,但是利用style对象获取的样式只能是标签内联的样式,今天要给大家讲解的是利用...

36450
来自专栏me的随笔

jQuery操作DOM元素

作为一个后端程序员,也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。 实现上述两个功能当然可以使用原生js来完成...

12640
来自专栏微服务

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

36280
来自专栏lonelydawn的前端猿区

绚丽的javascript拾色器(不兼容IE8及以下)

一切尽在注释中 html节点 <div id="colorpicker" style="display:inline-block;"> <input clas...

46270
来自专栏姬小光

小鸡君の前端小姜汤【第014期】- 内联样式

在第003期我们讲过一点所谓样式,当时举的栗子是行内样式,只能写在元素的标签上,作为 style 属性的值存在的。这一期我们学习内联样式,或叫嵌入样式。

9830
来自专栏ytkah

css继承样式怎么控制?用选择器

  css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性。css继承原理是我们设置上级(父级)的CSS样...

44950
来自专栏Pythonista

golang之切片

4.cap可以求出slice最大的容量,0<=cap(slice)  <=len(array),其中array是slice引用的数组

17320
来自专栏web

设置第一个字母字体变大并且所有字母大小写 及下划线

18450
来自专栏GreenLeaves

JavaScript之Style属性学习

当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用...

23480

扫码关注云+社区

领取腾讯云代金券