标签：code width base 第一个 逗号 伪类 yii image ext
分类
|------内联 写在标签里面，控制精确，代码重用性差
|---------style=样式
<div style="background: yellow; width: 100px; height: 100px;"></div> <div style="background: red; width: 100px; height: 100px;"></div>
|------内嵌 嵌在页面的<head></head>里，控制没有内联的精确，代码重用性好
|---------<style type="text/css"></style>
<style> #first{background: pink; width: 200px; height: 100px;} #second{background: blue; width: 200px; height: 100px;} </style> <div id="first"> </div> <div id="second"> </div>
|------外部 单独的样式文件，控制没有内联的精确，代码重用性最好
|---------<link href="" rel="stylesheet" type="text/css"/>
#third{ background: purple; width: 200px; height: 300px; }
<link rel="stylesheet" href="1111.css" /> <div id="third"> </div>
选择器 样式表用来选取元素 标签：根据标签名选中元素
|------class
|---------.点
|---------根据class名来筛选元素
|---------可以有重复的名字
.common{ width: 100px; height: 100px; background-color: black; color: white; } .common:hover{ background-color: red; color: black;
<div class="common"> 我是第一个common </div> <div class="common"> 我是第二个common </div> <div class="common"> 我是第三个common </div>
|------id
|---------#
|---------根据id名来筛选唯一的元素
|---------不能有重复的名字
#third{ width: 100px; height: 100px; background-color: green; }
<div id="third"> </div>
|------复合
|---------逗号：并列 div,span
|---------空格：后代 #list li
|---------大于号：子元素选择器 div>p div中所有p标签
div,p{ border: 1px solid red; } #third,#fourth{ border: 1px solid black; } #first_ul li{ color:brown; } #second_ul li{ color: darkblue; } #div_p>p{ color: green; }
<div id="third"> </div> <div id="fourth"> </div> <ul id="first_ul"> <li>无序一</li> <li>无序一</li> <li>无序一</li> </ul> <ul id="second_ul"> <li>无序二</li> <li>无序二</li> <li>无序二</li> </ul> <div id="div_p"> <p>我是div中的第一行p元素</p> <p>我是div中的第二行p元素</p> <p>我是div中的第三行p元素</p> <div>我是div中的第四行div元素</div> </div>
|------属性选择器
|---------[属性名 = 属性值]{} 属性名后边可以加 |、*等 代表匹配所有属性有属性值的元素
|---------表单元素的属性选取
[href="aa.html"]{ color: red; } input[type="text"]{ background-color: gainsboro; }
<a href="aa.html">跳转</a> <input type="text" name="" id="" value="" /><br /> <input type="password" name=""id=""value="" />
|------伪类
|---------a标签的四个伪类
|------------a:link 未访问的链接
|------------a:visited 已访问的链接
|------------a:hover 鼠标划过链接
|------------a:active 已选中的链接
a:link{ color:red } a:visited{ color: black; } a:hover{ color: blue; } a:active{ color: yellow; }
<a href="https://www.baidu.com">跳转到百度</a>
标签：code width base 第一个 逗号 伪类 yii image ext
原文地址：https://www.cnblogs.com/q-1234/p/9452075.html
