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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- 1.2 Why need pluggable?
When Android programmers write new features, bugs, or even crashes will exits in their App. Once a t ...
- 1.1 What is the plug-in？
A game center, such as Lianzhong in China, supports hundreds of games such as Chess, Bridges, ...
- PHP 点阵5*7字体
效果: 源码: <?php // standard ascii 5x7 font 纵向取模 // defines ascii characters 0x20-0x7f (32-127) $fon ...
- [Swift]LeetCode689. 三个无重叠子数组的最大和 | Maximum Sum of 3 Non-Overlapping Subarrays
In a given array nums of positive integers, find three non-overlapping subarrays with maximum sum. E ...
- shell脚本_查找无效网址
#!/bin/bashif [ $# -ne 1 ];then echo -e "$Usage: $0 URL\n" exit 1;fi echo Broken ...
- python之读取配置文件模块configparser（一）基本操作
configparser模块是读取类ini文件使用,其有固定的读取格式如下: [section1] option11 = value11 option12 = value12 .... [sectio ...
- Qt之自定义检索框
1.效果展示 今天这篇文章主要讲解的是自定义搜索框,不仅仅支持搜索,而且可以支持搜索预览,具体请看效果图1.网上也有一些比较简单明了的自定义搜索框,比如Qt之自定义搜索框,讲的也比较详细,不过本文的侧 ...
- 软件性能测试技术树（三）----数据库（MySQL）性能
全图: MySQL重点监控指标: MySQL主流分支: 数据库架构设计: MySQL慢查询: SQL语句分析与调优: MySQL索引: MySQL存储引擎: MySQL实时监控: MySQL集群监控工 ...
- C语言用regcomp、regexec、regfree和regerror函数实现正则表达式校验
前言 首先,祝大家国庆假期玩的嗨皮!可能有的人已经在回家的路上了,是不是都看不到我的真挚祝福了? C语言对于一些东西的封装比较少,比如正则表达式,但速度快一直使它立于不败之地,今天就要介绍如何用C封装 ...
- Python读写文件你真的了解吗？
内容概述 Python文件操作 针对大文件如何操作 为什么不能修改文件? 你需要知道的基本知识 1. Python文件操作 这一部分内容不是重点,因为很简单网上很多,主要看看文件操作的步骤就可以了. ...