CSS中的选择器之html选择器和伪类选择器
1.html选择器(标签选择器)
基本语法:
html标签名称{
属性名:属性值;
属性名:属性值;
}
继续在上面的代码中做修改,实例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span-news{
font-weight:bold;
background-color:pink;
color:black;
}
#span-news-tb{
font-weight:bold;
font-size:25px;
background-color:silver;
}
body{
color:orange;
}
span{
color:red;
}
</style>
</head>
<body>你好,北京!<br>
<span class="span-news">新闻一</span>
<span class="span-news">新闻二</span>
<span class="span-news">新闻三</span>
<span class="span-news">新闻四</span>
<span class="span-news">新闻五</span>
<hr>
<span id="span-news-tb">这是一个比较重要的新闻</span>
</body>
</html>
刷新浏览器后显示效果如下:
对于选择器的优先级的一些说明:
类选择器的优先级 > html标签选择器的优先级
父元素的样式会被子元素继承下来
如何区分同一个标签的不同样式,以达到下图中的效果呢??
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
background-color:#f0f;
font-size:30px;
font-style:italic;
}
p.tb1{
background-color:silver;
}
p.tb2{
background-color:pink;
font-style:normal;
}
</style>
</head>
<body>
<p>这是笑傲江湖的内容</p>
<p>这是笑傲江湖的内容</p>
<p>这是笑傲江湖的内容</p>
<p class="tb1">这是笑傲江湖的内容</p>
<p class="tb2">这是笑傲江湖的内容</p>
</body>
</html>
刷新浏览器显示的效果如下：
2.伪元素选择器(伪类选择器)
现在有如下代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
</body>
</html>
刷新浏览器效果如下：
现在的如下需求：
1.默认样式是黑色的，24px,没有下划线
2.当鼠标移动到超链接时，自动出现下划线
3.点击后，超链接变成红色．
如下图所示：
该怎么样实现呢？？
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
/*超链接的默认样式*/
color:black;
font-size:24px;
text-decoration:none;
}
a:hover{
/*当鼠标移动到超链接时的样式*/
text-decoration:underline;
}
a:visited{
/*点击超链接后的样式*/
color:red;
}
</style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
</body>
</html>
刷新浏览器后的效果如下：
把鼠标放在其中的一个超链接上，看会发生什么？
点击其中一个超链接，会打开超链接指定的网页．
然后返回本页面，又会发生什么呢？？
我点击的是第一个超链接，结果显示的效果如下：
我只点击一个超链接，结果却是相同的两个超链接变成红色的了．
再修改一下代码，又会实现另外一种效果，那就是鼠标选中一个超链接的时候，不松开，而这个超链接的颜色会变成蓝色的．
看下面的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
/*超链接的默认样式*/
color:black;
font-size:24px;
text-decoration:none;
}
a:hover{
/*当鼠标移动到超链接时的样式*/
text-decoration:underline;
}
a:visited{
/*点击超链接后的样式*/
color:red;
}
a:active{
/*鼠标按下的样式*/
color:blue;
}
</style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
</body>
</html>
刷新浏览器，显示的效果如下：
鼠标选中一个超链接，然后不松开，看显示的效果：
这个时候，所选中的超链接确实变成蓝色的了．
现在再来更改下需求，当我把鼠标移动到某个超链接上的时候，超链接的字体就变大，这个又该怎么实现呢？？
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
/*超链接的默认样式*/
color:black;
font-size:24px;
text-decoration:none;
}
a:hover{
/*当鼠标移动到超链接时的样式*/
text-decoration:underline;
font-size:50px;
}
a:visited{
/*点击超链接后的样式*/
color:red;
}
a:active{
/*鼠标按下的样式*/
color:blue;
}
</style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
</body>
</html>
刷新浏览器，跟正常的时候一样，现在再把鼠标放在一个超链接上，显示的效果又会改变了．
上面针对的都是对所有的超链接的处理，现在想对不同的超链接做不同的样式，该怎么做呢？？
初始效果如下：
现在把第三个超链接变成别的样式．
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
/*超链接的默认样式*/
color:black;
font-size:24px;
text-decoration:none;
}
a:hover{
/*当鼠标移动到超链接时的样式*/
text-decoration:underline;
font-size:50px;
}
a:visited{
/*点击超链接后的样式*/
color:red;
}
a:active{
/*鼠标按下的样式*/
color:blue;
}
a.baidu:link{
color:gold;
}
</style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a class="baidu" href="http://www.baidu.com">点击进行百度页面</a><br>
</body>
</html>
刷新浏览器．显示效果如下：
把鼠标移动到百度的超链接上，看看显示的效果：
可以看到，因为没的对这个标签进行设置其样式，所以它继承了整个页面的样式．
现在来对这个超链接设置其样式，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
/*超链接的默认样式*/
color:black;
font-size:24px;
text-decoration:none;
}
a:hover{
/*当鼠标移动到超链接时的样式*/
text-decoration:underline;
font-size:50px;
}
a:visited{
/*点击超链接后的样式*/
color:red;
}
a:active{
/*鼠标按下的样式*/
color:blue;
}
a.baidu:link{
color:gold;
}
a.baidu：hover{
color:blue;
}
</style>
</head>
<body>
<a href="http://www.163.com">点击进行网易页面</a><br>
<a href="http://www.sohu.com">点击进行搜狐页面</a><br>
<a class="baidu" href="http://www.baidu.com">点击进行百度页面</a><br>
</body>
</html>
刷新浏览器后显示的效果跟上面的一样，但是把鼠标放在这个超链接上的时候，颜色就改变了，如下图所示：
伪类选择器主要是用来控制超链接的相关样式．CSS中的选择器之html选择器和伪类选择器的更多相关文章
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- HTML[2种特殊选择器]_伪类选择器&属性选择器
本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- 第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
随机推荐
- vim中的批量替换
VI中的批量替换 1) 文件内全部替换: :%s#abc#123#g (如文件内有#,可用/替换,:%s/abc/123/g) --注:把abc替换成123 (或者: %s/str ...
- Java面向对象接口的应用实例练习
interface USB { public void open(); public void close(); } class Upan implements USB { public void o ...
- [bzoj1227] [SDOI2009]虔诚的墓主人
终于填上了这个万年巨坑....从初二的时候就听说过这题...然后一直不敢写QAQ 现在感觉也不是很烦(然而我还是写麻烦了 离散化一波,预处理出组合数什么的.. 要维护对于当前行,每列上方和下方节点凑出 ...
- hdu_1251统计难题(字典树Trie)
统计难题 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131070/65535 K (Java/Others)Total Submi ...
- 什么是 core dump ? 以及如何使用gdb对 core dumped 进行调试
什么是core dump?(down = 当) core的意思是:内存,dump的意思是:扔出来.堆出来. 开发和使用linux程序时,有时程序莫名其妙的down掉了,却没有任何的提示(有时候会提示c ...
- linux下vi编辑某文件时，操作出现 错误提示： E325: ATTENTION 2, Found a swap file by the name ".p1.c.swp"
当我在linux下用vi打开p1.c文件时 root@iZ2zeeailqvwws5dcuivdbZ:~/1/01/指针# vi p1.c 会出现如下信息: E325: ATTENTION Found ...
- flume1.8 基础架构介绍（一）
1. 系统要求 1. Java运行环境 -- Java 1.8及以上 2. 内存 -- 足够的内存供配置的sources,channels 或者sinks使用 3. 硬盘空间 -- 足够的硬盘空间供配 ...
- kafka producer生产数据到kafka异常：Got error produce response with correlation id 16 on topic-partition...Error: NETWORK_EXCEPTION
kafka producer生产数据到kafka异常:Got error produce response with correlation id 16 on topic-partition... ...
- linux中的两个命令setfacl和chmod有什么区别
setfacl命令可以用来细分linux下的文件权限.chmod命令可以把文件权限分为u,g,o三个组,而setfacl可以对每一个文件或目录设置更精确的文件权限. 比较常用的用法如下:setfacl ...
- 如何在Chrome下使用Postman进行rest请求测试
在web和移动端开发时,常常会调用服务器端的restful接口进行数据请求,为了调试,一般会先用工具进行测试,通过测试后才开始在开发中使用.这里介绍一下如何在chrome浏览器利用postman应用进 ...