CSS3学习笔记——选择器、text-shadow属性、word-wrap属性、rem

1.属性选择器

   1）[att*=val]属性选择器

        表示包含val 的所有att属性;

   2）[att^=val]属性选择器

       表示所有开头为val的att属性；

   3）[att$=val]属性选择器

       表示所有结尾为val的att属性；

2.结构性伪类选择器

  1）伪类选择器

      类选择器可以以随便起名，但伪类选择器是CSS中定义好的选择器，不能顺便取名。

      如： 元素的几种选择类选择器有：

     a:link{}      a:visited{}     a:hover{}         a:active{}

  2）伪元素选择器

     伪元素选择器是针对CSS中已经定义好的伪元素使用的选择器。

     格式：选择器：伪元素{属性：值}

     ① first-line：向某个元素中的第一行文字使用样式；

     ② first-letter：用于向某个元素中的文字的首字母或第一个字使用样式；

     ③ before：在某个元素之前插入一些内容

     ④ after：在某个元素之后插入一些内容

li:after{
  content:"(仅用于测试)";
  font-size:12px;
  color:red;
}

伪类与伪元素的区别？

     ①  伪类的本质是为了弥补常规CSS选择器的不足，以便获得更多的信息；

     ②  伪元素本质上是创建了一个有内容的虚拟容器；

     ③  CSS3中的伪类和伪元素的语法不同；

     ④  可以同时使用多个伪类，而只能同时使用一个伪元素；

  3）结构性伪类选择器

特征：允许开发者根据文档中的结构来指定元素的样式；

      ① root 选择器：指将样式绑定到文档中最顶层结构的元素；即

      ② not 选择器：排除某个结构元素下面的子结构元素

      ③ empty 选择器：指定当元素中内容为空白时使用的样式；

      ④ target 选择器：使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样            式只在用户点击了页面中的超链接，并且跳转了target元素后起作用；

      ⑤ first-child：指定第一个子元素；          last-child：指定最后一个子元素；

      ⑥ nth-child(n)：表示第n个子元素；       nth-last-child(n)：倒数第n个子元素；

        （n可以是明确的数字，也可以是2n+1类似的表达式，表示循环指定样式）

      ⑦ nth-child(even/odd)：整数，第偶数（奇数）个子元素；   nth-last-child(even/odd)：倒数，第偶数（奇数）个子元素

注意： nth-child选择器在计算子元素是第奇数个还是第偶数个元素时，是连同父元素中的所有子元素一起计算的。

     即，“h2:nth-child(odd)”这行代码的含义，并不是指“针对父元素中第奇数个h2子元素来使用的”，而是指“当父元素中的第奇数个子元素如果是h2子元素时使用”

      ⑧ nth-of-type(n/odd/even)：针对同类型的第n/奇数/偶数个子元素；    nth-last-of-type(n/odd/even)：倒数

      ⑨ only-child：指定当元素中只有一个子元素时才使用的样式。

示例文字1 | 
示例文字2 | 
示例文字3 | 
示例文字4 | 
示例文字5 


示例文字1
...此处略去


示例文字2
...此处略去


示例文字3
...此处略去


示例文字4
...此处略去


示例文字5
...此处略去

3.UI元素状态伪类选择器

特征：指定的样式只有当元素处于某种状态下时才起作用，在默认状态不起作用；

① E:hover（移动到元素上时）   E:active（鼠标在元素按下还未松开时）     E:focus(聚焦时)

② E:enabled(disabled)：指定当元素处于可用（不可用）状态时的样式；

③ E:read-only（write）：指定处于只读（非只读）状态时的样式；   

disabled和read-only的区别？

   disabled:是完全不可编辑的，不能复制；

   read-only：不可编辑，但可以复制；

 ④ E:checked  指定单选框或复选框处于选取状态时的样式；

      E:default  指定当页面打开时默认处于选取状态的单选框或复选框控件的样式；

      E:indeterminate：指定当页面打开时，一组单选框中没有任何一个按钮被设定为选取状态时整租单选框的样式；如果选取了其中一个，则样式取消指定；

      E::selection：指定元素处于选取状态的样式

      E:invalid（valid）：当元素内容不符合(符合)元素的规定格式时的样式；

      E:required(optional)：指定了（未指定）required属性的元素的样式；

      E:in-range(out-of-range)：指定元素实际输入值在有效范围内（之外）时使用的元素；

4.通用兄弟元素选择器

<子元素>~<子元素之后的同级兄弟元素>{属性：值}

指定位于一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式；

5.使用选择器在页面中插入内容

  1）利用content属性定义要插入的内容；

    
    
    
大标题
    
中标题
    
小标题
    
小标题
    
小标题
    
中标题
    
小标题
    
小标题
    
小标题
    
中标题
    
大标题
    
中标题
    
大标题
    
中标题
    
大标题
    
中标题
    

给文字添加阴影——text-shadow属性

text-shadow:length length length color

第一个参数：阴影离开文字的横向距离；

第二个参数：阴影离开文字的纵向距离；

第三个参数：阴影的模糊半径；

第四个参数：color指的是阴影的颜色；

    
        
        
    
    
      
你好
    

让长单词与URL地址自动换行

使用word-wrap属性来实现长单词与URL地址自动换行；

该属性得到了所有浏览器的支持；

有两个属性值：

break-word：浏览器可在长单词或URL地址内部进行换行；

normal：浏览器保持默认处理；

    
        
        
    
    
      
this my vererrdsfsfsdfsdfdfsfsdfsfsdfsdfsdfsdfsdfdfsfdfsfs dfsdfsdfsdfsdffsfs sdfsdfdfsdfsdfsfsfs fdfghrthtr
    

使用rem单位定义字体大小

rem字体尺寸单位将根据页面上的跟元素的字体大小而计算出实际的字体大小，不管元素父元素的字体大小是多少。

  目前为止，包括IE9在内，所有浏览器都对rem字体单位提供了支持；

大多数浏览器中的默认字体是16px，可以将根元素的字体大小指定为62.5%，从而使浏览器自动计算出10个像素。因此，当用户将浏览器默认字体放大时，也可以使所有元素的字体大小自动放大到一个令人满意的效果；

html{
 font-size:62.5%;
}
small{
 font-size:1.1rem;
}
strong{
 font-size:1.8rem;
}