HTML和CSS前端教程03-CSS选择器
1. CSS定义
层叠样式表
2. 创建CSS的三种方法
2.1. 元素内嵌（权重最高）
<p style="color:red;font-size:50px;">
2.2. 文档内嵌
通过选择器的方法调用指定的元素并设置相关的CSS
<style type="text/css">
p{
color:red;
font-size: 30px;
}
</style>
2.3. 外部引用
- 定义一个style01.css文件
@charset "utf-8";
p{
color:red;
font-size: 30px;
}
- 在主文件中应用style
<!--在header中-->
<link rel="stylesheet" type="text/css", href="style01.css">
大量HTML使用同一组CSS，就可以将这些样式保存到一个单独的.CSS文件中，通过link引用就可以了
3. CSS层叠和继承
- 样式表层叠： 同一元素通过不同方式设置样式表所产生的样式重叠
- 样式表继承： 某一个被嵌套的元素得到它父类元素样式
- 浏览器样式： 这个元素在浏览器运行时附加的样式
3.1. 浏览器样式
<b>b元素有加粗元素</b>
<span style="font-weight:bold;">span元素没有加粗样式，但是可以设置</span>
<b style="font-weight:normal;">b元素手动取出加粗元素</b>
3.2. 样式表层叠
<link rel="stylesheet" type="text/css", href="style01.css">
<style type="text/css">
p{
color:red;
font-size: 30px;
}
</style>
<!--同时叠加（不是覆盖）三个元素-->
<p style = "font-size:50px; color:orange;">我要叠加三个样式</p>
优先级： 元素内嵌 <- 文档内嵌 <- 外部引用 <- 浏览器
可以在不同样式中添加!important关键字来强行设置优先级
color: green !important
3.3. 样式继承
<style type="text/css">
p{
color:red;
font-size: 30px;
}
</style>
<p>这是<b>HTML5</b></p>
此时显示的是这是HTML5,我们只设置了p为红色，但是b也为红色了，因为b是在p内部
- 如果一个元素没有设置父元素相关的样式，那么就会使用继承机制将父类样式继承下来
- 样式继承只适用于元素的外观(文字，颜色，字体等)，布局样式无法继承
4. CSS选择器
定位到你想要设计的样式元素来设计元素
4.1. 选择器的总汇
(1) 基本选择器
使用频率最高的一些选择器
1.通用选择器*
*表示通用选择器，匹配所有HTML元素包括<HTML>和<body>标签可以为所有元素匹配并配置样式，但是无法筛选不必要元素
定义一个CSS
@charset "utf-8"
* {
border: 1px solid red;
}
/*通用选择器可以匹配到html和body元素*/
<link rel="stylesheet" type="text/css", href="style01.css">
<p>这是一个段落</p>
<p>这是一个加粗</p>
<span>这是一个什么都没有</span>
2.元素选择器p
@charset "utf-8"
p {
border: 1px solid red;
}
/*通用选择器可以匹配到html和body元素*/
3.ID选择器#adc
ID是唯一的，不可重复使用
@charset "utf-8"
#abc {
border: 1px solid red;
}
<link rel="stylesheet" type="text/css", href="style01.css">
<p id="abc">这是一个段落</p>
<p>这是一个加粗</p>
<span>这是一个什么都没有</span>
4. 类选择器.
@charset "utf-8"
.abc {
border: 1px solid red;
}
<link rel="stylesheet" type="text/css", href="style01.css">
<p class="abc">这是一个段落</p>
<p class="abc">这是一个加粗</p>
<span>这是一个什么都没有</span>
也可以限定元素
@charset "utf-8"
p.abc {
border: 1px solid red;
}
/*只能适用于段落*/
也可以使用多个class
@charset "utf-8"
.abc {
border: 1px solid red;
}
.def {
font-size: 30px;
}
<p class="abc def">这是一个加粗</p>
5. 属性选择器[...]
@charset "utf-8"
[href]{
color: red;
}
<a href="http://www.baidu.com">这是一个百度</a>
也可以设置相关的属性值
@charset "utf-8"
[type="password"]{
border: 1px solid red;
}
<input type="password">
通过正则表达式来设置匹配
@charset "utf-8"
[href^="http"]{
color: orange;
}
/*只能开头是http才能匹配*/
<a href="http://www.baidu.com">百度</a>
<a href = "javascript:void(0)">好搜</a>
通过精确匹配
@charset "utf-8"
[href*="baidu"]{
color: orange;
}
/*只能包含baidu才能匹配*/
(2) 复合选择器
将不同选择器进行组合形成的新的特定匹配
1.分组选择器
多个选择器逗号分隔，同时设置一组样式
@charset "utf-8"
p,b,i,span {
color: orange;
}
#abc,.abc,i,span {
color: orange;
}
2.后代选择器
选择<p>元素内部所有的<b>元素，不在乎<b>的层次深度
@charset "utf-8"
p b {
color: orange;
}
<p>这是一个HTML5<b>教程</b></p>
效果为： 这是一个HTML5教程
3. 子选择器
与后代选择器类似，但是只能运用于儿子，孙子就不行了
@charset "utf-8"
p>b {
color: orange;
}
4.相邻兄弟选择器
匹配第一个元素相邻的第二个元素
@charset "utf-8"
p+b {
color: orange;
}
5.普通兄弟
类似，只是靠的不是特别近
@charset "utf-8"
p~b {
color: orange;
}
(3) 伪元素选择器::
1. 块级首行::first-line
- 只适用于
<p>、<div>等的首行文本选定
:: first-line {
color: orange;
}
2. 块级首字母::first-letter
p:: first-letter {
color: orange;
}
3. 文本前插入::before
- 在文本前插入内容
a:: before {
content: '点击-';
}
3. 文本后插入::after
(4) 伪类选择器
1. 结构性伪类:
- 可以根据元素在文档中的位置选择元素
1.1. 根元素选择器
:root {
border: 1px solid red;
}
1.2. 子类选择器
ul>li:first-child {
color: red;
}
/*父类的第一个儿子*/
ul>li:last-child {
color: red;
}
/*父类的最后一个儿子*/
ul>li:only-child {
color: red;
}
/*选择只有一个子元素的那个元素*/
dive>p: only-of-type {
color: red;
}
/*选择只有一个指定类型的子元素的那个元素*/
1.3.nth-child(n)系列
ul>li:nth-child(2) {
color: red;
}
/*选择第2个*/
ul>li:nth-last-child(2) {
color: red;
}
/*选择倒数第2个*/
ul>li:nth-of-type(2) {
color: red;
}
/*特定类型第2个*/
ul>li:nth-last-of-type(2) {
color: red;
}
/*特定类型倒数第2个*/
2.UI伪类
用于匹配表单的数据
enabled
input:enabled {
border: 1px solid red;
}
/*选择表单中的enable元素*/
<form>
<input tupe="text" disabled>
<input tupe="text">
</form>
checked
input:checked {
display: none;
}
default
input:default {
display: none;
}
valid和not valida
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}
required
input:required {
border: 1px solid red;
}
3. 动态伪类
根据条件改变匹配元素
link-超链接
/*Url没有访问的颜色*/
a:link {
color: red;
}
/*Url被点击的颜色*/
a:visited {
color: blue;
}
/*鼠标悬停的颜色*/
a:hover {
color: orange;
}
/*鼠标长按的颜色*/
a:active {
color: green;
}
<a href="baidu.com">百度</a>
focus-文本框获取的
/*鼠标获取到文本框的颜色*/
input:focus {
border: 1px solid green;
}
其他伪类选择器
not否定选择器
/*选择百度除外的URL*/
a:not([href*="baidu"]) {
color: green;
}
empty
/*空元素隐藏*/
:empty {
display: none;
}
target-定位到锚点
/*空元素隐藏*/
b:target {
color: red;
}
HTML和CSS前端教程03-CSS选择器的更多相关文章
- web前端教程：CSS 布局十八般武艺都在这里了
CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...
- HTML和CSS前端教程05-CSS盒模型
目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...
- HTML和CSS前端教程03-CSS文本样式
目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...
- CSS学习笔记03 CSS层叠性、继承性、特殊性
层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...
- 前端03 /css简绍/css选择器
前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...
- H5教程（二），CSS入门（一）选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
- 前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- .net Core 2.0应用程序发布到IIS上注意事项
.net Core2.0应用程序发布window服务器报错容易错过的配置. 1.应用程序发布. 2.IIS上新建网站. 3.应用程序池选择无托管代码. 4.服务器上安装DotNetCore.1.0.1 ...
- Linux常用服务器搭建
1.Linux常用服务器构建-ftp服务器 ftp服务器 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”. 用于Internet上的控制文件 ...
- IOS菜鸟学习
1.NS是系统库.2.IOS类的声明:@interface MyObject : NSObject { int memberVar1; // 实体变量 id memberVar2;} + ...
- 深入理解JVM垃圾收集机制，下次面试你准备好了吗
程序计数器.虚拟机栈和本地方法栈这三个区域属于线程私有的,只存在于线程的生命周期内,线程结束之后也会消失,因此不需要对这三个区域进行垃圾回收.垃圾回收主要是针对 Java 堆和方法区进行. 判断一个对 ...
- [Swift]LeetCode700. 二叉搜索树中的搜索 | Search in a Binary Search Tree
Given the root node of a binary search tree (BST) and a value. You need to find the node in the BST ...
- idea设置代码颜色主题（同Sublime Text 3的代码颜色一样）
1.下载主题的网址:http://color-themes.com,主题种类多,总有适合你的主题.在这个网址下载的主题是jar文件,直接导入,如下图file->import Setting,找 ...
- Java 11新功能抢先了解
目前 Oracle 已经发布了 Java Development Kit 10,下个版本 JDK 11 也即将发布.本文介绍 Java 11 的新功能. 根据Oracle新出台的每6个月发布一次Jav ...
- .NET Core 使用 HttpClient SSL 请求出错的解决办法
问题 使用 HTTP Client 请求 HTTPS 的 API 时出现 The certificate cannot be verified up to a trusted certificatio ...
- visual studio git for coding
直接放图吧 双击存储库项目进入Git操作页面 点击之后输入你要发布的git地址 选择你的操作 如果你登录的密码错了 就需要去修改 否则永远都pull失败 打开控制面板 在这里修改
- redis 系列24 哨兵Sentinel (中)
四. 检测下线状态 对于Redis的Sentinel中关于下线有两个不同的概念:(1)主观下线(Subjectively Down, 简称 Sdown) 指的是单个 Sentinel 实例对服务器做出 ...