【美高梅开户网址】WEB标准学习路程之,驾驭CSS属性值语法

接头CSS属性值语法

2016/08/12 · CSS ·
属性值

本文由 伯乐在线 –

翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:Russ
Weakley。欢迎出席翻译组。

W3C 使用一定的语法来定义所有大概在 CSS 属性中选用的值。如若您早就看过
CSS 规范,你或许已经见过那种语法的运用 – 比如 border-image-slice
语法【美高梅开户网址】WEB标准学习路程之,驾驭CSS属性值语法。。让我们来看看:

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地图