2.2 CSS3基本语法 + 选择器

最新推荐文章于 2021-07-16 07:55:56 发布

HERO_1990

最新推荐文章于 2021-07-16 07:55:56 发布

阅读量112

点赞数

原文链接：http://www.cnblogs.com/iMirror/p/4284323.html

版权

1. 基本语法

　　selector1, selector2{

　　　　property1 : value1;

　　　　property2 : value2;

　　}

　　如果value大于1个单词(如font-family的值可能是sans serif), 需要加上引号(font-family:"sans serif")

2. 高级语法

　　继承效果

3. 派生选择器

　　依据元素位置的上下文关系定义样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <p>
        <strong>派生选择</strong>
    </p>
</body>
</html>

//派生选择 标签从外到内用空格隔开
p strong{
    color: aqua;
}

4. id 选择器

　　为标有 id 的元素指定样式, 以 # 来定义

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <p id="pid">
        <strong>派生选择</strong>
    </p>
</body>
</html>

//id选择器用#表示, 上下文位置又是派生选择器, 两者一起使用
#pid strong{
    color: aqua;
}

4. 类选择器

　　用.来表示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <p class="pclass">
        <strong>派生选择</strong>
    </p>
</body>
</html>

//类选择 和 派生选择 结合使用
.pclass strong{
    color: aqua;
}

5. 属性选择器

转载于:https://www.cnblogs.com/iMirror/p/4284323.html

HERO_1990

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.2 CSS3基本语法 + 选择器

1. 基本语法　　selector1, selector2{　　　　property1 : value1;　　　　property2 : value2;　　}　　如果value大于1个单词(如font-family的值可能是sans serif), 需要加上引号(font-family:"sans serif")2. 高级语法　　继承效果3. ...
复制链接

扫一扫