CSS初级篇 - CSS基础选择器、选择器权重 - Version：0623_css基础选择器中各选择器权重值各是多少-优快云博客

本文介绍了HTML中的表单元素及默认值设置方法，包括复选框、单选按钮与下拉菜单等，并深入探讨了CSS的选择器及其优先级，帮助初学者掌握网页布局的基本技巧。

HTML高级篇 - <input>标签，复选框；如何设置单选或者复选的默认值？checked属性即是解决此问题而生，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
        <form method="GET" action="">
            Please choose your favourite fruit:
            <P>
                1.apple
                <input type="checkbox" name="fruit" value="apple" checked="checked"> <!--复选框默认选择项设置 -->
            </P>
            <P>
                2.orange
                <input type="checkbox" name="fruit" value="orange">
            </P>
            <P>
                3.banana
                <input type="checkbox" name="fruit" value="banana">
            </P>
            <input type="submit" value="提交">
        </form>
</body>

</html>

<form>表单组件之<select>标签，下拉菜单；它通常与<option>标签成对组合使用，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>
        Province:
    </h1>
    <form method="GET" action="">
        <select name="province" id="">
            <option value="beijing">beijing</option>
            <option value="tianjing">tianjing</option>
            <option value="urumuqi">urumuqi</option>
            <option value="shanghai">shanghai</option>
            <option value="changji">changji</option>
        </select>
        <input type="submit" value="提交">
    </form>
    
</body>

</html>

上述内容讲述的是HTML 4.0.1版本，HTML语言的标签大约有250+个，并且每年都在增加，但是实际开发中最常用的即为上述所讲的这些，而其余的基本没有太大的用处。

编程模式，MVC模式，结构，样式，行为相分离；

CSS初级篇的基础知识：

体现专业素养的问题，我们和什么打交道最多吗？浏览器。主流浏览器和内核有哪些？

占有一定的市场份额，其二，必须有自己独立的浏览器内核；一个浏览器有shell与内核两部分构成；运转效率，识别、操作代码，是内核的功能与作用；

当前主流的浏览器有：IE，Chrome，Safari，Firefox，Opera，对应内核分别为：trident，Webkit/blink，Webkit，Gecko，Presto；

HTML：结构，CSS：样式，JavaScript：行为，三者相分离；

CSS做的事就是装修与涂料的事情；CSS，cascading style sheet，层叠样式表；

引入CSS的方法：1.行间样式；

2.页面级CSS；在<head>标签中添加<style>标签，在<style></style>标签中可以添加CSS代码；

3.外部CSS文件；在<head>标签中添加<link>标签；

HTML文件是如何引入到网页中的？是服务器中的HTML，CSS，JavaScript文件下载到客户端电脑本地存储，然后由本地客户端电脑上的浏览器进行加载与解析，执行；

浏览器是下载一些代码就执行，边下载边执行；浏览器会开启一个新的线程，同时进行异步下载；

CSS选择器：

1.id选择器；标签的id属性，必须是一一对应的，即一个标签只能给其分配一个唯一的id；同时，一个id也只能分配给一个标签，具有排他性；

#only{
    background-color:red;
}

2.class选择器；拿特点抓住元素；class属性与元素之间的关系是“多对多”的关系，即一个元素允许有多个class属性，同时一个class名称可以对应多个元素；

HTML代码如下：

<body>
  <div class="demo demo1">123</div><!--同一个元素分配两个class属性，即一个人穿两件衣服的效果 -->
  <div class="demo">234</div>
</body>

对应外部CSS文件代码如下：

.demo{
    background-color:yellow;
}
.demo1{
    color:#f40;
}

3.标签选择器，简单直观；可以进行批量选择；HTML代码如下：

<body>
  <div>123</div>
  <div>234</div>
</body>

外部CSS文件的代码如下：

div{
    background-color:black;
}

4.通配符选择器；即“*”符号；当时用它进行选择时，将会选择所有的标签元素，所以这里“*”代表的含义是所有的，任意的；如：

*{
    background-color:green;
}

重点：考察选择器的优先级（或权重）问题；比如给一个<div>标签，同时给ID属性与class属性，然后分别使用id选择器与class选择其实对该标签进行操作，看谁“更厉害”；

比较之后发现，权重顺序如下：行间样式 > id选择器 > class选择器 > 标签选择器 > 通配符选择器；

5.属性选择器：不管属性值是什么，只要具有所列属性的标签均被选择出来；使用时采用中括号将属性名称包裹起来，或者直接将属性名与属性值一起完整填写进入中括号中，如下：

[class]{
    background-color:red;
}
/* 或者 */
[class="demo"]{
    background-color:red;
}

更新选择器优先级排序，如下：比较之后发现，优先级顺序如下：行间样式 > id选择器 > class选择器 | 属性选择器 > 标签选择器 > 通配符选择器；

可以通过！important修改上述选择器优先级；

选择器的权重值（是256进制，不是10进制！没几个人知道的知识点）：

！important Infinity

行间样式 1000

id选择器 100

class选择器 | 属性选择器 | 伪类选择器 10

标签选择器 | 伪元素选择器 1

通配符选择器 0

在计算机中，Infinity并不是无穷值，二是有限值，故Infinity+1 > Infinity；