大家好，我是IT修真院深圳分院第11期的学员Kattem，一枚正直纯洁善良的web前端程序员。
今天给大家分享一下，
如何改变默认radio和select的样式？
分享人：Kattem
1.背景介绍
单选按钮 && 下拉列表
以上两种展示数据的方式分别由表单元素中的input标签和select标签实现，
其中input元素使用的是radio类型。
2.知识剖析
一、form元素
form元素定义 HTML 表单,HTML 表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本输入、下拉列表、单选按钮、复选框等等。多数情况下被用到的表单标签是输入标签input。
二、radio
先介绍一下input元素，input元素是最重要的表单元素。
input元素在 form元素中使用，用来声明允许用户输入数据的 input 控件。
输入类型是由类型属性（type）定义的，输入类型至少包含23种，大多数经常被用到的输入类型如下：
text（文本输入）、password（密码输入）、submit（提交按钮）、button（按钮）、image（图像作为提交按钮）以及checkbox（复选框）和今天的重点radio（单选按钮）。
三、label
label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。
"for" 属性可把 label 绑定到另外一个元素。只需把 "for" 属性的值设置为相关元素的 id 属性的值。
四、select
select标签用来创建下拉列表。select标签中的 option 标签定义了列表中的可用选项。
3.常见问题
如何修改radio和select的默认样式？（贼丑，有没有？？）
4 解决方案
4.1 修改radio默认样式
需要用到的工具如下：
label标签；
opacity属性;
:checked 选择器,匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
兄弟选择器：
1、+ 选择器（相邻兄弟选择器），可选择紧接在另一元素后的元素，且二者有相同父元素。
2、~ 选择器，作用是查找某一个指定元素的后面的所有兄弟结点。
4.2 修改select默认样式
appearance 属性，可以让元素看上去像标准的用户界面元素。
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
5.编码实战
6.扩展思考
关于权重
权重记忆口诀。从0开始，一个行内样式+1000（就是比如标签后+style=“xxxx”），一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.
7.参考文献
参考二：关于权重
8 更多讨论
1、什么是CSS权重？权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。
参考阅读【Understanding specificity】
当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。
参考阅读【Selector Specificity】
每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。
参考阅读【Understanding specificity】
如果两个选择器同时作用到一个元素上，权重高者生效。
个人理解：权重顾名思义就是权力谁重，就是决定谁是老大，谁说了算。
（1）、相同的权重：以后面出现的选择器为最后规则;
（2）、不同的权重，权重值高则生效:
选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高。
权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1。（具体参考链接的网址）
2、伪元素后面单冒号和双冒号的区别？
CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。
附上：伪类的使用方法
语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
（3）伪类的注意事项
伪类就像真正的类一样，可以叠加使用，没有数量上限，只要不是互斥的，比如这样：
em:first-child:hover {color: red;}
（4）可以同时使用多个伪类，而只能同时使用一个伪元素；
3、伪类与伪元素有什么区别？
（1）伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
（2）伪元素本质上是创建了一个有内容的虚拟容器；
（3）CSS3中伪类和伪元素的语法不同：
伪元素的由两个冒号::开头，然后是伪元素的名称。
使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。
当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::
一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。