CSS基础2——选择器
前面说过样式规则。也知道了样式规则语法形式为:选择器+声明块
如:div{ color:black;padding:10px; } div即表示选择器(此处是元素选择器),花括号里的内容就是声明块。
选择器用于指定样式规则可作用于HTML文档中的哪个或者哪些元素。
常见的选择器类型有下面几种:
1、元素选择器(类型选择器):匹配选择器的网页上的不论什么HTML元素,不考虑这些元素在文档树中的位置。
如:p{ background:aqua; color:pink; } 匹配网页上的不论什么p元素,不考虑p元素在文档树中的位置
2、类选择器:被用于选择有某个class属性的不论什么HTML元素,语法形式:.类名{属性:值;}
<head>
<style type="text/css">
.hello{
width:100px;
height: 100px;
background: #eee;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<span style="white-space:pre"> </span><div class="hello">类选择器</div>
</body>
同一class属性值能够再同一页面出现多次
3、ID选择器:被用于选择有某个ID属性的不论什么HTML元素,语法形式: #id名{ 属性:值;}
<head>
<style type="text/css">
#hello{
width:100px;
height: 100px;
background: #eee;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<span style="white-space:pre"> </span><div id="hello">ID选择器</div>
</body>
同一ID属性值在同一页面上仅仅能出现一次
4、通配符选择器:用于选择全部元素,语法:*{ 属性:值}
5、包括选择器:用于选择文档的一个元素的后代元素
第一种方法:
<head>
<style type="text/css">
p span{
font-weight: bold;
color:red;
}
</style>
</head>
<body>
<p>how <span> are</span> you?</p>
</body>
另外一种方法
<head>
<style type="text/css">
p>.sp{
font-weight: bold;
color:red;
}
</style>
</head>
<body>
<span style="white-space:pre"> </span><p>how <span class="sp"> are</span> you?</p>
</body>
6、伪类选择器:以不同方式格式化超链接<a>元素的四种不同状态
a:link{} 用在未訪问的链接的选择器
a:visited{} 用在已訪问的链接的选择器
a:hover{} 用在鼠标光标放在其上的链接的选择器。当中hover还能够用在别的元素中用于制作在鼠标光标放在目标上的样式的编辑
a:active{} 用在获得焦点(比方:被点击)的链接上的选择器
<head>
<style type="text/css">
.a:link{color: #000;}
.a:visited{color: #ff0;}
.a:hover{color:red;}
.a:active{color:black;}
</style>
</head>
<body>
<a href="#" class="a">点点点</a>
</body>
7、伪元素选择器:
(1) :first-line 用于一个元素的第一行的选择器
如段落的第一行
<head>
<style type="text/css">
p:first-line{
color:red;
}
</style>
</head>
<body>
<p>hello<br/>world</p>
</body>
仅仅有hello是红色的
(2) :first-letter 用于一个元素的第一个字符的选择器
如段落的第一个字符
<head>
<style type="text/css">
p:first-letter{
color:red;
}
</style>
</head>
<body>
<p>蓦然回首</p>
</body>
仅仅有蓦字是红色的。
(3) :first-child 用于<body>中第一个是( :first-child)前面的元素的全部内容的选择器
<head>
<style type="text/css">
p:first-child{
color:red;
}
</style>
</head>
<body>
<p>蓦然回首</p>
<p>然后呢?</p>
</body>
蓦然回首是红色的
<head>
<style type="text/css">
p:first-child{
color:red;
}
</style>
</head>
<body>
<div>歌声里</div>
<p>蓦然回首</p>
<p>然后呢?</p>
</body>
没有字体内容的颜色是红色的。由于<body>中第一个元素是div,而不是p
选择器的优先级:ID选择器 > 类选择器 > 伪类选择器 > 元素/伪元素选择器 > 通配符选择器
最新文章
- 无法识别的配置节 connectionStrings
- LeetCode 396. Rotate Function
- Spring boot配置文件 application.properties
- 扯扯Java中Finalization的意义
- 什么是Spring的命名空间及使用Spring 的命名空间p 装配属性
- 运行时---关联Associated
- 大型系统开发sql优化总结(转)
- 两个php.ini; ubuntu下配置文件
- 我的RTOS 之六 -- Touch移植(s5pv210+threadx+ucgui+touch)
- div.2/Bellovin<;最长上升子序列>;
- 使用Elasticsearch的动态索引和索引优化
- linux添加超级管理员用户,修改,删除用户
- java 读取外部和source下配置文件
- Data Model for Certificate
- git flow 使用步骤
- C语言记录汇总
- rsa 加密 pkcs#1格式秘钥的格式化
- 打电话时InCallScreen的具体流程 之 来电不锁屏
- struts系列:返回json格式的响应
- Spring.NET依赖注入框架学习-- 泛型对象的创建和使用