CSS学习笔记2：选择器
标签选择器
1、选择要给样式的目标标签，所以叫做标签选择器，也叫元素选择器。
2、给所有相同标签，给相同样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS注释</title> <style type="text/css">
/*标签选择器：标签作为选择器*/
p{
color: red;
}
div{
color: purple;
} </style>
</head>
<body>
<p>李大嘴</p>
<p>佟掌柜</p>
<p>白展堂</p>
<div>鸣人</div>
<div>佐助</div> </body>
</html>
类选择器
1、html声明，CSS调用
2、格式： .类名{属性:值;属性:值}
3、类名尽量不使用下划线（用中横线代替），纯数字，中文，具体见命名规范。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS注释</title> <style type="text/css">
/*标签选择器：标签作为选择器*/
p{
color: red;
}
div{
color: purple;
}
/*类选择器:html声明，CSS调用*/
.mingren{
color: orange;
font-weight: bold;
font-family: "微软雅黑" }
.zuozhu{ color: blue;
} </style>
</head>
<body>
<p>李大嘴</p>
<p>佟掌柜</p>
<p>白展堂</p>
<!-- 声明类 -->
<div class="mingren">鸣人</div>
<div class="zuozhu">佐助</div> </body>
</html>
多类名选择器
1、混合搭配，比较自由
2、多个类名用空格隔开，与顺序无关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS注释</title> <style type="text/css">
.font20{
font-size: 20px；
}
.font14{
font-size:14;
}
.pink{
color: pink;
} </style>
</head>
<body>
<div class="font20 pink">亚瑟</div>
<div class="font20">项羽</div>
<div class="font14 pink">刘备</div>
<div class="font14">安琪拉</div>
</body>
</html>
id选择器
1、id名即为html元素的id属性值，大多数html元素都具体定义id属性，元素的id值是唯一的，只能对应文档中的某一个具体元素
2、类选择器时可以多次重复使用，类似人名。W3C规定，id选择器只能使用一次，相当于身份证号。区别就是在使用次数上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS注释</title> <style type="text/css">
#pink{
color: pink;
}
</style>
</head>
<body>
<div id="pink">亚瑟</div>
<div >项羽</div>
<div >刘备</div>
<div >安琪拉</div>
</body>
</html>
通配符选择器
*代表所有选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS注释</title> <style type="text/css">
*{
color: pink;
}
</style>
</head>
<body>
<div>亚瑟</div>
<p >刘备</p>
<h1>我是段落</h1>
</body>
</html>
伪类选择器
用于向某些选择器添加特殊效果，如给链接添加效果，比如可以选择 第一个，第n个选择器。
链接伪类选择器
1、a:link /*未访问的链接*/
2、a:visited /*已访问的链接*/
3、a:hover /*鼠标移入的链接*/
3、a:activea: /*鼠标按住的链接*/
顺序尽量不要颠倒，按照lvha（love hate记忆法）的顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS注释</title> <style type="text/css">
a:link {
color: blue;
}
a:visited {
color: gray;
}
a:hover{
color: green;
}
a:active{
color: red; } </style>
</head>
<body>
<div><a href="#">秒杀</a></div> </body>
</html>
简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{ font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover{
color: red; } </style>
</head>
<body>
<a href="#">秒杀</a>
</body>
</html>
结构（位置）伪类选择器（CSS3）
:first-child：选择父类选择器的第一个子类
:last-child：选择父类选择器的最后一个子类
:nth-child(4)：选择父类选择器的最后4个子类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li:first-child{
color:red;
}
li:last-child{
color: blue;
}
li:nth-child(4){
color: green;
} </style>
</head>
<body>
<ul> <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li> </ul> </body>
</html>
:nth-child(even)：选择所有偶数子类
:nth-child(odd)：选择所有奇数子类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li:nth-child(even){
color:red;
}
li:nth-child(odd){
color:green;
} </style>
</head>
<body>
<ul> <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li> </ul> </body>
</html>
可以用公式：n是从0开始的
:nth-child(n)：选择所有子类
:nth-child(2n)：选择所有偶数子类
:nth-child(2n+1)：选择所有奇数子类
:nth-child(3n)：选择第3的倍数个子类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li:nth-child(3n){
color:red;
} </style>
</head>
<body>
<ul> <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li> </ul> </body>
</html>
:nth-last-child(2)：选择倒数第2个子类
后面的公式和even、odd用法和:nth-child一样，不过是把最后一个当第一个子类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li:nth-last-child(2){
color:red;
} </style>
</head>
<body>
<ul> <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li> </ul> </body>
</html>
目标伪类选择器
:target：当前选中的元素，配合锚点使用
<style type="text/css">
:target{
color: red;
}
</style>
文本颜色
1、英文：red，green等
2、十六进制：#00ff00（#0f0）、#ffffff（#fff），尽量用16进制的简写，#ff00fe不能简写
3、GRB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*英文*/
li:nth-child(3n){
color:red;
}
/*十六进制*/ li:nth-child(2){
color:#ff00ff; }
/*RGB */
li:nth-child(4){
color:rgb(203,35,224);
} </style>
</head>
<body>
<ul> <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li> </ul> </body>
</html>
CSS学习笔记2：选择器的更多相关文章
- 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学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- BZOJ 1767] [Ceoi2009] harbingers (斜率优化)
[BZOJ 1767] [Ceoi2009] harbingers (斜率优化) 题面 给定一颗树,树中每个结点有一个邮递员,每个邮递员要沿着唯一的路径走向capital(1号结点),每到一个城市他可 ...
- BlockingQueue 阻塞队列（生产/消费者队列）
1:BlockingQueue的继承关系 java.util.concurrent 包里的 BlockingQueue是一个接口, 继承Queue接口,Queue接口继承 Collection Blo ...
- vue 跳转页面返回时tab状态有误的解决办法
一.前言 最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项. ...
- C# 反射实现动态加载程序集
原文:https://blog.csdn.net/pengdayong77/article/details/47622235 在.Net 中,程序集(Assembly)中保存了元数据(MetaData ...
- 15、前端知识点--MVVM
MVVM模式的理解 MVVM模式里面,核心是数据. 各种前端框架,最核心的说就是保持了数据与视图的同步. 数据驱动思想:数据驱动视图. Vue不建议手动操作DOM. 以前是指令操作DOM,其实本质上底 ...
- addEventListener 的三个参数
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文 ...
- win32 socket编程（二）——TCP/IP
一.大端.小端法定义 1.1小端法(Little-Endian)就是低位字节排放在内存的低地址端即该值的起始地址,高位字节排放在内存的高地址端. (主机字节顺序) 1.2 大端法(Big-Endian ...
- 线上nginx 平滑添加新模块；如（--with-http_realip_module）
nginx 添加模块1.查看当前nginx信息(配置文件路径,启动用户...) ps aux | grep nginx 2.查看当前nginx已启用的模块(记录模块信息,安装路径)./nginx -V ...
- Centos 7 环境下安装 RabbitMQ 3.6.10
一.单机安装 在Centos7系统下部署(阿里云服务),使用yum安装 hostnamectl set-hostname rabbit01 #永久修改 1.1安装Erlang,因为RabbitMQ 是 ...
- HTTP RESTful服务开发 spring boot+Maven +Swagger
这周配合第三方平台整合系统,需要提供HTTP REST服务和使用ActiveMQ推送消息,研究了下,做个笔记. 1.使用eclipse创建Spring Boot项目 创建Spring Boot项目( ...