CSS选择器有多少种类型？

html-css07

CSS选择器有多少种类型？,第1张

<div id="demo">

<div class="inner">

<p><a href="#">链接</a></p>

<p><input type="checkbox" name="" id="" /></p>

</div>

</div>

class 选择器 .inner{ width:100px}

id 选择器 #demo{ width:100px}

标签 选择器 p{ width:100px}

后代选择器 p a{ color: #f60}

伪类选择器 a:hover{ color: #f00}

伪元素选择器 a:after{ clear: both}

属性选择器 input[type=checkbox]{ margin-left: 10px}

css3选择器

由于ie的问题，比较常用的是前4种选择器。

css可定义的链接样式有如下几种：

a:link 超链接的普通样式

a:visited 点击过的

a:hover 鼠标经过时的

a:active 单击时

a:link{text-decoration:none} 无下划线

a:link{text-decoration:underline} 有下划线

为了实现不同链接不同效果，可以专门定义链接的CSS规则，比如：

我们常规css是这样的：

a:link{color:#ff0000}

那么网页上所有链接的颜色都是：#ff0000。

然后可以这样去修改：

a:link{color:#ff0000}

.line1 a:link{color:#000000}

同时，在要改变颜色的链接前加上css定义，像这样：<span class=line1><a href="/">不同颜色的超链接</a></span>，这样的话，这个链接的颜色就改变了。