CSS 各种选择器

来源：互联网发布：飞鹰网络电视直播软件编辑：程序博客网时间：2024/05/20 13:07

1、id 选择器以 "#" 来定义

#para1
{
    text-align:center;
    color:red;
}

<p id="para1">Hello World!</p>

2、类选择器以一个点"."号显示

.center
{
    text-align:center;
}

<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>

3、控件类型选择器，前面不加任何符号

p
{
    color:red;
    text-align:center;
}

<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>

4、伪类，使用“:”号来选择某些特殊行为的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {color:#FF0000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p:first-child
{
    color:blue;
}
</style>
</head>

<body>
<p>此段有特殊效果。</p>
<p>此段没有特殊效果。</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
q:lang(no1)
{
    quotes: "~" "~~~";
}
</style>
</head>

<body>
<p>Some text <q lang="no1">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
</body>
</html>

5、属性选择器，用 “[”“]”括起来

如：所有包含 title 属性的元素，都会有特殊效果。

[title]
{
color:blue;
}

<h1 title="Hello world">Hello world</h1>

如：所有 title 属性为 “w3cschool”的元素，都会有特殊效果。

[title=w3cschool]
{
    border:5px solid green;
}

<a title="w3cschool" href="http://www.runoob.com/">runoob</a>

如：所有 title 属性中包含被空格隔离的“hello”的元素，都会有特殊效果。

[title~=hello]
{
    color:blue;
}

<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>

如：所有title=w3cschool 的 a，都会有特殊效果.（a后面不要有空格）

a[title=w3cschool]
{
    border:5px solid green;
}

<a title="w3cschool" href="http://www.runoob.com/">runoob</a>

如：所有 lang 属性中包含被“-”隔离的“hello”的元素，都会有特殊效果。（不适用于title属性，待进一步研究）

[lang|=en]
{
    color:blue;
}

<p lang="en">Hello!</p>
<p lang="en-gb">Ello!</p>

阅读全文

0 0