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选择器 > 类选择器 > 伪类选择器 > 元素/伪元素选择器 > 通配符选择器
CSS基础2——选择器的更多相关文章
- HTML&CSS基础-属性选择器
HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- CSS基础及选择器
CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...
- Css基础-id选择器
id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...
- CSS 基础 优先级 选择器 继承
1.样式优先级 (内联样式)Inline style > (内部样式)Internal style sheet > (外部样式)External style ...
- CSS基础之选择器
一:CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到,一个样式表时,就会按照. 二:CSS语法 每个CSS有两部分组成:选择器和声明 ...
随机推荐
- (1) SpringBoot创建发布
一.安装jdk8 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二.配置环境 ...
- 牛客网练习赛18 A 【数论/整数划分得到乘积最大/快速乘】
链接:https://www.nowcoder.com/acm/contest/110/A 来源:牛客网 题目描述 这题要你回答T个询问,给你一个正整数S,若有若干个正整数的和为S,则这若干的数的乘积 ...
- CodeForces 445B DZY Loves Chemistry （并查集）
题意: 有N种药剂编号 1 ~ N,然后有M种反应关系,这里有一个试管,开始时危险系数为 1,每当放入的药剂和瓶子里面的药剂发生反应时危险系数会乘以2,否则就不变,给出N个药剂和M种反应关系,求最大的 ...
- AtCoder Grand Contest 012 B Splatter Painting （反向处理 + 记忆化）
题目链接 agc012 Problem B 题意 给定一个$n$个点$m$条边的无向图,现在有$q$个操作.对距离$v$不超过$d$的所有点染色,颜色编号为$c$. 求每个点最后的颜色状态. 倒过 ...
- bzoj 1305: [CQOI2009]dance跳舞
题目链接 bzoj 1305: [CQOI2009]dance跳舞 题解 男,女生拆点A1A2,B1B2,拆成两点间分别连容量为K的边,限制与不喜欢的人跳舞的数量 A1连接源点容量为x,B1连接汇点容 ...
- POJ 3680 Intervals（费用流+负权优化）
[题目链接] http://poj.org/problem?id=3680 [题目大意] 有N个带权重的区间,现在要从中选取一些区间, 要求任意点都不被超过K个区间所覆盖,请最大化总的区间权重. [题 ...
- [Contest20180418]物理竞赛
题意:在一个三维空间中有一个轴,轴上有一个垂直于轴的半径为$R$的凸透镜(光心在轴上)和$n$个点光源,假设每个点光源发出的$1$单位光都刚好覆盖凸透镜,现在有一个半径为$r$的圆形光屏,问光屏最多能 ...
- UVA 103 Stacking Boxes n维最长上升子序列
题目链接:UVA - 103 题意:现有k个箱子,每个箱子可以用n维向量表示.如果一个箱子的n维向量均比另一个箱子的n维向量大,那么它们可以套接在一起,每个箱子的n维向量可以互相交换值,如箱子(2,6 ...
- 每天一个liunx命令10之nohup和xargs
1上传jar包到服务器/edgewalk/springboot/下 2编写启动脚本start.sh #!/bin/sh APP_HOME=/edgewalk/springboot cd $APP_HO ...
- PHP下载/采集远程图片到本地
/** * 下载远程图片到本地 * * @param string $url 远程文件地址 * @param string $filenNme 保存后的文件名(为空时则为随机生成的文件名,否则为原文件 ...