1.通配符选择
*{margin: 0;padding: 0;}
有时候可以对特定元素的所有后代元素应用样式
<style> * {color: #000000;} p{color:red} p * {color:green} </style>
<p>我是第一个p标签<p>
<div>我是路人</div>
<p>我是什么颜色<span>maybe I am green.</span><strong>what is my color?</strong></p>
结果如下：
2.类选择符
.className{ color :red}
3.标签选择符 a p img 等都属于标签选择
4.id选择符 #title{color:red}
在一个html文档中，id选择器会使用一次，而且仅一次。不过在实际中，浏览器通常并不检查HTML中ID的唯一性，这意味着如果你在HTML文档中设置了多个有相同ID属性值的元素，这些元素会具有相同的样式。但是这样写是不正确的。此外如果用到了getElementById（）之类的函数，会给DOM脚本的编写带来麻烦。
和类选择器不同，ID属性不允许以空格分割词的形式复制给某个标签例如 <p class="warning fl" id="warning"></p>
5.选择符的组合关系
- 针对性使用类选择符或者ID选择符 例如：p .content{color:red}
- 选择符群组，多个不同的选择符有相同的属性 p, .content, #title{color:red}
- 选择符组合:根据html的结构关系，层层递进的罗列选择符，目标选择符为最后一个选择符。每个选择符之间使用空格分割且为父子关系。p span{color:red}
元素之间存在父子关系：
6.包含选择符（派生选择符或后代选择器）
<style type="text/css"> p strong span { color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/ font-size:18px; /*定义文字大小为18px*/ text-decoration:underline; /*定义文字具有下划线*/ } </style> <title>包含选择符</title> </head> <body> <p>CSS很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong ></p> <strong>与世界同步，做一个成功的页面仔</strong> </body>
注：关于后代选择器有一个常被忽略的方面，即两个元素之间的层次可以是无限的。例如 ul em{ ...},这种语法就回选择从ul元素继承的所有em元素，不论em嵌套层次有多深。
<ul> <li> <ol> <li>List item 1_1</li> <li>List item 1_2</li> </ol> </li> </ul>
7.子选择符
body > p > strong
8.相邻选择符
p + strong:作用是匹配同一个父级下某个元素之后的元素
<style type="text/css"> p + strong { color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/ font-size:18px; /*定义文字大小为18px*/ text-decoration:underline; /*定义文字具有下划线*/ } </style> <title>相邻选择符</title> </head> <body> <p>CSS很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong ></p> <strong>与世界同步，做一个成功的页面仔</strong> </body>
进一步深入学习 p+strong+strong
<style type="text/css"> strong + strong { color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/ font-size:18px; /*定义文字大小为18px*/ text-decoration:underline; /*定义文字具有下划线*/ } </style> <title>对相邻选择符的进一步了解</title> </head> <body> <p>CSS很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong ></p> <strong>1、与世界同步，做一个成功的页面仔</strong> <strong>2、让我们看看CSS的世界是多么奇妙吧！</strong> <strong>3、千万不要仅仅因为这么一点内容就满足了。</strong> <strong>4、我们需要了解的还有很多！</strong> <strong>5、为了更便于浏览，加个数字玩玩</strong> </body>
p+strong+strong定义的标签为与strong标签相邻的strong标签。标签间相邻是层层递进的关系。
9.属性选择符
任何一个html标签都有属性存在，且每个属性都有属性值。例如img的alt属性，针对所有带有alt属性的图像。
属性选择符格式是标签元素后紧跟一对中括号，中括号的内容是该标签元素的属性或表达式，有如下四种模式:
- E[attr] 例如 *[class] 表示页面中所有带有class属性的标签;img[alt]
- E[attr=“value”] 例如 input[type="text"] 试用对象如下：
<input type="text" value="文本"/>
注：这种格式要求必须与属性值完全匹配，如果遇到值本身包含一个空格分个的值列表（如HTML属性class），匹配就会出现问题。
<planet type="barren rocky">Mercury</p>
要根据具体属性值匹配这个元素，唯一的办法就是写成：
planet[type="barren rocky"]{font-weight:bold;}
如果写成planet[type="barren"]这个规则不能匹配示例标记，因而失败。HTML中的class也是如此。因此这种匹配属于完全匹配。后面的一些写法可以让属性匹配更加灵活。
- E[attr~=“value”] 匹配具有attr属性且属性值是具有空格符号隔开的字段，其中一个字段等于value的E标签
<style type="text/css"> p[title~="css"] { font-size:20px; color:#FF0000; margin:0; } </style> <title>E[attr~="value"]属性选择符</title> </head> <body> <p title="css xhtml">title属性值为xhtml css的段落标签p</p> <p title="css+xhtml">title属性值为css xhtml的段落标签p</p> <p title="Cascading Style Sheets（层叠样式表）的简称为 css">title属性值为“Cascading Style Sheets（层叠样式表）的简称为css”的段落标签p</p> </body>
- E[attr|=“value”] 匹配具有“attr”属性且属性值必须是以value值开始及使用连字符（-）分隔的E标签元素
<style type="text/css"> p[title|="css"] { font-size:20px; color:#FF0000; margin:0; } </style> <title>E[attr|="value"]属性选择符</title> </head> <body> <p title="xhtml-css">title属性值为xhtml-css的段落标签p</p> <p title="css+xhtml">title属性值为css+xhtml的段落标签p</p> <p title="css-Cascading Style Sheets（层叠样式表）的简称">title属性值为“css-Cascading Style Sheets（层叠样式表）的简称”的段落标签p</p> </body>
- E[attr^=“value”] 匹配具有“attr”属性且属性值必须是以value值开头的所有元素
- E[attr$=“value”] 匹配具有“attr”属性且属性值必须是以value值结尾的所有元素
- E[attr*=“value”] 匹配具有“attr”属性且包含子串value的所有元素
10.伪类,伪对象
选择符：伪类{属性：属性值；}
a:link{color:red;} a:visited{color:blue;} a:hover{color:green;} a:active{color:black;}
注：
1.a：link 代表作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。这看起来有点多余，因为一个锚尚未被访问，我们可以用a{color:red}来代替。不过其实不是这样的，因为a{color:red}规则不仅应用于未访问的链接，还会应用到下面的锚：
<a name="section4">4.The Lives of Meer</a>
因此为了避免将链接样式应用到目标锚，要使用：link伪类
2.一般建议按link-visited-hover-active的顺序声明链接样式。否则因为css声明的层级关系会出现覆盖的现象。
选择符：伪对象{属性：属性值；}
<style> p:before{content: "4月1日，";} p:after{content: ',大家小心不要被骗了！';} </style> </head> <body> <p>愚人节要到了</p> </body>
IE6,7浏览器不支持，其他浏览器的效果如下：
11.选择符的权重值优先级别
<style type="text/css"> p { color:blue; } p.myColor { color:black; } .myColor { color:yellow; } #myColor { color:greenyellow; } </style> <title>选择符的权重值以及优先级别</title> </head> <body> <p>你猜猜我是什么颜色的，猜对了有奖哦。^o^</p> <p class="myColor">你猜猜我是什么颜色的，猜对了有奖哦。^o^</p> <p class="myColor" id="myColor">你猜猜我是什么颜色的，猜对了有奖哦。^o^</p> <p style="color:red;" class="myColor" id="myColor">你猜猜我是什么颜色的，猜对了有奖哦。^o^</p> </body>
- 标签选择符、伪类及伪对象：优先级分数 1。
- 类选择符、属性选择符：优先级分数 10。
- ID选择符：优先级积分为100。
- style属性：优先级积分为1000。
- 其他选择符，如通配选择符等：优先级积分为0。
- ！important优先级最高。
<style type="text/css"> p { color:blue !important; } p.myColor { color:black; } .myColor { color:yellow; } #myColor { color:greenyellow; } </style> <title>选择符的权重值以及优先级别</title> </head> <body> <p>你猜猜我是什么颜色的，猜对了有奖哦。^o^</p> <p class="myColor">你猜猜我是什么颜色的，猜对了有奖哦。^o^</p> <p class="myColor" id="myColor">你猜猜我是什么颜色的，猜对了有奖哦。^o^</p> <p style="color:red;" class="myColor" id="myColor">你猜猜我是什么颜色的，猜对了有奖哦。^o^</p> </body>
12.css3中新出现的选择符
x:nth-child(n)
li:nth-child(3) { color: red; }
用于选取 stack 中的某一个元素，只接受整数作参数（参数从 1 开始计数），如果你想选取第二个 li 元素，只需这样写 li:nth-child(2)。也可以设定可变的参数，比如 li:nth-child(4n) 将选取第 4, 8 , 12… 个元素（4*n, n=1, n++）。
x:nth-last-child(n)
li:nth-last-child(2) { color: red; }
除了正序（从上往下）选择，也可以使用 :nth-last-child(n) 倒序（从下往上）选择第几个元素，其他用法与第 1 条完全一样。
x:nth-of-type(n)
ul:nth-of-type(3) { color: red; }
nth-of-type(n) 的作用不是选取子元素 (child element)，而是选取同类元素 (type of element)。想象一下 HTML 文件中包含 5 个 ul 元素，现在要选取第三个，只需使用上面的代码，而不用再单独这个 ul 添加 id
x:nth-of-type(n)
ul:nth-last-of-type(3) { color: red; }
注：
nth-child 与 :nth-of-type 的区别，简单来说，如果父层内只包含一种元素（比如都是 p 元素）那两种用法是等效的，如果父层包含多种元素（比如 p 元素与同级的其他元素），需要选取第几个 p 元素时应该用 :nth-of-type
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
