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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- 关于分布式环境下的id生成
public class IdWorker { //基准时间 public const long Twepoch = 1288834974657L; //机器标识位数 ; //数据标志位数 ; //序 ...
- 安卓开发笔记（十六）：'Request(okhttp3.Request.Builder)' has private access in 'okhttp3.Request
当出现了'Request(okhttp3.Request.Builder)' has private access in 'okhttp3.Request的错误的时候,实际上是我们在写代码的时候少打了 ...
- Dubbo架构设计及原理详解
Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常简单的模 ...
- BIO,NIO与AIO的区别
Java NIO : 同步非阻塞,服务器实现模式为一个请求一个线程,即客户端发送的连接请求都会注册到多路复用器上,多路复用器轮询到连接有I/O请求时才启动一个线程进行处理.Java AIO(NIO.2 ...
- 深入理解JVM垃圾收集机制，下次面试你准备好了吗
程序计数器.虚拟机栈和本地方法栈这三个区域属于线程私有的,只存在于线程的生命周期内,线程结束之后也会消失,因此不需要对这三个区域进行垃圾回收.垃圾回收主要是针对 Java 堆和方法区进行. 判断一个对 ...
- JAVA基础—适配器设计模式
适配器概念 在计算机编程中,适配器模式将一个类的接口适配成用户所期待的.使用适配器,可以使接口不兼容而无法在一起工作的类协调工作,做法是将类自己包裹在一个已经存在的类中. JDK对适配器设计模式的应用 ...
- [Swift]LeetCode344. 反转字符串 | Reverse String
Write a function that takes a string as input and returns the string reversed. Example 1: Input: &qu ...
- [Swift]LeetCode633. 平方数之和 | Sum of Square Numbers
Given a non-negative integer c, your task is to decide whether there're two integers a and b such th ...
- [Swift]LeetCode785. 判断二分图 | Is Graph Bipartite?
Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is bipart ...
- [Swift]LeetCode952. 按公因数计算最大组件大小 | Largest Component Size by Common Factor
Given a non-empty array of unique positive integers A, consider the following graph: There are A.len ...