css总结之选择器（一）

欢迎浏览

希望读者能够指出我的问题

class选择器

class选择器在html代码中可以有多个，选择不同的标签处理相同的样式，在css中引用的时候用 . 表示

html代码：

<p class="text-red">这是一个段落</p>
<h4 class="text-red"></h4>

css代码：

.text-red{
	color:red;
}

id选择器

id选择器具有标签唯一标识的作用，具有唯一性，同一个id选择器只能在html中出现一次，在css中引用的时候用 # 表示

html代码：

<h1 id="main-title">我是一级标题</h1>

css代码：

#main-title{
	text-align:center;
}

标签选择器

标签选择器是对html已经定义了的
标签选择器的用法如下

html代码：

<h1>这是一级标题</h1>
<a href="#">这是一个链接</a>

css代码：

h1{
color:red;
}
a{
text-decoration:none;/*去除默认样式*/
}

后代选择器

后代选择器能够选择子孙后代，下面例子能够选择父级div中所有的a标签

html代码：

<div class="nav">
	<a href="#">首页</a>
        <a href="#">首页</a>
        <div><a href="#">首页</a></div>  
</div>

css代码：

.nav a{
color:green;
font-size:20px;
line-height:20px;/*实现文本对齐*/
}

子代选择器

子代选择器 只能够选择“亲儿子”，不能选择其他后代。
如下面的代码示例，只能选择div标签下面的strong而不能选择p标签下面的strong

html代码：

<div>        
	<strong>儿子</strong>        
	<p> 
	<strong>孙子</strong>
	<strong>孙子</strong>  
        </p>    
</div>

css代码：

div>strong{
	color:red;
}

并集选择器

对多个标签进行选择，中间用逗号隔开，对它们设置相同的样式，代码示例如下：

html代码：

<h1 id="title-1">这是一级标题</h1>
<h2 class="title-2">这是二级标题</h2>
<p>我是一个段落</p>

#title-1,.title-2,p{
	color:red;
}

交集选择器

当多种标签有相同的class的时候，我们可以选择其中的一种带有该class的标签进行样式修改代码
如下面的示例分别将p和span设置成了红色

html代码：

<p class="red">1</p>
<div class="red">2</div>
<span class="red">3</span>

css代码：

p.red {	
	color:red;
}
span.red{
	color:red;
}

伪类选择器

伪类选择器有四个属性link visited hover active
link表示未访问标签时的样式
visited表示访问后的样式
hover表示访问时鼠标移动到相应位置时的样式
active表示鼠标点击的一瞬间的样式

html代码：

<a href="#">我是一个链接</a>

css代码：

a:link{
	color:red;		
}
a:visited{
	color:yellow;
}
a:hover{
	color:blue;
}
a:active{
	color:white;
}