css3小知识

掌握css3中各种属性选择器的概率以及使用方法。
1、 [att=val];att代表属性;val代表属性值

 [id=div_border]{
	   background-color:#C00;
   }
   <div id=;div_border;></div>

2、[att*=val];如果元素用att表示的属性值中包含用val指定的字符;则该元素使用这个样式
。

[id*=div_border]{
	   background-color:#9F6;
   }
   [id*=child]{
	   background-color:#C00;
   }
    <div id=;div_border;>
   	   <ol>
         <li id=;child1;>星期一</li>
         <li id=;parent;>星期二</li>
         <li id=;childchild;>星期三</li>
         <li id=;child1;>星期四</li>
         <li id=;son;>星期五</li>
         <li id=;sonchildson;>星期六</li>
         <li id=;childsonparent;>星期日</li>
       </ol>
   </div>

3、 [att^=val];如果元素用att表示的属性的属性值的开头字符为用val指定的字符;则该元素使用这个样式

 [id^=div_border]{
	   background-color:#9F6;
   }
   [id^=child]{
	   background-color:#C00;
	
   }
<div id=;div_border;>
   	   <ol>
         <li id=;child1;>星期一</li>
         <li id=;parent;>星期二</li>
         <li id=;childchild;>星期三</li>
         <li id=;sonchild1;>星期四</li>
         <li id=;son;>星期五</li>
         <li id=;sonchildson;>星期六</li>
         <li id=;childsonparent;>星期日</li>
       </ol>
   </div>

4、 [att$=val];如果元素用att表示的属性的属性值的结尾字符用val指定的字符;则该元素使用这个样式。

[id$=div_border]{
	   background-color:#9F6;
   }
   [id$=child]{
	   background-color:#C00;
   }
 <div id=;div_border;>
   	   <ol>
         <li id=;child1;>星期一</li>
         <li id=;parent;>星期二</li>
         <li id=;childchild;>星期三</li>
         <li id=;sonchild1;>星期四</li>
         <li id=;son;>星期五</li>
         <li id=;sonchildson;>星期六</li>
         <li id=;childsonparent;>星期日</li>
       </ol>
   </div>

掌握css中各种结构性伪类选择器的概念以及使用方法。

1、:root
:root是指文档的根元素;;;在其中定义的变量可作为全局变量。

例如;:root{
–base-vertical-rhythm:1.5rem;
–input-error-color:red;
}

2、:not 在css中;“:not”是选择器的一种;如果希望某个样式不作用到选择器上;可以使用:not(选择器;;语法格式为“ 元素:not(元素id){属性:属性值;}”;该选择器匹配非指定元素/选择器的每个元素。

input[type=;text;]:not(.no-red) {
    display: block;
    width: 300px;
    height: 30px;
    margin-bottom: 20px;
    padding-left: 10px;
    color: red;
}

3、:empty是一个css的伪类选择器;用于选择页面中为空的元素。
　如果元素没有任何子元素;节点;或文本内容;则该元素计为空。注释和处理指令不会影响元素是否为空

/选择并隐藏所有空段落/
　　p;empty{
　　display;none;
　　}

4、:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。

li:nth-of-type(2n){

 }

5、nth-last-child、nth-last-of-type

 /* div下倒数第二个子元素且是p元素 */
        p:nth-last-child(2){
            background-color: red;
        }
        /* div下倒数第二个p元素 */
        p:nth-last-of-type(2){
            background-color: blue;
        }
        <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <span>5</span>
    </div>

6、匹配属于父元素中唯一子元素的 p 元素

p:only-child
{
background:#ff0000;
}

掌握css3中各种ui元素状态伪类选择器的概念以及使用方法。
E:focused 选择表单中获得焦点的元素 3
E:checked 选择表单中被选中的radio或者checkbox元素 3
E:enabled 选择表单中可用的元素 3
E:disabled 选择表单中不可用;即被禁用;的元素 3
E:valid 选择表单中填写的内容符合要求的元素 3
E:invalid 选择表单中填写的内容不符合要求的元素;如非法的URL或E-Mail;或与 pattern 属性给出的模式不匹配 3
E:in-range 选择表单中输入的数字在有效范围内的元素 3
E:out-of-range 选择表单中输入的数字超出有效范围的元素 3
E:required 选择表单中必填的元素 3
E:optional 选择表单中允许使用required属性;且未指定为required的元素 3
E:read-only 选择表单中状态为只读的元素 3
E:read-write 选择表单中状态为非只读的元素 3
E:default 选择表单中默认处于选取状态的单选框或复选框;即使用户将该单选框或复选框控件的选取状态设定为非选取状态;E:default选择器中指定的样式仍然有效 3
E:indeterminate 选择器表单中一组单选框中没有任何一个单选框被选取时整组单选框的样式;如果用户选取了其中任何一个单选框;则该样式被取消指定

7、css中的counter计数器
counter是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对页面中的任意元素进行计数;实现类似于有序列表的功能。但与有序列表相比;css计数器可以对任意元素计数;同时还可以实现个性化计数

var()
var函数可以取代任何属性值;用法是先定义变量名并赋值;然后var(变量名)。
例如;color:white
background:var(color);