选择器类型
image.png
1. 标签选择器
标签选择器，所有使用该标签的地方都会做此属性设置
image.png
2.类选择器
示例代码
类选择器，用.类名表示，一个元素可以用多个类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
h1{color: blue}
.special { color: green }
p.special { font-size: 60px}
.one{text-decoration: underline;}
</style>
<!-- 如果元素已经使用了同一个类，元素还希望设置有别于有设置相同类的元素，则使用元素。类名{属性}设置 -->
</head>
<body>
<h1 class="special">lallala</h1>
<p class="special one">lallala</p>
<!-- 当有多个类引用时 -->
<h1>lallala</h1>
<h1>lallala</h1>
</body>
</html>
效果
image.png
id选择器
- id选择器id是唯一的，一个html中不要出现相同id。id用#号设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
h5{color: blue}
#special { color: green }
#one{text-decoration: underline;}
</style>
<!-- 如果元素已经使用了同一个类，元素还希望设置有别于有设置相同类的元素，则使用元素。类名{属性}设置 -->
</head>
<body>
<h5 id="special" ="special">lallala</h5>
<p id="one">lallala</p>
<!-- 当有多个类引用时 -->
<h5>lallala</h5>
<h5>lallala</h5>
</body>
</html>
群组选择器
集体统一设置样式。标签选择器，类选择器，id选择器都可以通过群组选择器设置统一样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
h5,#special,#one{text-align: center;}
/*对类选择器，id选择器，标签选择器一通设置上同一个属性*/
h5{color: blue}
#special { color: green }
p.special{font-size: 12}
#one{text-decoration: underline;}
</style>
<!-- 如果元素已经使用了同一个类，元素还希望设置有别于有设置相同类的元素，则使用元素。类名{属性}设置 -->
</head>
<body>
<h5 id="special" ="special">lallala</h5>
<p id="one">lallala</p>
<!-- 当有多个类引用时 -->
<h5>lallala</h5>
<h5>lallala</h5>
</body>
</html>
全局选择器
通过*号来设置，html里面的所有元素都将持有此属性。同样写在head标签中的style标签中
*{color: red}
后代选择器
image.png
伪类
比如：像鼠标选中一个链接，点击链接，以及访问完链接回来，链接的颜色属性发生相应改变的效果。
image.png
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
a:link{color: green} /**未访问 顺序必须这么写，否则没效果**/
a:visited{color: blue} /**已访问**/
a:hover{color: yellow} /**悬浮 **/
a:active{color: red} /** 激活**/
</style>
</head>
<body>
<a href="http:www.baidu.com">测试伪类</a>
</body>
</html>
网友评论