CSS3选择器和小demo无JS选项卡

属性选择器：（功能大于特性）

例子：

^（以什么开头） $（以什么结尾） *（一个或多个）

li[class ^='demo']{} --->    选中li中以demo开头的clas类名

li[class $='demo']{} --->    选中li中以demo结尾的clas类名

li[class *='aa']{} --->    选中li中以aa（一个或多个）为内容的clas类名

div[name='aaa'] {}--->   选中div中name是aaa的 ， （自己添加的属性也可以选出来）

初级伪类选择器：伪类用于向某些选择器添加特殊的效果。

1.root 根标签选择器

“:root”选择器等同于元素，

简单点说：:root{background:orange}  html{background:orange} 得到的效果等同 建议使用:root（xml等）

当文档是xml文件的时候:root 选择器还能用。

2.:not 否定选择器

用法和jQuery 中的not类似，可以排除某些特定条件的元素

div:not([class=“demo”]){ background-color:red; } 意思为除了class为demo的div以外，所有的div的背景颜色都变红

3.empty 空标签选择器

用来选择没有内容的元素、不在文档树中的元素，这里的没有内容指的是一点内容都没有，哪怕是一个空格。

div:empty {background-color:red; } //div中内容为空的添加背景颜色

4.target 目标元素选择器

用来匹配被location.hash 选中的元素(即锚点元素) 选择器可用于选取当前活动的目标元素

//因为在a标签是div的锚点。所以点击a的时候回跳到这个div位子。div是锚点元素

div:target {background-color:red; }  //修改锚点元素的背景颜色

5伪类选择器

选择父子关系的某个元素（没有类型限制）

:first-child 第一个子元素 :

:last-child 最后一个子元素

:nth-child(n){} 第xxx个子元素，n代表变量自然数

:nth-last-child(){}  从后往前数

以上四个选择器均有弊端，即如果当前位置元素不是前面所修饰的元素，那么无效 注：其父元素的第 N 个子元素，不论元素的类型。

6常用的伪类类型选择器：

:first-of-type 第一个子元素

:last-of-type 最后一个子元素

:nth-of-type(){} 第xxx个子元素，n代表变量自然数

:nth-last-of-type(){}  从后往前数

此种选择器，限制了类型（如从div这一类选择器中选出第几个），即在所修饰元素的类型下选择特定位置的元素。

7 :only-child  唯一子元素选择器

选择是独生子的子元素，即该子元素不能有兄弟元素，它的父元素只有他一个直接子元素。 注意：选择的元素是独生子子元素，而非有唯一子元素的父元素。

:only-of-type 如果要选择第某类特定的子元素(p) 在兄弟节点中是此类元素唯一个的话 就需要用到这个属性了

8 :enabled  可用的元素

:disabled 不可用的元素 在web的表单中，有些表单元素有可用（“enabled”）和不可用（“disabled”）状态，比如输入框，密码框，复选框等。在默认情况下，这些表单元素都处在可用状态。那么我们可以通过伪类选择器 enabled 进行选择，disabled则相反。

input:disabled{……}  输入框变成不可输入。

9 :checked 选择框的被选中状态

注：checkbox, radio 的一些默认状态不可用属性进行改变，如边框颜色。

//一下代码点击input按钮改变了他兄弟节点的div的样式。

input:checked + div{

width: 100px;

height: 100px;

background: chartreuse;

}

10 :read-only  选中只读的元素

eg:

:read-write 选中非只读的元素 （默认）

eg:

伪元素选择器：

CSS3对伪元素进行了一定的调整，在以前的基础上增加了一个: 也就是现在变成了::first-letter,::first-line,::before,::after

另外还增加了一个::selection

“::selection” 选择器是用来匹配突出显示的文本（用鼠标选择文本的时候）。浏览器默认情况下，用鼠标选择网页文本是以“蓝色的北京，白色的字体”显示的。 属性：user-select: none（不可选中文本）; 注：火狐下必须加-moz- -moz-::selection

例 div::selection{color:red} //div内容被选中。字体颜色变为红色

元素选择器

E > F  an F element child of an E element 直接子元素

E + F an F element immediately preceded by an E element 后面的紧挨着的兄弟节点

E ~ F an F element preceded by an E element 后面的兄弟节点

小demo无JS选项卡

主要通过input：checked 属性（当改变input这属性可以间接来操作其他元素）

        
        
1
        
        
2
        
        
3