标签选择器

  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:选择器的更多相关文章

  1. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  2. CSS学习笔记(1):选择器

    一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...

  3. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  6. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  7. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  8. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

随机推荐

  1. [Codeforces 1197E]Culture Code(线段树优化建图+DAG上最短路)

    [Codeforces 1197E]Culture Code(线段树优化建图+DAG上最短路) 题面 有n个空心物品,每个物品有外部体积\(out_i\)和内部体积\(in_i\),如果\(in_i& ...

  2. body传参?parameter传参?Request Payload?Query String Parameter?

    今天,是有委屈的一天:今天,是有小情绪的一天.所以,我们要对今天进行小结,跟它做一个了断! 今天,后端来一个接口,告诉我"要用post请求,parameter形式传参".over. ...

  3. 什么是dockerfile?

    什么是dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档.可以使用在命令行中调用任何命令. Docker通过读取Dockerfile中的指令自动生成映像. docker ...

  4. 项目常见bug

    Invalid prop: type check failed for prop "disabled". Expected Boolean, got String with val ...

  5. postman断言

    较旧的写作邮差测试风格 较旧的Postman测试编写风格依赖于特殊tests对象的设置值.您可以为对象中的元素设置描述性键,然后说明它是真还是假.例如,tests["Body contain ...

  6. MongoDB的使用学习之(三)安装MongoDB以及一些基础操作

    原文链接:http://www.cnblogs.com/huangxincheng/archive/2012/02/18/2356595.html 此博主的 8天学通MongoDB 系列还是不错的,本 ...

  7. Tomcat 保存镜像实战操作( 目录挂载方法 )

    查看数据保存的位置 docker inspect --format='{{.Mounts}}' mxg_tomcat 宿主机数据保存在 /usr/local/project , 将此路径数据备份在 b ...

  8. Taro -- 微信小程序登录

    Taro微信小程序登录 1.调用Taro.login()获取登录凭证code: 2.调用Taro.request()将code传到服务器: 3.服务器端调用微信登录校验接口(appid+appsecr ...

  9. 树——populating-next-right-pointers-in-each-node(填充每个节点的next指针)

    问题: Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode ...

  10. 【CF】38E Let's Go Rolling! (dp)

    前言 这题还是有点意思的. 题意: 给你 \(n\) (\(n<=3000\)) 个弹珠,它们位于数轴上.给你弹珠的坐标 \(x_i\) 在弹珠 \(i\) 上面花费 \(C_i\) 的钱 可以 ...