- CSS选择器
Selector,Selector,Selector {property:value;property:value...}
a. 基本选择器: 通配符, 标签, ID, class和属性选择器
b. 组合选择器: 分组选择器,后代选择器,子选择器和相邻兄弟选择器。也叫派生选择器：使用“父元素 子元素”的格式定位到特定父元素下的子元素。
以下是一份html：
<h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">css给我们带来丰富多彩的世界</div> <br> <div class="cs">帝王注定孤独!</div> <br> <div title="dt">江山与她何干!</div>
- 1. 基本选择器
h2 {
color: red;
}
div {
color: red;
}
2) ID选择器 为指定id属性值的某个标签应用样式,以#开头来定义
#p1 {
color:#00ff00;
font-size: 40px;
}3) 类(class)选择器 为指定class属性值的某些标签应用样式,以.开头来定义
.cs {
color: blue;
}4) 属性选择器 属性选择器可以根据元素的属性[及属性值]来选择元素。
a. 根据属性名来匹配, 将属性名用[]包含起来
[title] {
color: gray;
font-size: 20px;
}
b. 根据属性名和属性值来匹配, 将属性名和值用[]包含起来
[title='dt'] {
color: gray;
font-size: 20px;
}5) 通配符选择器 配置任意标签
* {
font-size: 30px;
}- 2. 组合选择器
h2,#p1,.cs {
color:green;
}<h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">帝王注定孤独</div> <br> <div class="cs">江山与她何干!</div> <br>
2) 后代选择器 只要是后代不管是几层，都可以找到
div span {
color: blue;
}
<div title="dt">
<h3>
<span>帝王注定孤独!</span>
</h3>
<span>江山与她何干!</span>
</div>3) 子选择器 这里必须是直接子元素
div>span {
color: green;
}
<div title="dt">
<h3>
<span>帝王注定孤独!</span>
</h3>
<span>江山与她何干!</span>
</div>4) 相邻兄弟选择器
h3+span {
color: orange;
}
<div title="dt">
<h3>
<span>帝王注定孤独!</span>
</h3>
<span>江山与她何干!</span>
</div>5） 超链接相关选择器
a:link 设置超级链接在未被访问过时的css样式
a:hover 设置当鼠标悬停在超级链接上时的css样式
a:active 设置超级链接被用户激活（鼠标点击和释放之间的事件）时的css样式
a:visited 设置已经访问过的超级链接的css样式
然后默认超链接是蓝色带一个下划线的样式，如果我希望超链接是黑色然后不带下划线，然后当鼠标移动到上面去的时候出现下划线，点击以后超链接编程红色，这样的效果该如何设计呢？
<html>
<head>
<title>测试: 内部样式表</title>
<style type="text/css">
a:link{
color:block;
text-decoration:none;
}
a:hover {
text-decoration:underline ;
}
a:visited{
color:red;
}
</style>
</head>
<body>
<a href="#">这里是一个超级链接</a>
</body>
</html>