CSS选择器小结

  1. HTML中引用CSS的方法总结。
  • 行内式：在HTML标签的style属性中编写CSS代码，直接作用于“当前”的HTML元素。
  1. <pstyle="color:#f0f;font-weight:bold;font-size:12px;"></p>
  • 嵌入式：在<head></head>中编写CSS代码，使用选择器决定“一堆”元素的显示效果。
  1. <head>
  2. <metacharset="utf-8">
  3. <title></title>
  4. <!--其他head元素-->
  5. <style>
  6. p{color:red;}
  7. </style>
  8. </head>
  • 链接式：使用<link></link>链接外部CS文件，可以在多个网页中共享样式规则。
  1. <linktype="text/css"rel="stylesheet"href="myCss.css">
  • 导入式：使用@import指令，可以基于已有的样式文件扩充新的样式规则。
  1. <style>
  2. @import"myStyle.css"
  3. </style>
2.    CSS单位

 
3.颜色的描述
  • 颜色名，W3C定义了16个颜色关键字
aqua浅绿色，black黑色，blue蓝色，fuchsia紫红色，gray灰色，green绿色，lime黄绿色，maroon橘红色，navy深蓝色，olive茶青色，purpose紫色，red红色，sliver银色，teal青色，white白色，yellow黄色
  • 十六进制颜色（#RRGGBB或#RGB）
纯红色#ff0000，纯绿色#00ff00，纯蓝色#0000ff。
  • 使用RGB颜色值（R,G,B）指定颜色
rgb（0，255，0）表示纯绿色
  • 使用rgb百分比值（R%,G%,B%）指定颜色
100%，0%，0%，是纯虹色；
0%，100%，0%，是纯绿色；
0%，0%，100%，是纯蓝色。
3.通过给CSS规则添加前缀，能部分地解决浏览器兼容性问题。
前缀 “-moz”对应FireFox；
前缀“-ms-”，“-mso-”对应InternetExplorer；
前缀“-o-”对应Opera；
前缀“-webkit-”对应Chrome，Safari。
4.CSS选择器
基本选择器
        a.标记（或标签）选择器，用于设定HTML文档中指定标签的显示样式。

        b.类别选择器，给特定的一组CSS代码取名，然后就可以将他们应用于多个不同的标签。
        c.ID选择器，对于页面中独一无二的元素，如页脚，可以给其id属性赋予一个独一无二的值。

复合选择器：
  • 交集选择器
直接指定特定标记中特定类别或id的元素样式。（注意：选择器字符间不要有空格）
  1. <pclass="p1">
  2. 这是第一段落，红色字体
  3. </p>
  4. <pid="p2">
  5. 这是第二段落，蓝色字体
  6. </p>
  8. <style>
  9. p.p1{
  10. /* 标记.类别选择器*/
  11. /* 选择器字符间不要有空格*/
  12. color:#FF0000;
  13. }
  14. p#p2{
  15. /* 标记#id选择器*/
  16. color: rgb(0,0,255);
  17. }
  18. </style>
 
  • 并集选择器
一次定义多个标签或类别或id的样式（注意：以逗号隔开各个选择器）
  1. <div>
  2. 本段文本位于div元素内
  3. </div>
  4. <pclass="p1">制定了p1样式类的段落</p>
  5. <pid="p2">制定了id的段落</p>
  6.  
  7. <style>
  8. div,p.p1,p#p2{
  9. color: cornflowerblue;
  10. text-decoration: underline;
  11. }
  12. </style>
 
  • 后代选择器
            后代选择器1
选择嵌套在指定元素的内部元素的样式（注意：以空格分开各个选择器）
  1. <style>
  2. p em{
  3. font-size:30px;
  4. }
  5. </style>
  7. <p>
  8. 段落内:单词的CSS以&lt;em&gt;标签界定，在样式表规则"p em"的作用下显示为:<em>CSS</em>
  9. </p>
  10. <span>
  11. 段落外：单词的CSS以&lt;em&gt;标签界定，不适用样式表规则"p em"的作用下显示为:<em>CSS</em>
  12. </span>
            后代选择器2
div>h2  只选择h2元素，并且这些元素都是div的直接子元素
  1. <style>
  2. div>h2{
  3. color: crimson;
  4. }
  5. #div1>h2{
  6. text-decoration: line-through;
  7. }
  8. </style>
  9. <divid="div1">
  10. <p>content 1 of p</p>
  11. <h2>content 1 of h2</h2>
  12. <p>content 2 of p</p>
  13. <div>
  14. <h2>content 2 of h2 in the other div</h2>
  15. </div>
  16. </div>
  • 兄弟选择器
    •    h2+p，选择p元素             ，此元素是h2的弟弟，且是紧挨的。
    • h2~p，选出所有h2的“弟弟”，不管是不是紧挨着的
  • 通用选择器
“*”是一个通配符，它匹配任何元素
  1. *｛color：green;｝    /*所有元素（的文本和边框）都采用绿色作为前景色 */
  2. p * {color:red} /*<P>包含的所有元素（的文本和边框）都采用红色作为前景色 */
  • 属性选择器
a[href]测试
a[href="index.html"]测试
img[alt~="UsedforTest"]测试
img[alt^="Just"]测试
img[alt$="st"]测试
img[alt*="UsedforTest"]测试
  • 伪类选择器
:focus实例
    伪类选择器支持not，div:not(.myP) 选择所有div元素，其class属性不是.myP
实例
    还可以连续使用多个not，div:not(.myClass1):not(.myclass2) 选择所有div元素，其class属性值不是.myClass1和.myClass2。
实例
还可以使用其他条件，div:not(id^="main") 选择所以div元素，其id属性值不是以main打头的。
div:target 使用此选择器，可以自动依据url的目标，突出显示特定的元素。
结构化选择器，他与DOM密切相关
:root 选择根元素<html>;
:empty 选择空元素,如<p></p>;
:first-child 选择的元素是其父元素的第一个子元素;
:last-child 选择的元素是其父元素的最后一个子元素;
:first-of-type 选中指定元素类型的第一个儿子;
:last-of-type 选中指定元素类型的最后一个儿子;
:only-of-child 选中的元素是父元素的唯一儿子;
:only-of-type在父元素的所有儿子中，选择那些只有一个元素的元素类型;
  • Nth类型选择器
:nth-child(n) 选中第n个孩子;
:nth-last-child(n) 选中倒数第n个孩子;
:nth-of-type(n) 选中第n个元素类型;
:nth-last-of-type(n) 选中倒数第n个元素类型；
  •  伪元素
::first-letter和::first-line
::before和::after
CSS的继承
  • 没有定义CSS规则的HTML元素，从它的父级元素中继承样式。
  • 样式规则属性值的百分比应用了继承原则。
  • CSS层叠原则
行内样式 > id样式 > 类别样式 > 标签样式    →结论：特殊者胜出！
 





posted @ 2016-08-20 14:30  Jener_Yan  阅读(1758)  评论(0)  编辑  收藏  举报