css派生选择器外部,CSS派生选择器

功能：

在css中，需要根据类名、对象ＩＤ、元素名进行定位的情况下，可以使用派生选择器进行定位！

语言基础总结：

１. 　在需要指定元素或对象ＩＤ或类属性名的情况下，写法是元素在前，对象ＩＤ或类元素名在后，

２.　在须同时指定类名和ＩＤ名的情况下，两者不分先后，但元素名在前

３.　中间的空格表示后代元素

例子：

/*作为 h1 元素后代的任何 em 元素，不管中间是否还有其它元素隔开*/

h1 em {color:red;}

以下html起作用：

dfadf test

dfadfdfdf test dfd

说明，如果只想直接在h1下面的em起作用，则应用使用子元素选择器 “>"

则css写法为：

h1 > em {color:red;}

/*div 元素,并class为sidebar,*/

div.sidebar {background:gray;}

以下html起作用：

说明元素和类名的使用

/*div 元素,并class为sidebar, 下面的任何span*/

div.sidebar span {color:red;}

以下html起作用

说明元素和对象ＩＤ的使用

edddeddd

/*div 元素,并class为sidebar,*/

div#obj1 {background:blue;}

以下html起作用

说明元素和对象ＩＤ的使用

edddeddd

/* 类名和对象名混合用，对象为obj2的div 下面的具有child属性的span*/

div#obj2 span.child1{

background:#996600;

}

以下html起作用

说明元素和类名和对象ＩＤ共同使用

这个span不起作用

这个span起作用

/*对象ＩＤ为obj3并且类名为obj3c的div,对象名和类名前后顺序均可，但元素名div一定是前面*/

div.obj3c#obj3{

background:#996699;

}

以下html起作用

区别１ 含类名，这个起作用

区别２　不含类名，这个不起作用

除了以上选择器，还有

/*属性选择器*/

/*对具有alt属性的img元素进行设置*/

img[alt] {border: 5px solid red;}

a[href] {color:red;}

/*兄弟选择器：即具有同样的父元素，紧跟其后的元素称为兄弟，使用“+“号表示*/

/* 对li后面的li　粗体显示*/

li + li {font-weight:bold;}

/* 伪类　:focus　:hover :first-child*/

input:focus{

background-color:#0066FF;

}

input:hover{

background-color:#FF0000;

}

/*first-child应用，比较易误解*/

p:first-child {font-weight: bold;}

li:first-child {text-transform:uppercase;}