CSS基础之选择器
一：CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到，一个样式表时，就会按照。
二：CSS语法
每个CSS有两部分组成：选择器和声明，声明又包括属性和属性值。每个声明由分号结束。
三：CSS的几种引入方式
3.1：行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
3.2：内部样式
嵌入式是将CSS样式几种写在HTML的<head>标签之中，具体方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<base target="_blank">
<style type="text/css"> ul{
list-style: none;
margin: 0;
padding: 0;
}
a{
display: :block;
width: 60px;
}
a:link{color: pink;}
a:visited{color: #2B6600}
a:hover{color: blue; font-size: 150%;}
a:active{color: #222222} </style>
</head>
<body>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#news">news</a></li>
<li><a href="#about">about</a></li>
<li><a href="shopping">shopping</a></li>
</ul> </body>
</html>
3.3：外部样式
外部样式就是把CSS文件写在单独的文件里面，将HTML文件和CSS样式表完全解耦和，提高开发效率，具体引入方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body > </body>
</html>
四：CSS选择器
4.1：基本选择器
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
#p1 {
color: red;
}
</style>
</head>
<body>
<p id = 'p1'>hello world</p> </body>
</html>
类选择器（标签的类属性可以有多个，多个属性需要以空格分开）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
.p1 {
color: red;
}
.p2 {
font-weight: bold;
} </style>
</head>
<body>
<p class = 'p1 p2'>hello world</p>
</body>
</html>
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
p {
color: pink;
font-weight: bold;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
* {
color: pink;
font-weight: bold;
}
</style>
</head>
<body>
<p>hello world</p>
<p>yes command</p>
<p>one world one dream</p>
</body>
</html>
4.2：组合选择器
4.2.1：后代选择器
/*
选中标签li下的所有标签a，将其文本设置成pink颜色
*/
li a {
color: pink;
}
4.2.2：儿子选择器
/*
选择标签div的子标签p,(注意：仅仅是子标签，其子子p标签，和后面的都不选中）
*/
div>p {
color: red;
}
4.3.3：毗邻选择器
/*
毗邻选择器必须通过+号链接,毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
*/
div+p {
font-weight: bold;
}
4.3.4：弟弟选择器
/*
用~来链接,选择器选中的是指选择器后面的某个选择器选中的所有标签,无论有没有被隔开，都可以被选中
*/
ul~p {
color: yellow;
}
注：选中ul标签后所有的同级的p标签，无论p标签有没有隔开
4.3：属性选择器
/*
用于选取带有属性的元素
*/
p [title] {
color: red;
}
/*
可以用去选取带有指定属性的属性值的元素
*/
p[class = 'part1']
4.4：CSS3中的序列选择器
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个 :first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个 :only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个
4.5：伪类选择器（附具体使用场景）
/* 未访问的链接 */
a:link {
color: #FF0000
} /* 已访问的链接 */
a:visited {
color: #00FF00
} /* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
} /* 选定的链接 */
a:active {
color: #0000FF
} /*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
注：
1 a标签的伪类选择器可以单独出现，也可以一起出现
2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
link，visited，hover，active
3 hover是所有其他标签都可以使用的
4 focus只给input标签使用
伪类选择器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<base target="_blank">
<style type="text/css">
a:link{color: pink;}
a:visited{color: #2B6600}
a:hover{color: blue; font-size: 150%;}
a:active{color: #222222}
</style> </head>
<body>
<a href="#">home1</a><br>
<a href="#">home2</a><br>
<a href="#">home3</a>
</body>
</html>
4.6：伪元素选择器
/*
选取标签p首字母设置
*/
p:first-letter {
font-size: 48px;
color: red;
} /*
在每个<p>标签之前插入？
*/
p:before {
content:"？";
color:red;
} /*
在每个<p>元素之后插入？
*/
p:after {
content:"[?]";
color:blue;
}
CSS基础之选择器的更多相关文章
- 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基础2——选择器
前面说过样式规则.也知道了样式规则语法形式为:选择器+声明块 如:div{ color:black:padding:10px; } div即表示选择器(此处是元素选择器),花括号里的内容就是声明块 ...
随机推荐
- Python fullstack系列【2】Python数据类型
基本数据类型 学习一门编程语言通常都是先了解其不同的数据类型,以及每种数据类型对象所附带的方法,Python也不例外,本篇就详细介绍下这部分. Python基本数据类型总览: 1.Booleans(布 ...
- 相见恨晚的 scala - 01 [ 基础 ]
简洁到不行,多一个分号都是不应该. 学习笔记: centOS 下安装 scala 和安装 jdk 一毛一样 . 1 . 不同于 Java 的变量声明 :( 但是和 js 很像 ) /** * Crea ...
- springmvc+mybatis 处理图片(一)：上传图片
一直觉得上传图片文件之类的很难,所以最后才处理图片,发现也并没有那么难,开始正文. 思路:将前台上传的file存到MutipartFile类型字段中,再将MulipartFile转换为pojo类中的b ...
- MT【138】对称乎？
已知\(a+b=1\),求\((a^3+1)(b^3+1)\)的最大值______ : 解答: \[ \begin{align*} (a^3+1)(b^3+1) &=a^3+b^3+a^3+b ...
- Tomcat8.0配置JNDI多数据源
jndi配置 :此种配置需要在Tomcat的server.xml中和context.xml中配置数据源,在项目中引用. 需要在tomcat下加入数据库连接的jar包,相关包(ojdbc14;c3p0数 ...
- 【转】64位Ubuntu 16.04搭建嵌入式交叉编译环境arm-linux-gcc过程图解
64位Ubuntu 16.04搭建嵌入式交叉编译环境arm-linux-gcc过程图解,开发裸机环境之前需要先搭建其开发环境,毕竟工欲善其事必先利其器嘛. 安装步骤 1.准备工具安装目录 下载 ar ...
- 【Cf #290 C】Fox And Dinner（最大流）
如果要相邻两个数(a[i] >= 2)相加为质数,显然它们的奇偶性不同,也就是说一个圆桌(环)必须是偶环. 也就是答案的若干个环组成了一张二分图,其中以奇偶分色. 考虑每个点的度数一定为2,用最 ...
- 20135319zl字符集报告
字符集实验 ASCII 首先,查找ZHULI五个字符对应的ASCII码,5a 48 55 4c 49. 然后,用vim打开一个空文档,按下":",输入%!xxd 然后,输入 000 ...
- Java之IO流(字节流,字符流)
IO流和Properties IO流 IO流是指计算机与外部世界或者一个程序与计算机的其余部分的之间的接口.它对于任何计算机系统都非常关键, 因而所有 I/O 的主体实际上是内置在操作系统中的.单独的 ...
- Codeforces 901C. Bipartite Segments（思维题）
擦..没看见简单环..已经想的七七八八了,就差一步 显然我们只要知道一个点最远可以向后扩展到第几个点是二分图,我们就可以很容易地回答每一个询问了,但是怎么求出这个呢. 没有偶数简单环,相当于只有奇数简 ...