领悟CSS属性值语法,常用采用符

略知一二CSS属性值语法

2016/08/12 · CSS ·
属性值

本文由 伯乐在线 –

翻译,艾凌风
校稿。未经许可,禁止转发!
领悟CSS属性值语法,常用采用符。英文出处:Russ
Weakley。欢迎参预翻译组。

W3C 使用一定的语法来定义所有可能在 CSS 属性中行使的值。若是您早已看过
CSS 规范,你可能早就见过那种语法的选取 – 比如 border-image-slice
语法。让我们来看望:

CSS

<‘border-­image-­slice’> = [<number> |
<percentage>]{1,4} && fill?

1
<‘border-­image-­slice’> = [<number> | <percentage>]{1,4} && fill?

其一语法可能很难了然-若是你不精通其中的各样符号和她们是何许生效的话。不过,那是值得花时间去学习的。即使您知道了
W3C 是如何定义这一个属性值,你就能精通 W3C 的其余 CSS
规范。

亚洲必赢官网 1

概念

cascading style sheet 成叠样式表
最主要定义页面中的表现

selector{                /*选择器*/

  property1:value;  /*属性申明 = 属性名:属性值*/

  property2:value;/*末尾加分号*/

}

 

巴科斯范式

大家将从巴科斯范式初阶,因为这会支援大家掌握 W3C 的属性值语法。
巴科斯范式(
BNF
)是一种用来描述总计机语言语法的号子集。它的安排是令人侧目标,所以对于哪些表示语言那地点不设有抵触或歧义。
方今普遍利用的是巴科斯范式的扩充和编译版本,包罗恢宏巴科斯范式(
EBNF
)和扩客车科斯范式(
ABNF )。 一个 BNF 规范是一组按照下边的方式书写的平整:

CSS

<symbol> ::= __expression__

1
<symbol>  ::=  __expression__

右侧的局地总是一个非终结符,随后是一个 ::=
符号,这么些符号的意味是“可以被替换为”。左侧是一个 __expression__
,包罗一个或更加多用来演绎右边符号的意义的标志。 BNF
的焦点标准说,“左侧的此外都得以被左边的替换”。

发展史

1996 css1,1998 css2,2007 css2.1,2001 css3

注释用/**/

选择符

非终结符和终止符

非终结符是可以被轮换或再分开的记号。在 BNF 中,非终结符出现在 < >
中。在下边的事例中,<integer><digit>黑白终结符。

CSS

<integer> ::= <digit> | <digit><integer>

1
<integer>  ::=  <digit> | <digit><integer>

得了符就表示一个值不得被沟通或者再分叉。在上边的事例中,所有的数值都是截至符。

CSS

<digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

1
<digit>  ::=  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

引入

  • 外部样式表

<head>
    <link rel="stylesheet" href="base.css">
</head>

用link标签引入外部样式表,href属性里写css文件地方

  • 其中样式表

<head>
    <style>
        body{background-color:red}
        p{margin-left:20px}
    </style>
</head>

透过style标签引入,样式内容少时用其中样式。

  • 内嵌样式

<p style="color:red;margin-left:20px;">
    this is a paragraph
</p>

使得html与css杂合在同步不便于维护。不指出引用

浏览器私有属性前缀

选择符

CSS 属性值语法

即便 W3C 的 CSS 属性值语法是基于 BNF
的概念,但它如故有出入的。相似之处在于它起首于非终结符,分歧之处在于它应用“组合值”那种表达式来描述符号。
在上边的事例中,<line-width>是一个非终结符,<length>thinmedium
thick 就是组合值。

CSS

<line-­width> = <length> | thin | medium | thick

1
<line-­width>  =  <length> | thin | medium | thick

语法

/*用户列表*/
.m-userlist{margin: 0 0 30px}
.m-userlist.list{position: relative;height: 93px;overflow: hidden;}
.m-userlist.list ul{margin: -13px 0 0 -13px;zoom:1;}

selector{property1:value;property2:value;}
大括号以前为选用器,大括号里面属性注脚,每个属性评释用分号隔开,每个品质申明=属性名:属性值
注释/* */

·chrome.safari

    -webkit-

CSS Version
版本

组合值

有多种档次的组合值:关键词,基本数据类型,属性数据类型和非属性数据类型。

浏览器私有属性

  • chrome,safari
    -webkit
  • firefox
    -moz
  • IE
    -ms-
  • opera
    -o-
    民用属性为了同盟差距浏览器书写如下

.pic{
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transrorm:rotate(-3deg);
}

把个人的习性写着前边,把标准的写着前面。

·firefox

    -moz-

Compatibility
兼容性

1.关键词

最主要词出现时不带引号或者尖括号。它们被用作属性值。因为它们无法被轮换或者进一步划分,所以它们是终结符。在底下的例证中,thin
mediumthick 都是根本词。那表示它们得以被视作大家 CSS
中的值。

CSS

<line-­width> = <length> | thin | medium | thick

1
<line-­width>  =  <length> | thin | medium | thick

属性值语法

margin: [<length>|<percentage>|auto]{1,4}
主导元素,组和符号,数量符号

·IE

    -ms-

Syntax Samples
语法

2.中坚数据类型

基本数据类型定义主旨值,如<length><color>。它们是非终结值因为它们得以被实际的长度值或者颜色值来替换。在上边的例子中,<color>标记是一个焦点数据类型。

CSS

<‘background-color’> = <color>

1
<‘background-color’>  =  <color>

这个<color>在大家的 CSS
中得以被一个实事求是的颜色值替换,使用一个生死攸关词,一个增添的主要词,一个 RGB
颜色值,RGBA 值,HSL 或者 HSLA 值,或者 transparent 这些至关紧要词。

CSS

.example { background-color: red; } .example { background-color:
honeydew; } .example { background-color: rgb(50%,50%,50%); } .example {
background-color: rgba(100%,100%,100%,.5); } .example {
background-color: hsl(280,100%,50%); } .example { background-color:
hsla(280,100%,50%,0.5); } .example { background-color: transparent; }

1
2
3
4
5
6
7
.example { background-color: red; }
.example { background-color: honeydew; }
.example { background-color: rgb(50%,50%,50%); }
.example { background-color: rgba(100%,100%,100%,.5); }
.example { background-color: hsl(280,100%,50%); }
.example { background-color: hsla(280,100%,50%,0.5); }
.example { background-color: transparent; }

中心要素

  • 关键字
    -auto,solid,bold…
  • 类型
    主干类型(<length>,<percentage>,<color>…)
    其余项目(<‘padding-width’>.<color-stop>…)
  • 符号(/,)
    划分属性值
  • inherit,initial

·opera

    -o-

.pic{

    -webkit-transform:ratate(-3deg);

    -moz-transform:ratate(-3deg);

    -ms-transform:ratate(-3deg);

    -o-transform:ratate(-3deg);

    transform:ratate(-3deg);
}

Description
简介

3.属性数据类型

属性数据类型是一个用来定义属性真实值的一个非终结符号。它用尖括号包住属性的名字(使用引号包住)。在底下的例证中,<'border-width'>字符是一个属性数据类型。

CSS

<‘border-­width’> = <line-­width>{1,4}

1
<‘border-­width’>  =  <line-­width>{1,4}

属性数据类型或者会间接当做品质出现在大家的 CSS
中。在底下的例证中,border-width属性就被用来为.example类名定义一个
2px 的边框。

CSS

.example { border-width: 2px; }

1
.example { border-width: 2px; }

组和符号-空格

<‘font-size’> <‘font-family’>
七个都要出现且顺序一致

  • 合法值
    -12px arial
  • 不合规值
    -2em
    -arial 14px

属性值语法

·margin:[<length>|<percentage>|auto]{1,4}

品种选用符(Type Selectors)

4.非属性数据类型

非属性数据类型是一个和总体性名称不雷同的非终结符。但是,它定义了某个属性的各方面。举例来说,<line-width>不是一个性质,不过它是一个概念了种种<border>质量的数据类型。

CSS

<line-­width> = <length> | thin | medium | thick
<‘border-­width’> = <line-­width>{1,4}

1
2
<line-­width>  =  <length> | thin | medium | thick
<‘border-­width’>  =  <line-­width>{1,4}

组和符号-&&

<length>&&<color>
七个都要出现,顺序不须求

  • 合法值
    -green 2px
    -1em blue
  • 不合规值
    -blue

骨干因素

    ·关键字  -auto,solid,bold…

    ·类型 

             
-基本项目(<length>,<percentage>,<color>…)

            
-其余门类(<‘padding-width’>,<color-stop>…)

    ·符号(/,)

    ·inherit,initial

CSS1

组合值选用符

组合值可以因而下边各样形式之一被用到属性值选用符中。

组成符号-||

underline||overline||line-through||blink
足足出现一个相继没有关系

  • 合法值
    -underline
    -overline underline

结合符号

    ·空格 <‘font-size’> <‘font-family’>
八个着力类型必须出现,且按梯次出现。

        合法值 – 12px arial

    ·&& <length>&&<color>
多少个大旨质量必须出现但与各样毫不相关。

        合法值 – green 2px     – lem blue

    ·||  underline||overline||line-through||blink
至少出现一个,与种种毫无干系。

        合法值  -underline     -overline underline

    ·|  <color> | transparent 只可以出现一个

        合法值 -orange     -transparent

    []   bold [thin||<length>] 组合

        合法值 -bold thin    -bold 2em

IE4+ , NS4+

1.相邻值

组合值中一个随之一个的写法意味着那个值都必须以给定的逐条出现。在底下的例子中,这种语法列出了3个例外的值:value1
value2value3 。在 CSS
规则中,那多个值以科学的逐一现身在属性语法中才是卓有成效的。

JavaScript

/* Component arrangement: all in given order */ <‘property’> =
value1 value2 value3 /* Example */ .example { property: value1 value2
value3; }

1
2
3
4
5
/* Component arrangement: all in given order */
<‘property’> = value1 value2 value3
 
/* Example */
.example { property: value1 value2 value3; }

组和符号-|

<color>|transparent
八个着力要素只可以出现一个

  • 合法值
    -orange
    -transparent
  • 不合规值
    -blue transparent

多少符号

    ·无 <length>只有一个宗旨因素,则证实该中央要素只可以出现三遍。

        合法值 -1px    -10em

    ·+ <color-stop>,[,<color-stop>]+ 表示出现四遍依然频仍

        合法值 -#fff,red

    ·? inset?&&<color> 表示那么些宗旨属性可以出现也足以不出新

        合法值 -inset blue    -red

    ·{} <length>{}
表示那几个中央特质量够出现的次数,最少三回,最多几回

        <length>{2,4}

        合法值  -1px 2px    -1px 2px 3px

    ·* <time>[,<time>]* 可以出现0次,1次仍旧屡屡

        合法值 -1s    -1s,4ms

    ·# <time># 需求出现三次仍然屡屡,中间用逗号隔开

        合法值 -2s,4s

E1

2.&&

用两个&符号(&&)分隔的七个或者三个值意味着它们必须出现,以其余顺序。在底下的事例中,那种语法列出五个值,通过
&& 分隔。CSS 规则注明那八个值必须都要出新但是可能是其他顺序出现。

CSS

/* Component arrangement: all, in any order */ <‘property’> =
value1 && value2 /* Examples */ .example { property: value1 value2; }
.example { property: value2 value1; }

1
2
3
4
5
6
/* Component arrangement: all, in any order */
<‘property’> = value1 && value2
 
/* Examples */
.example { property: value1 value2; }
.example { property: value2 value1; }

组和符号-[]

bold[thin||<length>]
分组作用,大括号里可以看作一个整机

  • 合法值
    -bold thin
    -bold 2em

@规则语法

    @ 标识符 xxx;

    @ 标识符 xxx{}

    ·@media 主要用作响应式布局

    ·@keyframes 紧假如用作描述CSS动画的有的中间步骤

    ·@font-face 引入外部字体

以文档语言对象类型作为拔取符

3.|

|
符号分隔的两个或者七个值意味着它们中的一个必须出现。在底下的例子中,那种语法列出
3 个值,通过 | 分隔。下面的 CSS 规则展现了 3 种可能的抉择。

CSS

/* Component arrangement: one of them must occur */ <‘property’>
= value1 | value2 | value3 /* Examples */ .example { property: value1;
} .example { property: value2; } .example { property: value3; }

1
2
3
4
5
6
7
/* Component arrangement: one of them must occur */
<‘property’> = value1 | value2 | value3
 
/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }

数据符号-无

<length>
着力要素只可以出现三次

  • 合法值
    -1px
    -10em

通配选拔符(Universal
Selector)

4.||

||
分隔的三个或者七个值意味着它们中的一个要么多少个必须出现,以随机的次第。在底下的例子中,那种语法列出了
3 个值,它们经过 || 分隔。当您写 CSS
规则来合营这几个语法时,有许多可用的精选 –
你可以行使一个,多个,或者多少个值,以自由的逐条。

CSS

/* Component arrangement: one or more in any order */
<‘property’> = value1 || value2 || value3 /* Examples */
.example { property: value1; } .example { property: value2; } .example {
property: value3; } .example { property: value1 value2; } .example {
property: value1 value2 value3; } …etc

1
2
3
4
5
6
7
8
9
10
/* Component arrangement: one or more in any order */
<‘property’> = value1 || value2 || value3
 
/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }
.example { property: value1 value2; }
.example { property: value1 value2 value3; }
…etc

数码符号-+

<color-stop>[,<color-stop>]+
出现一次仍然频仍

  • 合法值
    -#ff,red
    -blue,green50%,gray
  • 不合规值
    -red

CSS2

5.[]

[]
包围的两个或者多少个值意味着组件内部是一个独自的分组。在底下的例子中,那种语法列出了
3 个值,不过里面七个冒出在 [] 内,所以它们是一个独自的分组。在 CSS
规则中有三个挑选是可用的:value1value3 或者 value2
value3

CSS

/* Component arrangement: a single grouping */ <‘property’> = [
value1 | value2 ] value3 /* Examples */ .example { property: value1
value3; } .example { property: value2 value3; }

1
2
3
4
5
6
/* Component arrangement: a single grouping */
<‘property’> = [ value1 | value2 ] value3
 
/* Examples */
.example { property: value1 value3; }
.example { property: value2 value3; }

数量符号-?

inset?&&<color>
骨干属性可以出现也得以不出新

  • 合法值
    -inset blue
    -red

NONE

组合值叠加

亚洲必赢官网 ,组合值也足以动用下面的 8 种艺术被增大。

数量符号-{}

<length>{2,4}
着力因素得以出现几遍,最少出现一回,最多出新两次

  • 合法值
    -1px 2px
    -1px 2px 3px
  • 非法值
    -1px

*

1.?

?
表示前置类型,一个词或一个组可以挑选出现零次如故出现一次。在上边的例证中,第一个值被放在[]里头和一个’,’在联名。放在这一组前边的
? 意味着 value1 必须出现,不过大家也可以应用 value1value2
,用逗号分隔。

CSS

/* Component multiplier: zero or one time */ <‘property’> =
value1 [, value2 ]? /* Examples */ .example { property: value1; }
.example { property: value1, value2; }

1
2
3
4
5
6
/* Component multiplier: zero or one time */
<‘property’> = value1 [, value2 ]?
 
/* Examples */
.example { property: value1; }
.example { property: value1, value2; }

数量符号-*

<time>[,<time>]*

可以出现零次,一回照旧屡屡

  • 合法值
    -1s
    -1s,4ms

选定文档目录树(DOM)中的所有品类的单一对象

2.*

*
表示前置类型,一个词或一个组现身零次或者屡屡。在底下的例子中,第三个值被放在[]中间和一个’,’在联名。放在这一组前边的
* 意味着 value1必须出现,可是我们也得以行使任意次
<value2>,用逗号分隔。

CSS

/* Component multiplier: zero or more times */ <‘property’> =
value1 [, <value2> ]* /* Examples */ .example { property:
value1; } .example { property: value1, <value2>; } .example {
property: value1, <value2>, <value2>; } .example { property:
value1, <value2>, <value2>, <value2>; } …etc

1
2
3
4
5
6
7
8
9
/* Component multiplier: zero or more times */
<‘property’> = value1 [, <value2> ]*
 
/* Examples */
.example { property: value1; }
.example { property: value1, <value2>; }
.example { property: value1, <value2>, <value2>; }
.example { property: value1, <value2>, <value2>, <value2>; }
…etc

数量符号-#

<time>#
急需现身五次依然频仍,中间需求用逗号隔开

  • 合法值
    -2s,4s
  • 不合规值
    -1ms 2ms

饱含选取符(Descendant
Selectors)

3.+

+
表示前置类型,一个词或一个组可以拔取出现两遍依然出现多次。在下边的事例中,value前边的
+ 意味着 <value> 可以出现三次如故反复 – 不需求逗号分隔。

CSS

/* Component multiplier: one or more times */ <‘property’> =
<value>+ /* Examples */ .example { property: <value>; }
.example { property: <value> <value>; } .example { property:
<value> <value> <value>; } …etc

1
2
3
4
5
6
7
8
/* Component multiplier: one or more times */
<‘property’> = <value>+
 
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
…etc

属性值例子

  • padding-top:<length>|<percentage>
  • 合法值
    -padding-top:1px
  • 不合规值
    -padding-top:1em 5%
  • box-shadow:[inset?&&[<length>{2,4}&&<color>?]]#|none
  • 合法值
    box-shadow:3px 3px rgb(50% 50% 50%),red 0 0 4px inset

CSS1

4.{ A }

{} 中包涵一个单纯的数字代表前置类型,一个词或一个组出现
A次。在上面的例子中,value的实例必须出现四遍,以便使申明有效。

CSS

/* Component multiplier: occurs A times */ <‘property’> =
<value>{2} /* Examples */ .example { property: <value>
<value>; }

1
2
3
4
5
/* Component multiplier: occurs A times */
<‘property’> = <value>{2}
 
/* Examples */
.example { property: <value> <value>; }

@规则语法

@import"subs.css";
@charset"UTF-8";
@media print{
    body{font-size: 10pt}
}
@keyframes fadeint{
    0%{top: 0;}
    50%{top: 30px;}
    100%{top: 0;}
}

@标识符 xxx;
@标识符 xxx {}

IE4+ , NS4+

5. {A, B}

{}中含有五个以逗号分隔的数字对代表前置类型,一个词或一个组现身至少 A
次,至多 B
次。在下边的例证中,value并发至少五回,至多一回用来定义这一个特性,那么些值不要求用逗号分隔。

CSS

/* Component multiplier: at least A and at most B */
<‘property’> = <value>{1,3} /* Examples */ .example {
property: <value>; } .example { property: <value>
<value>; } .example { property: <value> <value>
<value>; }

1
2
3
4
5
6
7
/* Component multiplier: at least A and at most B */
<‘property’> = <value>{1,3}
 
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }

@规则

  • @media
    用来做布局,设备唯有切合了媒体询问条件,里面的体制才能立见功能
  • keyframes
    用来讲述css动画的中间步骤
  • font-face
    引入外部字体,十页面中字体更加助长

E1 E2

6.{A,}

这里的 B
可以省略,代表至少出现一回,对于上限没有限制。在底下的例证中,value足足出现五遍,可是也足以伸张任意数量value。这一个值不须求用逗号分隔。

CSS

/* Component multiplier: at least A, with no upper limit */
<‘property’> = <value>{1,} /* Examples */ .example {
property: <value>; } .example { property: <value>
<value>; } .example { property: <value> <value>
<value>; } …etc

1
2
3
4
5
6
7
8
/* Component multiplier: at least A, with no upper limit */
<‘property’> = <value>{1,}
 
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
…etc

选取具有被E1暗含的E2。即E1.contains(E2)==true

7.#

#
表示前置类型,一个词或者一个组现身一遍仍然屡屡,用逗号分隔。在上面的例子中,可以接纳一个照旧多少个value,每个由逗号分隔。

CSS

/* Component multiplier: one or more, separated by commas */
<‘property’> = <value># /* Examples */ .example {
property: <value>; } .example { property: <value>,
<value>; } .example { property: <value>, <value>,
<value>; } …etc

1
2
3
4
5
6
7
8
/* Component multiplier: one or more, separated by commas */
<‘property’> = <value>#
 
/* Examples */
.example { property: <value>; }
.example { property: <value>, <value>; }
.example { property: <value>, <value>, <value>; }
…etc

子对象选用符(Child Selectors)

8.!

一个组后边的 !
表示这么些组是必备的还要至少爆发一个值。在上面的事例中,那种语法列出了 3
个值,通过 | 分隔。上边的 CSS 规则显得了二种可能的拔取:

CSS

/* Component multiplier: required group, at least one value */
<‘property’> = value1 [ value2 | value3 ]! /* Examples */
.example { property: value1 value2; } .example { property: value1
value3; }

1
2
3
4
5
6
/* Component multiplier: required group, at least one value */
<‘property’> = value1 [ value2 | value3 ]!
 
/* Examples */
.example { property: value1 value2; }
.example { property: value1 value3; }

CSS2

<'text-shadow '>语法:一个事例

让我们来探视
<'text-shadow'>本条特性作为例子。让大家来探望规范中是如何定义这么些特性的:

CSS

<‘text-shadow’> = none | [ <length>{2,3} && <color>?
]#

1
<‘text-shadow’> = none | [ <length>{2,3} && <color>? ]#

咱们得以解释这一个标记:

  • | 代表大家可以运用首要词 none 或组 []
  • # 代表大家得以采用一遍或频仍以此组,用逗号分隔。
  • 在组的里边,{2,3}代表大家得以运用两到多个<length>
  • && 代表大家必需包蕴所有的值,不过它们得以是随机顺序。
  • 只有是为了进一步神秘,<color>末尾包含一个
    ?,那象征它可以出现零次或四遍。

用通俗的言语可以发布为:

不点名或指定一个或多个组,那个组包罗 2 – 3
个象征长度的值和一个可选额颜色值。长度值和颜色值可以写成自由顺序。

那代表大家用不一样的主意来写咱俩的 text-shadow
属性。举例来说,我们得以设置 text-shadow 属性为 none:

CSS

.example { text-shadow: none; }

1
.example { text-shadow: none; }

俺们得以只写多少个长度值,那表示大家将设定阴影的程度和垂直偏移,可是从未歪曲半径或者颜色值。
因为没有安装模糊半径,初步值是
0;所以,阴影是深深的。颜色没有定义,文本的颜色将用来阴影的水彩。

CSS

.example { text-shadow: 10px 10px; }

1
.example { text-shadow: 10px 10px; }

设若大家利用 3 个长度值,大家就为影子设置了模糊半径,水平和垂直偏移。

CSS

.example { text-shadow: 10px 10px 10px; }

1
.example { text-shadow: 10px 10px 10px; }

俺们可以涵盖一个颜色值,它可以放在五个或者多个长度值的眼前或前面。在底下的例证中,灰色的颜色值可以被放在一组值的任一端。

.example { text-shadow: 10px 10px 10px red; } .example { text-shadow:
red 10px 10px 10px; }

1
2
.example { text-shadow: 10px 10px 10px red; }
.example { text-shadow: red 10px 10px 10px; }

终极,大家得以蕴含多少个text-shadow,写成逗号分隔的组。阴影效果将从前到后被利用:第三个黑影在地点,其它的在末端。阴影不可能遮住文字本身。在上边的例子中,黑色的阴影将效用在绿青色阴影上方。

CSS

.example { text-shadow: 10px 10px red, -20px -20px 5px lime; }

1
2
3
4
5
.example {
    text-shadow:
        10px 10px red,
        -20px -20px 5px lime;
}

NONE

总结

比方您写 CSS 为生,驾驭怎么着正确地写有效的 CSS
属性值是这一个关键的。一旦您精晓了不一样值之间是怎么样结合叠加的, CSS
的属性值语法就变得进一步便于了解。然后就更易于阅读种种条条框框,写有效的 CSS.

恢宏阅读,请查看以下网站:

  • “Value Definition Syntax” in “CSS Values and Units Module Level
    3,” W3C
  • “CSS
    Reference,”
    Mozilla Developer Network
  • “How to Read W3C
    Specs,” J. David Eisenberg,
    A List Apart

打赏匡助我翻译更加多好小说,谢谢!

打赏译者

E1 > E2

打赏协理自己翻译越来越多好小说,谢谢!

任选一种支付办法

亚洲必赢官网 2
亚洲必赢官网 3

1 赞 5 收藏
评论

挑选具有作为E1子对象的E2

至于作者:殊

亚洲必赢官网 4

web前端,爱音乐,爱篮球,爱游戏,目标全栈.
个人主页 ·
我的篇章 ·
10 ·
   

亚洲必赢官网 5

隔壁选用符(Adjacent Sibling
Selectors)

CSS2

NONE

E1 + E2

慎选紧贴在对象E1之后的富有E2对象

属性选取符(Attribute
Selectors)

CSS2

NONE

E1[attr]

分选具有attr属性的E1

属性选择符(Attribute
Selectors)

CSS2

NONE

E1[attr=value]

挑选具有attr属性且属性值等于value的E1

品质选用符(Attribute
Selectors)

CSS2

NONE

E1[attr~=value]

选料具有attr属性且属性值为一用空格分隔的字词列表,其中一个相当于value的E1

质量接纳符(Attribute
Selectors)

CSS2

NONE

E1[attr|=value]

选料具有attr属性且属性值为一用连字符分隔的字词列表,由value开头的E1

ID选择符(ID Selectors)

CSS1

IE4+ , NS4+

#sID

以文档目录树(DOM)中作为对象的唯一标识符的ID作为挑选

类选用符(Class Selectors)

CSS1

IE4+ , NS4+

E1.className

在HTML中可以运用此种选拔符。其成效等同E1[class~=className]

慎选符分组(Grouping)

CSS1

IE4+ , NS4+

E1,E2,E3

将同样的定义应用于四个选用符,可以将选用符以逗号分隔的方法并为组

通配接纳符

语法: *

 

说明: 

选定文档目录树(DOM)中的所有品种的十足对象。

一经通配拔取符不是纯粹选拔符中的绝无仅有组成,“*”可以简简单单。

时下IE5.5+尚不协理此种选用符。

 

示例: 

*{
text-decoration:none; }//所有可知元素都会继续此样式.

*[lang=fr] {
font-size:14px; width:120px; }

*.div {
text-decoration:none; }

 

E
类型选取符

语法: E1

 

表达:
以文档语言对象类型作为拔取符。

 

示例: 

td { font-size:14px;
width:120px; }

a {
text-decoration:none; }

 

属性接纳符

语法: 

  1. E1[attr]

  2. E1[attr=value]

  1. E1[attr~=value]
  1. E1[attr|=value]

 

说明: 

  1. 选料具有attr属性的E1

2.
精选具有attr属性且属性值等于value的E1

3.
取舍具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1。那里的value不能包涵空格

4.
选用具有attr属性且属性值为一用连字符分隔的字词列表,由value开端的E1

当下IE5.5+尚不援救此种选拔符。

 

示例: 

h[title] { color:
blue; } /* 所有具有title属性的h对象 */ 

a[target=”_blank”]{
background:url(‘….’) }

span[class=demo] {
color: red; } 

div[speed=”fast”][dorun=”no”]
{ color: red; } 

a[rel~=”copyright”] {
color:black; }

补:

[att^=val]
//若是att那一个特性开端包括val那么些值就使用那几个样式.

[att*=val]
//倘使att那些特性任意处包括val那么些值就采取这一个样式.

[att$=val]
//倘诺att那几个特性结尾包括val这么些值就使用这几个样式.

例:a[href$=”.zip”]{
background:url(‘….’) } //结尾是.zip则动用此体制

饱含选拔符(后代选取符)

语法: E1 E2

 

证实:
选拔具有被E1分包的E2。即E1.contains(E2)==true。

 

示例: 

table td {
font-size:14px; } 

div.sub a {
font-size:14px; }

#div1 div2{
ID为div2的样式 }

 

子对象选拔符

语法: E1 > E2

 

说明: 

挑选具有作为E1子对象的E2。

当前IE5.5+尚不支持此种选取符。

 

示例: 

body > p {
font-size:14px; }

/*
所有作为body的子对象的p对象字体尺寸为14px */ 

div ul>li p {
font-size:14px; }

 

E+F
相邻选择符(往下"相邻一个"起功效)

例:

#pTest5+p{ text-decoration:underline;
}

<p
id=”pTest4″>this p4</p>

<p
id=”pTest5″>this p5</p>

<p
id=”pTest6″>this p6</p>   //惟有这一个起作用

<p
id=”pTest7″>this p7</p>

ID选择符

语法: #sID

 

表明:
以文档目录树(DOM)中作为对象的绝无仅有标识符的ID作为采纳符。

 

示例: #note { font-size:14px;
width:120px;}

 

CLASS
类拔取符

语法: E1.className

 

说明: 

在HTML中得以采用此种选拔符。其效能等同E1[class~=className]。请参阅属性采取符( Attribute
Selectors)。

在IE5+,可以为目标的class属性(特性)指定多于一个值(className),其格局是指定用空格隔开的一组样式表的类名。

 

示例: 

div.note {
font-size:14px; }

/* 所有class属性值等于(包罗)”note”的div对象字体尺寸为14px */ 

.dream { font-size:14px;
}

/*
所有class属性值等于(包蕴)”note”的目的字体尺寸为14px */

选料符分组

语法: E1,E2,E3

 

证实:
将同样的定义应用于八个接纳符,可以将甄选符以逗号分隔的不二法门并为组。

 

示例: 

.td1,div a,body {
font-size:14px; }

注:ID,CLASS选拔符的分别是,ID选用符是唯一的,然而CLASS可以生出众多了.

子对象接纳符和含有拔取符的界别是,子对象接纳符只对了对象起成效而不对其子子对象起成效.而带有选拔符对其所有子对象都起效果

 

选拔符的优先级:*:Element:class:id:style
——  
0:1:10:100:1000 通配符,元素,类,ID,内联

div.div2_class{
color:red; }//1+10

body div
#div2_class{ color:green; }//1+1+100

倘使优先级一样,前面的会冲掉前边的样式.

 

一些非正规的条条框框:

!important的宣示优先级高于一切

!important

语法:
sRule!important 

表明:
sRules :  样式表条目 进步指定样式规则的应用优先权。 

示例:div
{ color:red!important }

先期级一样的信守就近原则(样式地方前后和血脉就近)

大局选拔符优先级、子选取符和继承样式优先级最低
特殊性值可以认为是0.

 

 

网站地图xml地图