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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- C语言面试题分类->字符串处理
1.strlen:计算字符串长度(不包含'\0') 实现想法:遍历字符串,直到'\0'结束 #include<stdio.h> #include<stdlib.h> #incl ...
- [Swift]LeetCode52. N皇后 II | N-Queens II
The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...
- [Swift]LeetCode118. 杨辉三角 | Pascal's Triangle
Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. In Pascal's t ...
- [Swift]LeetCode693. 交替位二进制数 | Binary Number with Alternating Bits
Given a positive integer, check whether it has alternating bits: namely, if two adjacent bits will a ...
- [Swift]LeetCode840. 矩阵中的幻方 | Magic Squares In Grid
A 3 x 3 magic square is a 3 x 3 grid filled with distinct numbers from 1 to 9 such that each row, co ...
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- Linux(Ubuntu) OpenGL 开发环境
Linux(Ubuntu) OpenGL 开发环境 在 PC 平台上开发 OpenGL 可以使用的辅助工具有很多选择,这里我主要参考了 learnopengl 的配置,使用 GLFW 和 GLAD. ...
- 工作5年的Java程序员，才学会阅读源码，可悲吗？
最近一位5年开发经验的群友与我聊天 他说:最近慢慢的尝试去看spring的源码,学习spring,以前都只是会用就行了,但是越是到后面,发现只懂怎么用还不够,在面试的时候经常被问到一些开源框架的源码问 ...
- SpringCloud(9)---mysql实现配置中心
mysql实现配置中心 本公司配置数据的管理是通过mysql进行配置管理,因为已经搭建好了,所以自己动手重新搭建一遍,熟悉整个流程.有关项目源码后期会补上github地址 微服务要实现集中管理微服务配 ...
- Kibana安全特性之权限控制
1. 前言 在之前的例子中,我们都是直接输入地址访问的,系统也没有提示我们要输入用户名密码.但是,在实际使用过程中不大可能所有人都是超级管理员可以做任何操作,一定是有权限控制的,这里我们借助X-Pa ...