CSS选择器

CSS选择器的使用是否合理,会直接影响CSS代码的精简程度和执行效率,所有合理驾驭CSS选择器,才能写出高质量的CSS代码。CSS选择器最基本的有五种:

标签选择器、ID选择器、类选择器、通用选择器、伪类选择器。

标签选择器(div、p....):方便,但是不够灵活。用法如下:

body {margin:0; padding:0;}

ID选择器(#):ID调用,具有唯一性,不重复,针对性较强。用法如下:

#one { padding:0;}                                      

通用选择器(*):对整个网页中所有HTML标签进行样式定,覆盖的对象更加广泛,是整个HTML的所有标签,功能是强大,但是这样反而限制了它的灵活性,主要应用于标签重置。用法如下:

*{margin:0; padding:0;}

类选择器(.):和ID选择器的用法类似,只不过把id换做class。用法如下:

.one {padding:0;}

伪类选择器(:link 、:visited  、:hover 、:active ):主要是对A标签定义。IE6除外,对其他浏览器其他标签也可以使用。用法如下:

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

补充:一个标签可以有多个类选择器的值,不同的值用空格分开,如:

<div class="one yellow left">一个标签可以有多个类选择器的值</div>

这样我们可以将多个样式用到同一个标签中,当然也可以,ID和class一块用

<div id="my" class="one yellow left">ID和class可同时应用到同一个标签</div>

选择器的集体声明

标签样式是一样的,或者某些标签都有共同的样式属性,我们可以将这些标签集体声明,不同的标签用“,”分开,比如:

h1,h2,h3,h4,h5,h6{color:#900;}

#header,div,.blue,h1{font-size:14px;}

选择器的嵌套

选择器也是可以嵌套的,用空格分开,如:

#div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

#div1 .thep a {color:#900;}/*意思是ID为div1内的.thep类下的a标签的文字颜色为红色*/

div p a {color:#900;}/*意思是div内的p下内的a标签的文字颜色为红色*/

p .content {color:#900;}/*是选择器的嵌套,用来指定页面内P标签且内部类选择器为content的标签内的文字颜色为红色*/

p.content {color:#900;}/*是指定选择符,用来指定页面内某个类选择器为content的P标签内的文字颜色为红色*/(特殊用法:指定选择符

原文地址:https://www.cnblogs.com/seostyle/p/4951697.html