CSS 小结笔记之选择器
Css选择器主要分为以下几类
1、类选择器:通过.classname 来选择
例如
.color2 {
color: rebeccapurple;
}
同一个标签可以通过多个类名来指定多个样式,但是若其中有重叠部分,则按权重值重叠,若在同一权重级别中,如都是内部样式表中的,则按照上下关系,下面的覆盖上面的。
例如:
.classtest1 {
font-size: 25px;
color: blue;
} .classtest2 {
color: red;
}
<p class="classtest1 classtest2">classtest</p>
则p标签内容显示红色,样式覆盖只与样式定义的顺序有关,与指定的循序无关,如果将上述的p标签中的class顺序调换,则结果不会改变。例如
<p class="classtest2 classtest1">classtest</p>
显示结果与上面的显示结果一致。
2、Id选择器通过#id来选择
例如
#id1 {
color: palegreen;
}
<p id="id1">idTest</p>
在网页中一般来说一个id对应一个元素,多个元素使用同一id值虽然不会报错,并且可以使用同一样式,但是用js进行操作时会出现问题。
3、通配符选择器 *
通配符选择器是选择所有元素。
*{
background-color:yellow;
}
4、标签选择器element
例如 为所有的div设置样式:
div {
color: blue;
font-size: 20px
}
5、伪类选择器
(a)连接伪类选择器 :link |:visited |:hover |:active
a:link {/* 链接的颜色 */
color: blue;
} a:visited {/* 已访问过的颜色 */
color: green;
} a:hover {/* 鼠标放上去的颜色 */
color: red;
} a:active {/*点击瞬间的颜色 */
color: yellow;
}
<a href="#">a链接</a>
连接伪类选择器的顺序尽量不要改变,因为hover放在link和visited后才有效,active再hover后才有效
(b)结构伪类选择器
- :first-child 选取第一个元素
- :last-child 选取最后一个元素
- :nth-chlid(n) 选取第n个元素(n从1开始,n小于等于0时没有匹配项)
- :nth-last-child
li:first-child {
color: blue;
} li:last-child {
color: green;
} li:nth-child(5) {
color: red;
} li:nth-last-child(5) {
color: orange;
}
/* even、2n指定偶数项 odd、2n+1 奇数 */ li:nth-child(odd) {
font-size: 25px;
} li:nth-last-child(2n+1) {
font-size: 35px;
}
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
结果如下图所示
上述的选择器是将父元素中所有的元素进行排序来计算n的,所以当目标元素中穿插了其他元素,此种方法会出现问题。需要用到以下选择器
- :first-of-type 同种类型元素的第一个
- :last-of-type 同种类型元素的最后一个
- :only-of-type 同种类型元素的单独的一个
- :nth-of-type(n) 同种类型元素的第n个
- nth-last-of-type(n) 同种类型元素的倒数n个
span:nth-of-type(even) {
color: blue;
}
<div>
<span>span1</span>
<p>p1</p>
<span>span2</span>
<span>span3</span>
<p>p1</p>
<span>span4</span>
<span>span5</span>
<span>span6</span>
</div>
这时用nth-of-type(n)没有问题而使用 nth-child(n)会出现问题,可以自己试一下。
(c)目标选择器 :target
只对当前目标有效
:target {
color: blue;
font-size: 30px;
}
<a href="#div1">div1的链接</a>
<a href="#div2">div2的链接</a>
<div id="div1">div1Text</div>
<div id="div2">div2Text</div>
点击div1的链接则div1处于活动状态,此时div1的样式改变
6、复合选择器
(1)交集选择器
交集选择器是标签选择器+类选择器(中间没有空格!)。
p.pred {
color: red;
}
<span class="pred">spanText </span>
<p class="pred">Ptext</p>
对于上面的例子中,只有p标签改变了颜色
(2)并集选择器 element,element
当多个标签需要设置同种样式时,使用并集选择器,并集选择器用逗号隔开,如:
div,
span,
.cla1{
color:pink;
}
<div>divtext</div>
<span>spantext</span>
<h3 class="cla1">h3text</h3>
上面三中结果显示样式一致。
(3)后代选择器 element element
后代选择器用空格隔开,例如
div span {
color: orange;
}
指定div下面的span标签是橙色
<div>divText</div>
<span>SpanText</span>
<div>
<span>divspanText</span>
</div>
只有 divspanText 文本变成橙色
(4)子元素选择器 element>element
后代选择器只要是满足前一个标签内的子孙元素都可以,而子元素选择器只有子元素才可以。
div>p {
color: hotpink
}
<div>
<p>divpText</p>
<h1>
<p>h1pText</p>
</h1>
</div>
只有divptext颜色改变,而h1ptext颜色不变。
(5) 下一级选择器 element+element
选择紧接着在上一个元素之后的元素
div+p {
color: green;
}
<div>
<p>divpText</p>
<h1>
<p> h1pText</p>
</h1>
</div>
<p>ptext</p>
只有ptext颜色改变。
(6)属性选择器 E[attr]
具体用法在下例给出
div[class=cla] {
color: pink;
} div[class^=div] {
/*以div开头的class*/
color: blue;
font-size: 15px;
} div[class$=div] {
/*以div结尾的class*/
color: orange;
font-size: 15px;
} div[class*=Text] {
/*包含Text的class*/
color: green;
font-size: 15px;
}
<div class="cla">claText</div>
<div class="div1">div1Text</div>
<div class="div2">div2Text</div>
<div class="div3">div3Text</div>
<div class="1div1Text">1div1Text</div>
<div class="1div1Text">2div1Text</div>
<div class="1div1Text">3div1Text</div>
<div class="1div">1divText</div>
<div class="2div">2divText</div>
<div class="3div">3divText</div>
(7)伪元素选择器
- ::first-letter 首字母
- ::first-line 首行
- ::selection 选中的元素
- ::brfore 在元素开始添加内容与content一起使用
- ::after 在元素结尾添加内容与content一起使用
p::first-letter {
color: red;
font-size: 30px;
} p::first-line {
color: palegreen;
font-size: 25px;
} p::selection {
color: blue;
font-size: 25px;
} P::after {
content: '-结尾'
} p::before {
content: '开头:';
}
<p>层叠样式表(英文全称:Cascading Style Sheets) 是一种用来表现HTML(标准通用标记语言的一个应用) 或XML(标准通用标记语言的一个子集) 等文件样式的计算机语言。 CSS不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
伪元素与伪类选择器的区别:
首先,在Css3标准中伪元素选择器使用两个冒号'::',而伪类选择器使用一个冒号‘ : ’。再就是如果不使用伪元素选择器,想要达成相同的效果需要多添加元素才能实现,而不使用为例选择器想要达成相同的效果需要增加一个类来实现。
例如对于上面的伪元素选择器,想要改变第一个字母的颜色大小则需要增加一个标签:
span {
color: red;
font-size: 30px;
}
<p><span>层</span>叠样式表(英文全称:Cascading Style Sheets) 是一种用来表现HTML(标准通用标记语言的一个应用) 或XML(标准通用标记语言的一个子集) 等文件样式的计算机语言。 CSS不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
而不使用伪类选择器想要改变第一个元素的样式需要增加一个类,例如
.first {
color: blue;
}
<li class="first">li1</li>
CSS 小结笔记之选择器的更多相关文章
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- CSS学习笔记(1):选择器
一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...
- 精通CSS version2笔记之⒈选择器
1.常用的选择器:①元素选择器 指定希望应用样式的元素.比如:p {color:#fff;}②后代选择器 寻找特定元素或者元素的后代. 比如:body p{color:#ccc;} 这个选 ...
- CSS 小结笔记之图标字体(IconFont)
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
- CSS 小结笔记之三种样式表
CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 <div style="color:red;font-size:20px&q ...
- CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
随机推荐
- puppet的使用:ERB模板
ERB介绍 全称是Embedded RuBy,意思是嵌入式的Ruby,是一种文本模板技术,用过JSP的话,会发现两者语法很像. 我们项目中一般用ERB来产生各模块的配置文件.ERB模板也可以用来产生W ...
- 【链表】Insertion Sort List
题目: Sort a linked list using insertion sort. 思路: 插入排序是一种O(n^2)复杂度的算法,基本想法相信大家都比较了解,就是每次循环找到一个元素在当前排好 ...
- 全网最详细的跑python2.7时出现from mysql import connector ImportError: No module named mysql的问题解决办法(图文详解)
不多说,直接上干货! C:\Users\lenovo>pip install mysql-connector-python-rf== Collecting mysql-connector-pyt ...
- sql返回行id
1.sql语句中 insert into tableName() output inserted.id values() 2 .存储过程中 ALTER PROCEDURE dbo.getBuyMedi ...
- C/C++ -- Gui编程 -- Qt库的使用 -- 纯代码实现信号槽
失败,系统找不着槽 #include<QtGui> int main(int argc, char * argv[]) { QApplication app(argc, argv); QT ...
- 【软件工程实践】第二次作业:分布式版本控制系统Git的安装与使用
1.下载安装配置用户名和邮箱. 2. 创建工作目录并通过git init命令把这个目录变成Git可以管理的仓库. 3. 在工作目录下准备文本文件,建议下载Notepad++代替记事本. 4. 组合用g ...
- windows下搭建Cordova安卓环境
phoneGap 被收购后衍生出了 Cordova Android 的开发工具也由 Eclipse 向 Android Studio 靠拢 行业动态在更新,所以资料也要跟着变化... 在开始之前,作为 ...
- 【Express系列】第3篇——接入mysql
通常来说,前后端分离的项目,前端负责界面渲染和操作型的业务逻辑,后端则负责数据存取和数据处理相关的业务逻辑. 既然设计数据,那就少不了数据库的使用.目前市面上流行着各种各样的数据库,这里不打算一一列举 ...
- pandas数据分析
本篇主要介绍如何用pandas来分析一份刚拿到的数据集,即做数据挖掘或清洗的工作. 这里以贷款申请预测的数据来作为例子 一.查看基本信息 拿到数据首先看看大致结构,查看行列数,dataframe数据结 ...
- hadoop学习笔记(四):HDFS
一.HDFS体系结构 1 HDFS假设条件 数据流访问 大数据集 简单相关模型 移动计算比移动数据便宜 多种软硬件平台中的可移植性 2 HDFS的设计目标 非常巨大的分布式文件系统 运行于普通硬件上 ...