-webkit：chrome、safari
-moz ： firefox
文章目录
选择器
| 模式 | 含义 | 对应的选择器 |
|---|---|---|
| * | 匹配所有元素 | 通用选择器 |
| E | 匹配任意一个E元素（比如，一个type值为E的元素） | type值选择器（标签选择器） |
| E F | 匹配所有作为E元素子孙的F元素 | 子孙选择器 |
| E > F | 匹配所有作为E元素子元素的F元素 | 子元素选择器 |
| E:first-child | 匹配任意一个E元素，这个元素是其父级元素的第一个子元素 | :first-child 伪类 |
| E:active E:hover E:focus | 匹配特定用户动作中的E元素 | 动态伪类 |
伪类选择器
伪元素
伪类与伪元素的区别：
伪类即假的类，通常可以添加类来达到效果，伪元素即假元素，需要通过添加元素才能达到效果。
选择器：选择了被样式所作用的网页中的元素
选择器{
样式;
}
标签选择器
选择器是html代码中的标签。如<html> <body> <img>等
比如：
body {
font-size: 12px;
color: red;
}
CSS的某些样式是具有继承性的，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
类选择器
类选择器任意起名
例如：
.stress {
color: red;
}
- 第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
- 第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
- 第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
ID选择器
给标签加上id属性。使用id="id选择器名称"为标签设置一个id
/*前面是#*/
#stress_green{
color:green;
}
类选择器 与ID选择器的区别
不同点：
1.id选择器只能用一次，类选择器可以使用多次
下面代码是错误的。
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
2.类选择器词列表方法为一个元素同时设置多个样式
我们可以用类选择器不能用id选择器为一个元素设置多个样式，
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>
属性选择器
/*选择匹配a元素，且a元素定义了属性class，class属性以icon开头*/
a[class^=icon]{
background: green;
color:#fff;
}
/*选择匹配a元素，且a元素定义了属性href，href属性以pdf结尾*/
a[href$=pdf]{
background: orange;
color: #fff;
}
/*选择匹配a元素，且a元素定义了属性title，title属性含有more*/
a[title*=more]{
background: blue;
color: #fff;
}
子选择器 利用>
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
<ul class="food">
<li>水果 <!--加上红色实线边框-->
<ul>
<li>香蕉</li><!--不加上红色实线边框，这不是第一代-->
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜<!--加上红色实线边框，这也是第一代-->
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
包含选择器（后代选择器） 利用空格
.first span{1px solid red;}
所有子后代
通用选择器
它的作用是匹配html中所有标签元素
* {color:red;}
伪类选择器
允许给html不存在的标签（标签的某种状态）设置样式，比如说 给html中一个标签元素的**鼠标滑过的状态**来设置字体颜色hover伪类
它适用于处于悬停状态的元素。 最常见的例子是将鼠标指针移动到超链接的边界内。 提示: :hover选择器可用于所有元素，不仅是链接。
a:hover{color:red;}
read-only选择器
“:read-only”伪类选择器用来指定处于只读状态元素的样式。就是，元素中设置了“readonly=’readonly’”。
/*设置只读的文本输入框*/
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
<!--用来选择处于只读状态的文本框-->
input[type="text"]:read-only{
border-color: #ccc;
}
类似的
：read-write用来设置不是只读状态的元素样式
结构性伪类选择器–root
:root选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。
“:root”选择器等同于元素，简单点说：下面两个句子效果相同。
:root{background:orange}
html {background:orange;}
结构性伪类选择器—not
可以选择除某个元素之外的所有元素
例子：表单中除submit按钮之外的input元素添加红色边框
input:not([type="submit"])
结构性伪类选择器—empty
选择没有任何内容的p元素
p:empty {
}
CSS3 结构性伪类选择器—target
用来匹配文档(页面)的url的某个标志符的目标元素。
示例展示：点击链接显示隐藏的段落。
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
.menuSection{
display: none;
}
#brand:target{/*这里的:target就是指id="brand"的div对象，这个div对象匹配的是url中#后的标识符；#brand可以省略，但是如果很多url，则需要不同的命名来区分*/
display:block;
}
结构性伪类选择器—first-child
/*定位的是第一个列表项的第一个元素*/
ol > li:first-child{
color: red;
}
- first-child
- last-child ：:last-child”选择器选择的是元素的最后一个子元素。
- nth-child(n): 奇数：2n+1或odd
- nth-last-child(n): 倒数第n个列表项
- first-of-type选择器：指定了p类型
/*wrapper类中的第一个p元*/
.wrapper > p:first-of-type {
background: orange;
}
- last-of-type 选择器
- nth-last-of-type(n)选择器
- only-child
/*post中只有一个p元素的部分*/
.post p:only-child {
background: orange;
}
- only-of-type
表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
/*在wrapper的子元素div中寻找只有一个子元素的类型子元素*/
.wrapper > div:only-of-type {
background: orange;
}
CSS3选择器 :enabled选择器
些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
选择文本输入框中中处于可用状态的
input[type="text"]:enabled {
background: #ccc;
border: 2px solid red;
}
类似的，也有 :disabled选择器,:checked选择器（用来选择处于选中状态的）
伪元素选择器
css2
::first-line: 匹配元素的第一行
p::first-line { color: red; }
::first-letter: 匹配元素的第一个字母
p::first-letter { color: red; }
::before: 在元素前通过 content 属性插入内容
在p元素前
p::before { content: "*"; }
::after: 在元素后通过 content 属性插入内容
p::after { content: "*"; }
CSS3 ::selection选择器
::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。
分组选择器
想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
h1,span{color:red;}
内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
内联 orange
选择器的权值
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2，标签选择器的累加*/
.warning{color:white;} /*类选择器权值为10*/
p span.warning{color:purple;} /*标签 标签 类选择器权值为1+1+10=12*/
#footer .note p{color:yellow;} /*id 选择器 类 标签 权值为100+10+1=111*/
注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
有些特殊的情况需要为某些样式设置具有最高权值，用!important来解决。
如下代码：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
