1.统配选择器
作用:给所有元素引用样式
语法:
*{ … }
运行结果:
2.id选择器(唯一不重复)
语法:
#i1{
…
}
3.class选择器
-可以同时为一个元素设置多个class属性值,多个属性值之间用空格隔开
语法:
.名称{
…}
4.标签选择器
作用:可以选择页面中的所有指定元素
语法:
元素类型{
…
}
5.-层级选择器(空格隔开)
语法:
div span{…}
6.组合选择器(逗号隔开)
可以同时选中多个选择器对应的元素
语法:
选择器1,选择器2,选择器N
#c1,.c2,div{
…
}(并集)
7.伪类选择器
专门用来表示元素的一种特殊状态
比如:访问过的超链接,普通股的超链接,获取焦点的文本框
普通链接
<style>
a:link{
color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
<br/><br/>
<a href="http://www.mvcat.com">我是一个超链接2</a>
访问过的链接(由于涉及用户隐私,只能设置颜色)
a:visited{
color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
<br/><br/>
<a href="http://www.google.com">我是一个超链接2</a>
表示鼠标移入的状态
a:hover{
background-color: orangered;
}
</style>
</head>
<body>
<h1>悯农</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
<br/><br/>
<a href="http://www.google.com">我是一个超链接2</a>
超链接被点击的状态
<style>
a:active{
background-color: orangered;
}
</style>
</head>
<body>
<h1>悯农</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
<br/><br/>
<a href="http://www.google.com">我是一个超链接2</a>
</body>
PS:
-优先级,标签上style优先,编写顺序,就近原则