摘要：目录定义创建的三种方法元素内嵌权重最高文档内嵌外部引用层叠和继承浏览器样式样式表层叠样式继承选择器选择器的总汇基本选择器复合选择器伪元素选择器伪类选择器定义定义层叠样式表创建的三种方法创建的三种方法元素内嵌权重最高元素内嵌权重最高文档内
目录
::层叠样式表
通过选择器的方法调用指定的元素并设置相关的CSS
@charset "utf-8";
p{
color:red;
font-size: 30px;
}
大量HTML使用同一组CSS，就可以将这些样式保存到一个多带带的.CSS文件中，通过link引用就可以了
b元素有加粗元素
span元素没有加粗样式，但是可以设置
b元素手动取出加粗元素
我要叠加三个样式
优先级： 元素内嵌 <- 文档内嵌 <- 外部引用 <- 浏览器
可以在不同样式中添加!important关键字来强行设置优先级
color: green !important
这是HTML5
此时显示的是这是HTML5,我们只设置了p为红色，但是b也为红色了，因为b是在p内部
定位到你想要设计的样式元素来设计元素
使用频率最高的一些选择器
**表示通用选择器，匹配所有HTML元素包括可以为所有元素匹配并配置样式，但是无法筛选不必要元素
定义一个CSS
@charset "utf-8"
* {
border: 1px solid red;
}
/*通用选择器可以匹配到html和body元素*/
这是一个段落
这是一个加粗
这是一个什么都没有
p
@charset "utf-8"
p {
border: 1px solid red;
}
/*通用选择器可以匹配到html和body元素*/#adcID是唯一的，不可重复使用
@charset "utf-8"
#abc {
border: 1px solid red;
}
这是一个段落
这是一个加粗
这是一个什么都没有
.
@charset "utf-8"
.abc {
border: 1px solid red;
}
这是一个段落
这是一个加粗
这是一个什么都没有
也可以限定元素
@charset "utf-8"
p.abc {
border: 1px solid red;
}
/*只能适用于段落*/也可以使用多个class
@charset "utf-8"
.abc {
border: 1px solid red;
}
.def {
font-size: 30px;
}
这是一个加粗
[...]@charset "utf-8"
[href]{
color: red;
}这是一个百度也可以设置相关的属性值
@charset "utf-8"
[type="password"]{
border: 1px solid red;
}通过正则表达式来设置匹配
@charset "utf-8"
[href^="http"]{
color: orange;
}
/*只能开头是http才能匹配*/百度
好搜通过精确匹配
@charset "utf-8"
[href*="baidu"]{
color: orange;
}
/*只能包含baidu才能匹配*/将不同选择器进行组合形成的新的特定匹配
多个选择器逗号分隔，同时设置一组样式
@charset "utf-8"
p,b,i,span {
color: orange;
}
#abc,.abc,i,span {
color: orange;
}
选择元素内部所有的元素，不在乎的层次深度
@charset "utf-8"
p b {
color: orange;
}这是一个HTML5教程
效果为： 这是一个HTML5教程
与后代选择器类似，但是只能运用于儿子，孙子就不行了
```css
@charset "utf-8"
p>b {
color: orange;
}
```
匹配第一个元素相邻的第二个元素
@charset "utf-8"
p+b {
color: orange;
}类似，只是靠的不是特别近
@charset "utf-8"
p~b {
color: orange;
}::::first-line、
等的首行文本选定
:: 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元素*/
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;
}
百度
focus-文本框获取的
/*鼠标获取到文本框的颜色*/
input:focus {
border: 1px solid green;
}
其他伪类选择器
not否定选择器
/*选择百度除外的URL*/
a:not([href*="baidu"]) {
color: green;
}
empty
/*空元素隐藏*/
:empty {
display: none;
}
target-定位到锚点
/*空元素隐藏*/
b:target {
color: red;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1276.html
摘要：目录颜色建议就用十六进制长度的度量单位建议就用文本样式字体属性文本样式颜色建议就用十六进制颜色建议就用十六进制长度的度量单位建议就用长度的度量单位建议就用文本样式文本样式字体的大小，样式以及方位字体属性字体属性属性名说明例子目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本...
摘要：每条属性声明实现对网页元素进行某种特定格式的设置，由一个属性和一个值组成，属性和值之间使用冒号连接，不同声明之间用分号分隔，所有属性声明放到一对大括号中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...
摘要：但是感觉还是需要一篇的教程，不然没有一个总体的认识。修饰器，表示每天会执行一次，这样就能抓到最新的电影了。不过更推荐使用选择器。既然前端程序员都使用选择器为页面上的不同元素设置样式，我们也可以通过它定位需要的元素。 虽然以前写过 如何抓取WEB页面 和 如何从 WEB 页面中提取信息。但是感觉还是需要一篇 step by step 的教程，不然没有一个总体的认识。不过，没想到这个教程居...
摘要：变量作者简介是推出的一个天挑战。这是一个的新特性，和目前都还不支持。命名写法是变量名，在引用这个变量时写法是变量名。如何用改变属性值在中即代表文档根元素。 Day03 - CSS 变量 作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是...
摘要：第一部分介绍了如何使用和开发接口。由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。当您第一次得知有预处理器和后处理器时，你很有可能在任何地方已经使用它们。我之前建议的文章，，也涵盖了预处理器相关的知识。 我记得我刚开始学习前端开发的时候。我看到了很多文章及资料，被学习的资料压得喘不过气来，甚至不知道从哪里开始。 本指南列出前端学习路线，并提供了平时收藏的一些...
阅读 3707·2021-09-27 13:36
阅读 4029·2021-09-22 15:12
阅读 2918·2021-09-13 10:29
阅读 1639·2021-09-10 10:50
阅读 3670·2021-09-09 09:33
阅读 2190·2021-09-03 10:43
阅读 2356·2021-09-02 15:41
阅读 313·2019-08-29 17:10
