css3(4)
-
css选择器的执行效率：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.父子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel=”external”]）
9.伪类选择器（a:hover, li:nth-child） -
*用于匹配任何的标记 - > 用于指定父子节点关系(父子选择器)
- E + F 毗邻元素选择器，匹配所有 紧随 E元素之后的同级元素F
- E ~ F 匹配 所有 E元素之后的同级元素F
注意：除了相邻选择器，其他(*,>,~)的都不建议常用 - 名称[表达式]
a . E[att] 匹配所有具有att属性的E元素
（[att]获取所有的定义了att的标签；E[att=val] 匹配所有att属性等于“val”的E元素；
b . [att=val] 获取所有定义了att属性并且属性值等于val的标签；
c . [att^=val]获取所有定义了att属性并且属性值以val开头的标签；
d . [att$=val]获取所有定义了att属性并且属性值以val结尾的标签；
e . [att*=val]获取所有定义了att属性并且属性值包含val字符的标签；
f . [att~=val]获取所有定义了att属性并且属性值包含val单词的标签；
g . [att|=val]获取所有定义了att属性并且属性值等于val或者以val-开头的标签。 -
伪类/伪元素
css 伪类用于向某些选择器添加特殊的效果。
css 伪元素用于将特殊的效果添加到某些选择器。
可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。
这里特殊指的是两者描述了其他 css 无法描述的东西。
伪类种类伪元素种类区别:
这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。
p>i:first-child {color: red}
**注意**:给在父元素p中的第一个i添加样式。
<p><i>first</i><i>second</i></p>
//伪类 :first-child 添加样式到第一个子元素`
如果我们不使用伪类，而希望达到上述效果，可以这样做：
.first-child {color: red}<p><i class="first-child">
first</i><i>second</i></p>
即我们给第一个子元素添加一个类，然后定义这个类的样式。
那么我们接着看看为元素：
p:first-letter {color: red}
**注意:该元素必须是块级元素，给p标签里面内容的第一个字母添加样式。**
<p>i am stephen lee.</p>
//伪元素 :first-letter 添加样式到第一个字母
那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？
.first-letter {color: red}
<p><span class='first-letter'>i</span> am stephen lee.</p>
即我们给第一个字母添加一个 span，然后给 span 增加样式。
两者的区别已经出来了。那就是：
伪类的效果可以通过添加一个实际的类来达到，
这也是为什么他们一个称为伪类，一个称为伪元素的原因。
总结：
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，
而伪元素则用两个冒号来表示。
:pseudo-classes::pseudo-elements但因为兼容性的问题，
所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，
我们在书写时应该尽可能养成好习惯，区分两者。
简单的说呢:伪元素的权重比伪类高，
比如一个容器的为元素和伪类都定义了同一属性，但值不一样，那么将采用伪元素的。
从规范的角度伪元素一个页面只使用一次，而伪类可以多次使用。
伪元素产生新对象，在dom中看不到，但是可以操作；伪类是dom中一个元素的不同状态；常用的伪类
a:hover,a:link,a:active,a:visited,:focus /动态伪类/
:disabled,:enabled,:checked,:read-only,:read-write /UI状态伪类/
:read-only 只读状态 在input上比：disabled显示效果要好。
input type=”text” readonly:记得在input里面设置只读属性。
:read-write 非只读状态
css3伪类
:nth-child(n)其父元素的第n个元素（如：p:nth-child(2){color:red;} p元素是其父元素的第2个元素的话字体颜色就是红色）
:nth-last-child(n) 其父元素的倒数第n个元素
:nth-of-type(n) （如：p:nth-of-type(2){color:red;} p元素是其父元素的第2个p元素的话字体颜色就是红色）
:first-child 其父元素的第一个元素
:last-child 其父元素的最后一个元素
nth-last-of-type(n) （如：p:nth-last-of-type(2){color:red;} p元素是其父元素的倒数2个p元素的话字体颜色就是红色）
:first-of-type 其父元素的第一个p元素
:last-of-type 其父元素的最后一个p元素
:not() /否定伪类选择器/ (如：p:not(.a){color:red;})常用的伪元素
<style type="text/css">
p::before p::after
{
content:"台词：";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
::first-letter
<style type="text/css">
p::first-letter
**注意**只适用于块标签
{
color:red;
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
::first-line
**注意**只适用于块标签
<style type="text/css">
p::first-line
{
color:red;
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
::selection
<style type="text/css">
::selection
**注意:就这样用，其他设置方法可能不起作用(如:p::selection，font-weight:bold;)
好像只能设置字体颜色和背景颜色**
{
color:red;
background-color:#00F;
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
- css权重：
<style>
/*A>B>C>D>0*/
.main-content{color:#666;}/*0*/
h3{color:#f00;}/*D*/
.h3{color:#0f0;}/*C*/
.main-content h3{color:#00f;}/*CD*/
.main-content .h3{color:#0ff;}/*CC*/
#h3{color:#ff0;}/*B*/
</style>
</head>
<body>
<div class="main-content">
<h3 class="h3" id="h3">你好</h3>
</div>
</body>上一篇： R语言实现 懒惰学习——使用近邻分类
下一篇： 不争输赢 只为成长