04-CSS 选择器（基础选择器、高级选择器） CSS 的继承性和层叠性

一、CSS 基础

HTML 超文本标记语言从语义的角度描述页面的结构

CSS 层叠样式表从审美的角度负责页面的样式

JS JavaScript 从交互的角度描述页面的行为

    <style type="text/css">
    </style>

css 对换行不敏感，对空格也不敏感，但是一定要有标准的语法。冒号：分号；都不能省略

常见属性

字符颜色： (快捷键：c)

color: red;

字号大小：(单位是px 必须加 ,快捷键：fos)

font-size: 20px;

背景颜色：(快捷键：bgc)

background-color: blue;

加粗/不加粗：(快捷键：fwd / fwn)

 font-weight: bold;
 font-weight: normal;

斜体/不斜体：(快捷键是：fsi / fsn)

font-style: italic;
font-style: normal;

下划线/无下划线：(快捷键：tdu / tdn)

text-decoration: underline;
text-decoration: none;

二、基础选择器

2.1 标签选择器

CSS 中重要的两部分：

选择器：决定着怎么选

属性：决定着是什么

   <style type="text/css">
        li{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="aa">哈哈</li>
    </ul>
</body>

1、所有的标签都可以是选择器。比如：ul，li,label,dt,dl等。

2、无论标签藏的多深都可以被选择上。

3、标签选择器选择的是页面上所有这种类型的标签，所以经常描述”共性“，无法描述某一个元素的”个性“。

2.2 id 选择器

    <style type="text/css">
        #aa{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li id="aa">哈哈</li>
    </ul>
</body>

id 选择器的选择符号是：#

任何的HTML 标签都可以有 id 属性，表示这个标签的名字(大小写严格区分)。

1、标签的名字只能有数字、下划线、字母。

2、必须以字母开头。

3、不能和标签同名。

一个HTML 页面，不能出现相同的 id,哪怕他们不是一个类型。

一个标签可以被多个选择器选择共同作用。这就是简单的层叠式。

2.3 类选择器

class 选择器的符号是 .

class 和 id 非常相似，任何的标签都可以携带 class 属性。calss 属性可以重复，页面上可以出现相同的class 类。

    <style>
        .cs{
            background-color: red;
        }
    </style>
</head>
<body>
       <h class="cs">测试一下</h>
       <h>测试两下</h>
       <p class="cs">关心一下</p>
       <h>哈哈哈哈</h>

</body>

同一个标签，可能同时属于多个类，用空格隔开。

    <style>
        .cs{
            background-color: red;
        }
    </style>
</head>
<body>
        <!--h3 标签 就同时属于两个类，一个是类 cs 一个是类dd-->
       <h3 class="cs dd">测试一下</h3>  
       <h5 class="bb">测试两下</h5>
       <p class="cs aa">关心一下</p>
       <h4>哈哈哈哈</h4>
</body>

注：

1、class 可以重复，也就是说，同一个页面上可以有多个标签同时属于某一个类。

2、同一个标签可以同时携带多个类。

关于 id 和 class 的取舍问题，尽量是用class,除非极特殊的情况下可以用 id, 因为 id 一般是在 js 中用，所以尽量在CSS 中不用 id

三、高级选择器

3.1 后代迭代器

3.2 交集选择器

3.3 交集选择器（分组选择器）

3.4 通配符

3.5 不常见的选择器

四、CSS 的继承性和层叠性

4.1 继承性

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

color、text-开头的、line-开头的、font-开头的

这些关于文字样式的，都是能够继承的，所有关于盒子的，定位的，布局的属性都不能继承。继承是从自己开始，直到最小的元素。

4.2 层叠性

层叠性：就是 CSS 处理冲突的能力，所有的权重计算，没有任何兼容问题。

当选择器选择上了某个元素的时候，权重的计算方式是：

id 的数量，类的数量，标签的数量

分别数一下 id 选择器的数量、类选择器的数量、标签选择器的数量，然后从前往后进行比较。

如果权重一样，那么以最后出现的为准。

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

如果大家都是0，那么有一个就近原则，谁描述的近听谁的。

总结：

1、先看有没有选中，如果选中了,那么以（id数，class 数，标签数）来计算权重，谁大听谁的。如果都一样，听后写的为准。

2、如果没有选中，那么权重是0，如果大家都是0，就近原则。

04-CSS 选择器（基础选择器、高级选择器） CSS 的继承性和层叠性

猜你喜欢