css随笔2—选择符

1.元素选择符

选择符一般是HTML预定义的某个元素例如p,h3,em,a,甚至html本身

例如:html {声明块}

   h1 {声明块}

声明块中有一个或多个声明。声明的格式:属性:值(一个关键字或以空格分隔的多个关键字);声明之间用“;”隔开

2.群组选择符(将同一个样式应用到多个元素上)

多个选择符之间用逗号隔开

通用选择符  * {声明块}  匹配所有元素

3.类选择符

首先为元素设置class属性

在CSS中,选择类的句法是在class属性的值前面加上“.”,并可以结合元素选择符一起使用,例如 p.app {color:red;} 表示包含app的p元素。

元素可设置多个类,中间用空格隔开

4.ID选择符

首先为元素设置id属性

在CSS中,选择类的句法是在class属性的值前面加上“#”,例如 #app {color:red;} 

一个ID能且只能使用一次

5.属性选择符

元素名[属性名] {声明块}

元素名[属性名="属性值"] {声明块}

  eg [foo~="bar"] 选择的元素有foo属性,且其值是包含bar这个词的一组词

    [foo*="bar" ] 选择的元素有foo属性,且其值包含bar

    [foo^="bar"] 选择的元素有foo属性,且其值以bar开头 

      [foo$="bar"] 选择的元素有foo属性,且其值以bar结尾

6.后代选择符

 父元素+空格+后代元素 {声明块} :层级无限,只要是后代元素就渲染

 父元素>子元素{声明块}:只选择一个元素的子元素

 相邻同胞元素间用“+”  {声明块}

 选择一个元素后面同属一个父元素的另一个元素,用"~"

7.伪类选择符(可拼接)

结构伪类

only-child    元素是另一个元素的唯一子元素

:only-of-type  匹配同胞中唯一的那种元素

:first-child   选择一个元素的第一个子元素,例如选择一个元素中第一个em元素—em:first-child

:last-child      选择一个元素的最后一个子元素

:first-of-type  选择一个元素中某种元素的第一个(同胞元素中找,不是找整个文档中的第一个)

:last-of-type    选择一个元素中某种元素的最后一个

:nth-child(n)    选择一个元素的第n个子元素,even和odd 奇偶

:nth-last-child()  同上,从后往前计算

:nth-of-type()   选择每第n个某种元素

:nth-last-oftype()同上,从后往前计算

链接伪类

:link      未访问的链接

:visited    已访问的链接

用户操作伪类

:focus     获得输入焦点的元素

:hover    鼠标指针放置其上的元素

:active    用户输入激活的元素

UI状态伪类

:enable     接受输入的元素

:disable    不接受输入的元素

:checked     用户或文档默认选中的单选按钮或复选框

:default     默认选中的单选按钮、复选框或选项

:valid      满足所有数据有效性语义的输入框

:invalid     不满足所有数据有效性语义的输入框

:in-range     输入的值在最小值和最大值之间的输入框

:out-of-range    输入的值小于控件允许的最小值或大于控件允许的最大值的输入框

:required   必须输入值的输入框

:optional   无需一定输入值的输入框

:read-write        可由用户编辑的输入框

:read-only    不能由用户编辑的输入框

:not()     否定伪类 依附在元素上,括号中是简单的选择符

8.伪元素选择符

::first-letter   用于修饰任何非行内元素的首字母(只能用于块级元素)

::first-line     用于修饰元素的首行文本(只能用于块级元素)  

 

css随笔2—选择符

上一篇:CSS(7)列表样式


下一篇:微信公共平台开发1 .net