随笔分类

随笔档案

相册

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

CSS选择器大全

对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合哪些元素，样式选择器有：标签选择器，class选择器，id选择器，关联选择器，组合选择器，伪选择器

1.标签选择器

对于指定标签采用统一的标签；

<head>
<style type="text/css">
input{border-color:Yellow;color:Red}
</style>
</head>
2.class选择器

以定义一个命名的样式，然后在用它的时候设定元素的class属性为样式，还可以同时设定多个class，名称之间加空格。

<head>
<style type="text/css">
.warning{background:Yellow}
.highlight{font-size:xx-large;cursor:help;}
</style>
</head>

其中.waringhe .highlight是给元素定义了名称，这个名称不作用于任何元素，除非引用它。

对该样式进行引用；

<body>
<table><tr><td class="highlight">aaa</td>
<td class="warning">keleyi.com</td>
<td class="warning highlight">ccc</td>
</tr>
</table>
</body>

标签+class选择器：
class选择器也可以针对不同的标签，实现同样的样式名对于不同标签有不同的形式，只要在前面加上标签名称即可。

<head>　
　 <style type="text/css">　　　　
input.accountno{text-align:right;color:Red}
　　　　label.accountno{font-style:italic;}　　
</style>
</head>

3.id选择器：为指定的id的元素设定样式。代码如下：

<head>
<style type="text/css">
#UserName{font-size:xx-large;}
</style>
</head>
在body中对该样式进行使用：

<body>
<input id="UserName" type="text" value="aaa"/>
</body>
id叫做UserName的元素的样式是{font-size：xx-large;}

4、更多选择器
（1）、关联选择器（必须是相互关联之下的样式才可以有变化）

　　代码如下：

<head>
<style type="text/css">
p strong{background-color:Yellow;}
</style>
</head>
上面代码的意思就是p标签和strong标签相关的内容使用的样式（也就是表示p标签中的strong标签内的内容使用的样式）

<body>
<strong>柯乐义</strong>
<p><strong>www.keleyi.com</strong></p>
</body>
我们看到上面的代码中仅有<strong>标签的字体没有任何变化，而<p><strong>中的字体可以使用上面的css样式
(2)、组合选择器：同时为多个标签设定同一个样式；

<head>
<style type="text/css">

H1,H2,input{background-color:Green;}
</style>
<head>

上面的代码是将h1,h2,input的样式都设置成为{background-color:Green},当我们使用这三个标签的时候有同样的样式显现；

代码如下：

<body>
<h1>aaaa</h1>
<input type="text" value="text"/>
</body>
(3)、伪选择器：为标签的不同状态设定不同的样式：如：A：visited 超链接点击过的样式；A:active超链接被选中的样式;A:link：超链接已被访问时的状态

A:hover:鼠标移到超链接时的样式

现在我们来用这些样式给超链接设置样式；把这些样式放在CSS文件中，因为这些样式都是基本固定的只要你使用超链接的时候就把这些样式引入即可；

代码如下：

A：visited
{
text-decoration:none
}
A:active
{
text-decoration:none
}
A:link
{
text-decoration:none
}
A:hover
{
text-decoration:underline
}

在html页面中对该样式进行引用即可；

<head>
<link type="text/css" rel="Stylsheet" href="link.css">
</head>
下面我们来创建连超链接：

<body>
<a href="http://www.keleyi.com">柯乐义</a>
</body>