1.css基础选择器

1.1.标签选择器

就是用标签名来当做选择器。

1）所有标签都能够当做选择器，比如body、h1、dl、ul、span等等

2）不管这个标签藏的多深，都能够被选择上。

3）选择的是所有的，而不是某一个。所以是共性，而不是特性。

比如网易，希望页面上所有的超级链接都没有下划线：

    a{
            /*去掉下划线：*/
            text-decoration: none;
    }

1.2. id选择器

1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线。大小写严格区别，也就是说mm和MM是两个不同的id。

2）同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。也就是说，如果有一个p的id叫做haha，这个页面内，其他所有的元素的id都不能叫做haha。

#lj1{
            font-size: 60px;
            font-weight: bold;
            color:black;
    }

1.3类选择器

.就是类的符号。类的英语叫做class。所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：

    .teshu{
        color: red;
    }

        <h3>我是一个h3啊</h3>
        <h3 class="teshu">我是一个h3啊</h3>
        <h3>我是一个h3啊</h3>
        <p>我是一个段落啊</p>
        <p class="teshu">我是一个段落啊</p>
        <p class="teshu">我是一个段落啊</p>

同一个标签，可能同时属于多个类，用空格隔开,这样，这个h3就同时属于teshu类，也同时属于zhongyao类,所以要总结两条：

a. class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；

b.同一个标签可以同时携带多个类。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .lv{
            color:green;
        }
        .da{
            font-size: 60px;
        }
        .xian{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p class="lv da">段落1</p>
    <p class="lv xian">段落2</p>
    <p class="da xian">段落3</p>
</body>
</html>

image.png

c.尽可能的用class，除非极特殊的情况可以用id,id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

2.CSS高级选择器

2.1后代选择器

空格可以多次出现，.div1里面的后代.li2里面的p，后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器，代选择器，描述的是祖先结构。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .div1 .li2 p{
            color:red;
        }
    </style>
</head>
<body>
    <div class="div1">
        <ul>
            <li>
                <p>段落</p>
                <p>段落</p>
                <p>段落</p>
            </li>
            <li class="li2">
                <p>段落</p>
                <p>段落</p>
                <p>段落</p>
            </li>
            <li>
                <p>段落</p>
                <p>段落</p>
                <p>段落</p>
            </li>
        </ul>
    </div>
    <div>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>
</body>
</html>

2.2交集选择器

选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签,交集选择器没有空格，所以div.red和div .red不是同一个意思哟，交集选择器也可以连续交h3.special.zhongyao{color:red;3 }（一般不要这么写）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        h3.special{
            color:red;
        }
    </style>
</head>
<body>
    <h3>我是标题</h3>
    <h3 class="special">我是标题</h3>
    <h3 class="special">我是标题</h3>
    <p class="special">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <a href="" class="xixi">aaa</a>
</body>
</html>

image.png

2.3并集选择器（分组选择器）

用逗号就表示并集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        h3,li{
            color:red;
        }
    </style>
</head>
<body>
    <h3>我是一个标题</h3>
    <p>是一个段落</p>
    <ul>
        <li>我是一个列表</li>
    </ul>
</body>
</html>

image.png

2.4.通配符*

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            color:red;
        }
    </style>
</head>
<body>
    <p>段落</p>
    <h3>标题</h3>
    <ul>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ul>
</body>
</html>

image.png

3.CSS的继承性和层叠性

3.1.继承性

关于文字样式的，都能够继承，比如color、 text-开头的、line-开头的、font-开头的。；所有关于盒子的、定位的、布局的属性都不能继承，继承性是从自己开始，直到最小的元素,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            color:blue;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
</body>
</html>

image.png

3.2.层叠性

层叠性：就是css处理冲突的能力。所有的权重计算，没有任何兼容问题！CSS像艺术家一样优雅，像工程师一样严谨

a.当选择器，选择上了某个元素的时候，那么要这么统计权重：id的数量，类的数量，标签的数量

image.png

b.如果权重一样，以后出现的为准

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box2 div .pp{
            color:red;
        }
        #box1 .hezi2 p{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="hezi1" id="box1">
        <div class="hezi2" id="box2">
            <div class="hezi3" id="box3">
                <p class="pp">猜猜我是什么颜色？</p>
            </div>
        </div>
    </div>
</body>
</html>