CSS选择器

2020-05-10 本文已影响0人 Juha

语法：

属性声明 = 属性名：属性值

selector{
property1:value;
property2:value;
}

私有属性：

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);
transform:rotate(-3deg);
}
为了能够兼容所有的浏览器。

属性值语法

基本元素 + 组合符号 + 数量符合
例如margin是属性名，length是基本元素，组合符号是|，数量是{1,4}

属性值语法

基本元素

关键字

auto solid bold

类型

基本类型(<length>,<percentage>,<color>...)
其他类型(<'padding-width'>,<color-stop>...)

符号(/,)

inherit,initial

文档中是隐藏的，因为每个元素都可以取到

组合符号

组合符号空格

顺序不能反，必须都出现

空格组合符号

组合符号 &&

顺序无所谓，必须都出现

&&组合符

组合符号||

至少要出现一个

组合符号||

组合符号|

只能出现一个

组合符号|

组合符号[]

分组的作用

组合符号[]

数量符号

数量符号为空

数量符号无

数量符号+

出现一次或者多次

数量符号+

数量符号？

可出现可不出现

数量符号？

数量符号{}

可以出现的次数范围

数量符号{}

数量符合*

可以出现0次或者n次

数量符合*

数量符合#

出现1次或者多次，分隔符为，

数量符合#

举例

@规则语法

两种用法：
1、@标识符 xxx;

2、@标识符 xxx{}

常用规则
@media
@keyframes
@font-face 引入外部字体

@规则

选择器

选择器分类

选择器权重

不进位的计算，即id永远高于所有，10永远高于1，11个1还是不如一个10

举例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #id1{
            background: blue;
        }
        .c1 .c2 .c3 .c4 .c5 .c6 .c7 .c8 .c9 .c10 .c11{
            background: red
        }
    </style>
</head>

<body>

        <div id="id1" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">Hello</div>
</body>
</html>
/*即便是11个类选择器，还是不如一个id选择器的权重高*/