css选择器

要应用哪个html元素,就可以把该元素作为选择器

<html>
<head>
<title>css选择器-html选择器</title>
<meta http-equiv="Content-Type" Content="text/html;charset='UTF-8'">
<style type="text/css">
a
{
    color:blue;
}
</style>
</head>
<body>
<a href="http://gonvshenhome.localhost">点击访问</a>
</body>
</html>
<html>
<head>
<title>css选择器-class(类)选择器</title>
<meta http-equiv="Content-Type" Content="text/html;charset='UTF-8'">
<style type="text/css">
a.o
{
    color:green;
}
</style>
</head>
<body>
<a  class="o" href="http://gonvshenhome.localhost">点击访问</a>
<a  class="t" href="http://gonvshenhome.localhost">点击访问</a>
<a  class="th" href="http://gonvshenhome.localhost">点击访问</a>

</body>
</html>

类选择器可以是元素名.类名的形式, 也可以直接使用.类名的形式, 一个类可以使用多个类名, 中间使用空格隔开

<html>
<head>
<title>css选择器-id选择器</title>
<meta http-equiv="Content-Type" Content="text/html;charset='UTF-8'">
<style type="text/css">
#first
{
    font-size:2cm;
}
</style>
</head>
<body>
<a  id="first" href="http://gonvshenhome.localhost">点击访问</a>
</body>
</html>

id是唯一的, 不能重名。

—————————————————————————
伪元素选择器: 对同一html元素不同状态时期的应用

<html>
<head>
<title>伪元素选择器</title>
<style type="text/css">
a:link
{
    font-size:2cm;color:blue;border:2px solid yellow;
}
a:hover
{
       font-size:2cm;color:black;border:3px solid red;

}
p:first-line
{
    color:green;
}
</style>
</head>
<a href="http://localhost.com">just a test</a>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br>dddddddddddddddddddddddddddddddddd</p>
</html>
border:1px;solid blue 定义一个1像数的蓝色实线边框

css属性选择器

元素名.类名    类选择器

元素名可选, 如果不写元素名则默认按照css中定义的排列。

同一个元素可以使用多个类, 类名用空格隔开


id= 对单一元素定义单独样式 ,id是唯一的, class可以使用多个。

#idname{}

关联选择器需要按次序不能写反

组合选择器没有顺序区分, 可以使用,或者空格隔开

a:link 没有任何动作前的状态

a:hover 光标移动到上面的状态

a:active 选中时的状态

a:visited 访问过链接时的状态

p:first-letter 一个段落中的首字母状态

p:first-line 首行的状态
<html>
<head>
<title>组合样式选择器</title>
<style type="text/css">
h1,p
{
   color:blue;
}
</style>
</head>
<body>
<h1>
aaaaaaaaaaaaaaaa
</h1>
<p>
bbbbbbbbbbbbbbbbbbbbb
</p>
</body>
<html>

这样就把h1标签和p标签中的字体颜色都定义为了蓝色

<html>
<head>
<title>关联样式选择器</title>
</head>
<style type="text/css">
table tr td
{
    color:blue;
}
</style>
<table border="1" width="500">
<tr>
<td>aaaaa</td>
</tr>
</table>
<td>aaaaa</td>

</html>

关联样式选择器有优先级的区分, 必须按次序。

此条目发表在div/css分类目录,贴了, , 标签。将固定链接加入收藏夹。