Web前端学习第七天·fighting_CSS样式的编写和使用
Posted Candy1029
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端学习第七天·fighting_CSS样式的编写和使用相关的知识，希望对你有一定的参考价值。
属性选择器
目前使用的并不多。新浪和京东有使用。
可以根据元素的属性即属性值来选择元素。
单个属性时的语法：*[属性名称]{样式}
例如：（表示所有有href属性的标签）
1 <style type="text/css"> 2 *[href]{ 3 color:red; 4 } 5 </style>
1 <style type="text/css"> 2 span[href]{ 3 color:red; 4 } 5 </style>
上面的代码中表示span标签中具有href属性的元素，给它的内容的颜色设置为红色。span中的href属性并没有实际意义。
多个属性时的语法：*[属性名称][属性名称]{样式}
例如：（表示类名为a的具有href和name属性的元素）
1 <style type="text/css"> 2 .a[href][name]{ 3 color:red; 4 } 5 </style>
根据属性值匹配，要求完全匹配时的语法：*[属性名称="属性值"]{样式}
例如：
1 <style type="text/css"> 2 input[type="text"]{ 3 color:red; 4 } 5 </style>
上述的示例可以将文本框输入的字体颜色变为红色。
根据属性值的单词匹配的语法：*[属性名称~="单词"]{样式}
例如：（表示div中类名中包含单词“note”的元素，“war note”匹配，“warnote”不匹配）
1 <style type="text/css"> 2 div[class~="note"]{ 3 color:red; 4 } 5 </style>
根据属性值包含的内容匹配的语法：*[属性名称*="内容"]{样式}
例如：（表示div中类名中包含单词“note”的元素，“warnote”和“war note”都是匹配的）
1 <style type="text/css"> 2 div[class*="note"]{ 3 color:red; 4 } 5 </style>
如果~=和*=同事存在，heml解析的顺序（与优先级相反）是怎样的呢？
与它们出现在html中的位置有关，出现在前面的先执行，出现在后面的后执行，后面执行的属性值会覆盖前面执行的属性值，也就是说后执行的优先级高。
以属性值开头的内容选择的语法：*[属性名称^="内容"]{样式}
例如：（以“btn”开头的name属性值对应的元素被选中）
1 <style type="text/css"> 2 div[name^="btn"]{ 3 color:red; 4 } 5 </style>
以属性值开头的单词的选择的语法：*[属性名称|="单词"]{样式}
例如：（input标签中以“btn”单词开头的name属性值对应的元素被选中）
1 <style type="text/css"> 2 input[name|="btn"]{ 3 color:red; 4 } 5 </style>
以属性值结尾的内容的选择的语法：*[属性名称$="内容"]{样式}
例如：（button标签中的name属性值以“btn”结尾的标签被选中）
1 <style type="text/css"> 2 input[type="button"][name$="btn"]{ 3 color:red; 4 } 5 </style>
交集选择器（ID选择器的一种）
由两个选择器组合而成，第一个是标签选择器，第二个是类选择器或者ID选择器，用于更加明确的选择某个元素。
语法：标签.class（或者标签#id）{样式}（注意：第一个必须是标签选择器，中间不能有空格）。
html执行各类选择器的顺序（与优先级相反）：
浏览器默认的样式
标签选择器
类选择器
交集选择器（标签.class）
id选择器
交集选择器（标签.id）
行内样式
使用频率并不高。
分组选择器
由多个选择器通过逗号连接在一起，也称之为并集选择器。
例如：body,div,dl,dt,dd,ul{margin:0;padding:0}（通常使用这类代码初始化CSS去掉页面的内边距和外边距）。
具体使用可查看新浪网的源码。
考虑到网页加载的速度和流量，通常会对CSS样式文件和JS脚本文件做压缩处理（即去掉多余的空格等）。
伪类样式选择器
超链接有很多的行为，比如：鼠标悬浮在上面，鼠标点击（点击后会发现超链接样式与其他的不同），鼠标离开后的样式，都可以通过伪类样式来实现。
CSS3.0中增加了许多伪类选择器。主要介绍CSS1.0和CSS2.0中的伪类选择器。
E:link 设置超链接a在未被访问前的样式，用在<a>标签中。（E表示选择器：类选择器、ID选择器、标签选择器，但是不能是元素选择器）
语法：E:link{样式}
例如：注释掉的代码段与该伪类选择器看似实现同样的功能，实际上是不同的。使用伪类选择器的样式只作用于超链接，也就是说如果<a>标签没有设置href的属性值，那么它就会呈现出默认样式而不会被设置为橘色。如果使用的是注释掉的代码（标签选择器），则所有的<a>标签不管是不是超链接，它们都会变成橘色。
E:visited 设置超链接a在其链接地址被访问以后的样式。
语法：E:visited{样式}
E:hover 设置元素在其鼠标悬停的样式。
语法：E:hover{样式}
E:focus 设置对象在成为输入焦点（该对象的focus事件发生）时的样式。webkit（Google浏览器）内核浏览器会默认给:focus状态的元素加上outline（外边的线条）的样式。
语法：E:focus{样式}
E:first-child 应用该样式的第一个元素，而不是子元素。（也就是说html解析中第一个被用到的E标签，而不是指E标签中的第一个子元素）
语法：E:first-child{样式}
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>伪类样式选择器</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 a:link { 9 color: orange; 10 } 11 /*a { 12 color: orange; 13 }*/ 14 a:visited { 15 color:gray; 16 } 17 a:hover { 18 color:red; 19 text-decoration:none; 20 } 21 input:focus { 22 /*实线边框，2px，红色*/ 23 border:2px solid red; 24 /*谷歌浏览器默认加上外边框了，需要我们自己去掉外边框*/ 25 outline:none; 26 } 27 /*是指第一个被使用的div标签，而不是指div标签的第一个子元素*/ 28 div:first-child { 29 border:2px solid red; 30 } 31 </style> 32 </head> 33 <body> 34 <div> 35 <p>第一段</p> 36 <p>第二段</p> 37 <p>第三段</p> 38 </div> 39 <div> 40 <input/> 41 <span>第一个<span>标签</span> 42 <ul> 43 <li> 44 <a href="http://www.baidu.com" title="百度">百度</a> 45 <span>搜索网站</span> 46 </li> 47 <li> 48 <a href="http://www.baidu.com" title="新浪">新浪</a> 49 <span>门户网站</span> 50 </li> 51 <li> 52 <a href="http://www.baidu.com" title="网易">网易</a> 53 <span>门户网站</span> 54 </li> 55 </ul> 56 <span>第二个<span>标签</span> 57 <p>段落标签</p> 58 </div> 59 </body> 60 </html>
注意：伪类选择器中不能有空格
练习
1分组选择器
2属性选择器
3类选择器
4后代选择器
5分组选择器（后代选择器）
6分组选择器（后代选择器，伪类选择器）
7分组选择器
8子元素选择器（前面是一个后代选择器）
9伪类选择器（前面是后代选择器）
10后代选择器
以上是关于Web前端学习第七天·fighting_CSS样式的编写和使用的主要内容，如果未能解决你的问题，请参考以下文章
Web前端学习第十一天·fighting_使用CSS布局和定位
Web前端学习第十二天·fighting_HTML页面设计技巧总结
Web前端学习第十三天·fighting_HTML页面设计技巧总结