标签：属性 min display spl 京东商城 赋值 利用 set 格式
先看下下面的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color:#2459a2;height:24px;"> 欢迎来到京东商城 </div> </body> </html>
在标签上设置style属性：
background-color:#2459a2
height:24px
color可以参照RGB颜色对照表，一种码对应一种颜色
当然我们也可以不在body里面写，因为方便模板重用，我们可以把style模板放到head里面
页面效果如下：
（1）id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color:#2459a2; height:24px; } #i2{ background-color:#2459a2; height:24px; } </style> </head> <body> <div id="i1"> 欢迎来到京东商城 </div> <div id="i2"> 欢迎来到淘宝 </div> </body> </html>
id选择器了解一下，虽然我们可以通过id把模板和内容联系起来，但是id原则上需要唯一值，这就给代码的重复利用带来了困难。
（2） 类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color:#2459a2; height:24px; </style> </head> <body> <div class="c1"> 欢迎来到京东商城 </div> <div class="c1"> 欢迎来到淘宝 </div> </body> </html>
相对于id选择器，类选择器就很好的解决了模块需要重复利用的问题，既然id不可以重复，那class是可以重复的。这种选择器也最常用
（3）标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color:#2459a2; height:24px; </style> </head> <body> <div> 欢迎来到京东商城 </div> <span>欢迎来到好乐买</span>> <div> 欢迎来到淘宝 </div> </body> </html>
你也可以自定义div 模块格式，那后面所有用div标签的内容都会生效,而span不生效
（4）层级选择器（空格）
通过两个标签关联：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span div{ background-color:#2459a2; height:24px; </style> </head> <body> <div> 欢迎来到京东商城 </div> <span>欢迎来到好乐买 <div>要啥自行车</div> </span> <div> 欢迎来到淘宝 </div> </body> </html>
通过class和标签关联：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 div{ background-color:#2459a2; height:24px; </style> </head> <body> <div class="c1"> 欢迎来到京东商城 </div> <span class="c1">欢迎来到好乐买 <div class="c1">要啥自行车</div> </span> <div class="c1"> 欢迎来到淘宝 </div> </body> </html>
我们甚至可以关联多层，但不建议
（5）组合选择器（逗号）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1,#i2{ background-color:#2459a2; height:24px; } </style> </head> <body> <div id="i1"> 欢迎来到京东商城 </div> <div id="i2"> 欢迎来到淘宝 </div> </body> </html>
还记得第（1）中id选择器的代码重复利用率低吗，我们可以通过逗号来把模板赋值给多个id，这样也可以降低代码重复的问题.
当然累选择器也是可以使用组合选择器的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .i1,.i2{ background-color:#2459a2; height:24px; } </style> </head> <body> <div class="i1"> 欢迎来到京东商城 </div> <div class="i2"> 欢迎来到淘宝 </div> </body> </html>
（6）属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type=‘text‘]{width:100px;height:200px;} </style> </head> <body> <input type="text" /> <input type="password" /> </body> </html>
可以根据type字段来让我的模板生效，我们可以看到text生效了，但是password没有生效。
当然我们甚至可以自定义属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[n=‘xiaohong‘]{width:100px;height:200px;} </style> </head> <body> <input type="text" n="xiaoming"/> <input type="text" n="xiaohong"/> <input type="password"/> </body> </html>
n是我自定义的。
当然也可以结合类标签，把input变成.c1(类名)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1[n=‘xiaohong‘]{width:100px;height:200px;} </style> </head> <body> <input class="c1" type="text" n="xiaoming" /> <input class="c1" type="text" n="xiaohong" /> <input class="c1" type="password"/> </body> </html>
可以看到生效的就只有xiaohong
标签：属性 min display spl 京东商城 赋值 利用 set 格式
原文地址：https://www.cnblogs.com/brownyangyang/p/9095862.html
