Css选择器(上) 让样式无孔不入
css选择器 一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件.
- 基本选择器
*{ } 就是一个简单的*, 代表应用于全部. 不适合于个性化细致化处理的页面, 副作用是它会覆盖原有的style, 不管好坏
*和继承无关, 无论是否一级标签,是否子标签, 一律收到*的影响.(神一般)
p{ } 元素选择器, 或者说是标签选择器. p可以是任何其他标签#123{ } id选择器, 如<a id ="123" href=http://">和123css文件制定的样式一样</a> id可以是任何字母或者数字. 具有唯一性,这是规范.
.abc{ } 凡是标签里面有class=abc这个属性, 这些标签就称为同一个类. 类CSS是一个方便作用多个标签的样式.p.abc{ } 限定abc类里面的p标签生效
例子:
html文件
css文件
效果
class=abc中的所有b标签生效
一个标签引用多个类样式, 用空格隔开两个类样式
[href]{ } 这是属性选择器, 花括号里面的属性作用域全部的超链接[type=password] { } 这是更进一步的规定, 只能是type属性, 而且属于密码type类型才应用css, 其他type无效
[href^=http] 属性是href且 值以http开头的, 应用css.
[href$=.cn] 属性是href且 值以.cn结尾的, 应用css[href*=baidu] 属性值包含有baidu 的字符片段, 应用css 用于模糊搜索'
html文件
css文件
效果
其他选择器:
[class ~=def] 某个属性的值含有复杂或者多个字符, 匹配到指定字符的应用css
[lang|="en"] 某个属性的值, 含有分隔符号- , 此方法查找比较省性能.机器容易找到.
- 复合选择器
p,b,span{ } 多元素选择器. 而且可以混合搭配, 普通标签, id ,以及class….p b{ } 模糊 指定某个标签的子标签作为css应用对象, 除了指定的子标签,其他父标签等不受影响
p >b { } 精确 和上面一个不同的是, 指定作用于p下面的b子标签. 如果p下面有一层span, span下面才有b, 那么p>b要改成p>span>b
p+b{ } 匹配p元素和旁边的b元素
p~b{ } 匹配p 到b (包括p和b)的所有元素, 两点间所有元素.
- 伪元素选择器
::first-line{ } 块级首行应用. 窗口拉伸导致第一行的字数会变化, 但是已经规定了first-line要应用css, 所以无论窗口怎么拉动,
红色的字会随着窗口大小的变化而换行填红. first-line 对于html第一行, 或者<div>的第一行有效果, 但是对于span这种内联是没有效果的.p::first-line{ } 在p的首行才有效果.
上图的下半段是<span>括起的内容.
::first-letter 块级首字符应用css
\
a::before 插入指定字符串到标签前
a::afoter 插入指定字符串到标签后
html文件
css文件
点击前
点击后
转载于:https://www.cnblogs.com/billvvv/p/7046486.html
Css选择器(上) 让样式无孔不入相关推荐
- 前端学习(486):css选择器上
- Web全栈~06.CSS选择器
Web基本笔记~06.CSS选择器 上一期 关系选择器 后代选择器 定义 选择所有被 E 元素包含的 F 元素,中间用空格隔开 语法 E F{ } 例子 <html><head> ...
- css a标签去掉下划线_这30个CSS选择器,你必须熟记(上)
CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色.布局.制作出漂亮的阴影效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举的实现,感觉就像魔法师一般, ...
- java样式是什么_java css样式 css样式的种类 选择器 文本相关样式 背景相关样式 边框 盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签 下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
- Web前端开发——CSS样式之CSS选择器
1. CSS选择器类型 css选择器可分为标签选择器.类别选择器.ID选择器,这里的三种类型主要针对内嵌样式和单独文件样式而言 1.1 标签选择器 1.1.1 测试代码 <!DOCTYPE ht ...
- 这30个CSS选择器,你必须熟记(上)
关注前端达人,与你共同进步 CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色.布局.制作出漂亮的影音效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举 ...
- CSS的选择器和常用样式(id,class,组合,字体,背景,宽度,高度,颜色等CSS样式)
<html><head><title>CSS的选择器和常用样式</title><meta charset="UTF-8"/&g ...
- (19)C#传智:CSS,选择器,样式(第19天)
vs2022保存html项目时,偶尔会有死机,只得强行关闭重新打开. 一.CSS简介 CSS(Cascading Style Sheet)层叠样式表.能让网页制作者有效的定制,改善网页的效果. ...
- 2021-04-03 Web前端之CSS——选择器、字体属性、文本属性、样式表
视频课程:黑马程序员Pink老师 笔记: 选择器以及一条或多条声明 写在<head><style>之间</style></head> font-size ...
最新文章
- 2.13生成可控的随机数据集合 模拟色子
- scp 安全复制(远程文件复制工具)
- kafka集群编程指南
- windows环境下 安装gcc
- 中国产业数字化发展报告:数智创新,智驱未来
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
- USACO翻译:USACO 2013 DEC Silver三题
- 二分图最大匹配(最大流)
- 3Dmax如何展UV
- 微信公众号 开发详解05【二维码制作、调查表单、短网址、微小宝、引流】
- lol一直显示服务器异常怎么办,lol服务器连接异常即将退出怎么解决
- 文献盘点|回眸2021,理一理科研圈探索的那些大发现
- 我爬取了淘宝零食库,画了一个全国零食地图
- 前端js计算抽奖概率
- VR产品为什么没有火起来
- 《众妙之门——自由网站设计师成功之道》一1.5 客户服务的重要性
- [POI2008]枪战Maf
- No mapping found for HTTP request with URI问题解决
- HtmlUnit入门教程
- 小米笔记本air13-3安装Deepin
热门文章
- 1139 - 【入门】孪生素数
- 根据字符的首字母进行分类
- 计算机类国家网络安全学院,武汉大学国家网络安全学院
- 校园网常见故障及解决方案
- 3分钟高效造型神器,戴森新一代Airwrap多功能造型器助力轻松开启日抛造型
- JVM平台上的响应式流(Reactive Streams)规范
- STM32F103固件库源码解析——RCC_APB2PeriphClockCmd
- 【Hexo】如何才能在百度搜索到你的博客?SEO优化了解一下(上)
- 科技创新 赋能可循环发展
- U3D客户端框架之 拓展StringBuilder实现InsertNoGC、IndexOf、LastIndexOf、ReplaceNoGC、AppendNoGC API 减少GC