{"comment":{"url":"https://api.github.com/repos/baifcqqq/myWeb/comments/31241314","html_url":"https://github.com/baifcqqq/myWeb/commit/87cc385812a2b6e4446bf3abf6731563b19e6c8b#commitcomment-31241314","id":31241314,"node_id":"MDEzOkNvbW1pdENvbW1lbnQzMTI0MTMxNA==","user":{"login":"baifcqqq","id":40632161,"node_id":"MDQ6VXNlcjQwNjMyMTYx","avatar_url":"https://avatars1.githubusercontent.com/u/40632161?v=4","gravatar_id":"","url":"https://api.github.com/users/baifcqqq","html_url":"https://github.com/baifcqqq","followers_url":"https://api.github.com/users/baifcqqq/followers","following_url":"https://api.github.com/users/baifcqqq/following{/other_user}","gists_url":"https://api.github.com/users/baifcqqq/gists{/gist_id}","starred_url":"https://api.github.com/users/baifcqqq/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/baifcqqq/subscriptions","organizations_url":"https://api.github.com/users/baifcqqq/orgs","repos_url":"https://api.github.com/users/baifcqqq/repos","events_url":"https://api.github.com/users/baifcqqq/events{/privacy}","received_events_url":"https://api.github.com/users/baifcqqq/received_events","type":"User","site_admin":false},"position":null,"line":null,"path":null,"commit_id":"87cc385812a2b6e4446bf3abf6731563b19e6c8b","created_at":"2018-11-09T16:48:05Z","updated_at":"2018-11-09T16:48:05Z","author_association":"OWNER","body":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<meta charset=\"utf-8\">\r\n\t<meta name=\"viewport\" content=\"width=device-width,user-scalable=no, initial-scale=1\">\r\n    <meta name=\"viewport\" content=\"width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;\" />\r\n\t<meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />\r\n\t<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\" />\r\n\t<title>html中的权重</title>\r\n\t<style>\r\n\t\t/**{\r\n\t\t\tpadding: 0px;\r\n\t\t\tmargin:0px;\r\n\t\t}*/\r\n\t\t.title{\r\n\t\t\tfont-size:18px;\r\n\t\t\ttext-align: center;\r\n\t\t\tfont-weight: bold;\r\n\t\t}\r\n\t\t.content{\r\n\t\t\tpadding:0 10px 0 10px;\r\n\t\t\tlist-style: \r\n\t\t}\r\n\t\tspan{\r\n\t\t\tcolor:red;\r\n\t\t}\r\n\t\t.footer{\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 30px;\r\n\t\t}\r\n\t</style>\r\n</head>\r\n<body>\r\n\t<p class=\"title\">关于html选择器的权重</p>\r\n\t<hr style=\"background:red\">\r\n\t<div class=\"content\">\r\n\t\t<p>选择器的权重： <span style=\"color:red\">div < class < id < javascript</span></p>\r\n\t\t<p style=\"font-size:24px;\">案列：</p>\r\n\t\t<ol>\r\n\t\t\t<li>先用标签选择器和类选择器进行比较</li>\r\n\t\t\t<img src=\"./imgWeight/1.png\" width=\"100%\" height=\"100%\" alt=\"\">\r\n\t\t\t<li style=\"list-style:none\">在网页中的效果</li>\r\n\t\t\t<img src=\"./imgWeight/10.png\" width=\"100%\" height=\"100%\" alt=\"\">\r\n\t\t\t<li value=\"2\">从上述的比较中我们发现：<span>div < class</span>,这和我们css代码放置的位置无关。</li>\r\n\t\t\t<br>\r\n\t\t\t<hr style=\"border:1px dashed red\">\r\n\t\t\t<br>\r\n\t\t\t<li style=\"list-style:none;font-size:18px;\">接下来我们来观察类选择器和ID选择器</li>\r\n\t\t\t<img src=\"./imgWeight/2.png\" width=\"100%\" height=\"100%\" alt=\"\">\r\n\t\t\t<br>\r\n\t\t\t<br>\r\n\t\t\t<img src=\"./imgWeight/12.png\" width=\"100%\" height=\"100%\" alt=\"\">\r\n\t\t\t<li value=\"3\">这次我们发现：<span>class < id</span></li>\r\n\t\t\t<br>\r\n\t\t\t<hr style=\"border:1px dashed red\">\r\n\t\t\t<li style=\"list-style:none;font-size:18px;\">下面演示的JavaScript和id选择器的比较</li>\r\n\t\t\t<img src=\"./imgWeight/3.png\" width=\"100%\" height=\"100%\" alt=\"\">\r\n\t\t\t<br>\r\n\t\t\t<br>\r\n\t\t\t<img src=\"./imgWeight/13.png\" width=\"100%\" height=\"100%\" alt=\"\">\r\n\t\t\t<li value=\"4\">这次我们发现：<span>id < js</span></li>\r\n\t\t\t<li style=\"list-style:none;color:red\">注意:用JavaScript添加的css样式是属于内联样式(图 红色圈哪里)</li>\r\n\t\t\t<br>\r\n\t\t</ol>\r\n\t\t<p style=\"line-height:22px;\">总结：通过上述的案例我们清晰的看出了每类选择器的权重排行（从这儿我们也可以看出JavaScript可以操作html-->Dom,但是它是不能操作css。只能在原有的基础上进行覆盖）。</p>\r\n\t\t<hr>\r\n\t\t<div class=\"footer\">\r\n\r\n\t\t</div>\r\n\t</div>\r\n</body>\r\n</html>"}}
{"actor":{"display_login":"baifcqqq"}}