二：前端css，即选择器
2024-05-16 17:27:45
前端css： 1,css 的引入方式 2，css中选择器 1.基本选择器： /*标签选择器*/ /*类标签选择器，.类属性值 重点知识*/ /*id选择器，#+id值，#id的值，不是id，重点知识*/ /* * 通用选择器，了解即可*/
2，组合选择器： /* 后代选择器, 找所有的后代*/ /*儿子选择器*/ /*div>span 大于号就表示仅限找自己的儿子标签*/ /*毗邻选择器，+表示毗邻，只找紧跟着自己的，或者说找离自己最近的*/ /*弟弟选择器 ~ 找的是同级别的下面的所有标签*/
三 属性选择器： 1,具有某个属性名 [属性名] 案列：[hobby] {} 2，具有某个属性名及属性值 [属性名=属性值] 案例：[hobby="dbj"]{} 3，具有某个属性名及属性值得标签 标签名[属性名=属性值] 案例 input[hobby="dbj"]{}
四：组合与嵌套： 1，分组选择器 标签名1，标签名2，标签名3，{} 2， /*分组与嵌套*/ /*一个css样式里可以使用多个选择器，多个不同的选择器同时使用就叫嵌套*/ #d1,.c1,span{}
五：伪类选择器： a:link {} 未访问的链接 a:hover {color: #FF00F} 鼠标移动到链接上 a:active {} 选定的链接 a:visited {} 已访问的链接 input:focus {} input输入框获取焦点时样式 六：伪元素选择器： before /*在每个<p>元素之前插入内容*/ p:before {} 七：选择器优先级： 内联式>id选择器>类选择器>元素选择器 一基础： 1，什么是css， CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染） 2，css语法 1，每个css有两个组成部分：选择和声明（选择器和属性名和属性值） 2，注释 /*单行注释*/ /* 多行注释 多行注释 */ 二：css的引入： 1，通过写在一个单独css文件引入（标准写法，推荐使用） <link href="mystyle.css" rel="stylesheet" type="text/css"/> 2，写在当前网页的<head></head>标签对的<style></style>标签对中 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{
} </style> </head> 3，写在标签内部（不推荐） 三 选择器： 1.基本选择器： <head> <meta charset="UTF-8"> <title>css样式层叠表</title> <style> /*标签选择器*/ /*此时所有的p标签里的内容都会变成橘黄色，即所有p标签都会变*/ p { color: orange; } /*类标签选择器，.类属性值 重点知识*/ /*所有的只要有c1 这个类属性的都会被渲染，即class=c1的里面的文本内容都会被渲染*/ .c2 { color: green; } /*id选择器，#+id值，#id的值，不是id，重点知识*/ #d1 { color: red; } /*这个id=d3 如果在div中，你在div中嵌套的标签中，标签中没有添加选择器， 那么此div中的所有标签内容都会被渲染成与div一样的颜色*/ #d3 { color: magenta; } /* * 通用选择器，了解即可*/ * { color: blue; } </style> </head> <body> <div id="d3">今夜来嗨呀: <p>嗨个鬼也</p> <p id="d1" class="c1 c2">狂风呀，下雨呀，</p> <!--<link rel="stylesheet" href="css样式层叠表.html">--> <p id="d2" class="c1">哎呀呀，子牙呀，</p> <span>你妹呀</span> </div> </body> </html> 2，组合选择器： <head> <meta charset="UTF-8"> <title>组合选择器</title> <!--需求：div里面所有的span都变成红色--> <style> /* 后代选择器, 找所有的后代*/ /* 就是把div里面所有的后代都选择出来，后代就是儿子，孙子..*/ /*div span {*/ /*color: blue;*/ /*}*/
/* 需求二：只想让div的儿子标签变色*/ /*儿子选择器*/ /*div里面上面span或下面span都会变色*/ /*div>span 大于号就表示仅限找自己的儿子标签*/ /*div>span {*/ /*color: brown;*/ /*}*/
/*毗邻选择器，+表示毗邻，只找紧跟着自己的，或者说找离自己最近的*/ /*此选择器只能往下找，往下找最近的一个渲染*/ /*div+span {*/ /*color: chartreuse;*/ /*}*/
/*弟弟选择器 ~ 找的是同级别的下面的所有标签*/ div~span { color: red; } div~p { color: blue; } </style> </head> <body> <p>div外面上面的p</p> <span>div；外面上面第一个span</span> <span>div；外面上面第二个span</span> <div> <span>div里面上面的span</span> <p> <span>p里面的span</span> </p> <span>div里面下面的span</span> </div> <span>div外面下面的span</span> <span>div外面的第二个span</span> <p>div外面下面的p</p> </body> </html> 三 属性选择器： <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* 1,具有某个属性名 2，具有某个属性名及属性值 3，具有某个属性名及属性值得标签 */
/*第一种精度最低，[]里面找的是所有的hobby内容进行渲染*/ /*[hobby] {*/ /**/ /*color: red;*/ /*}*/
/*第二种精度次之*/ /*[hobby="dbj"] {*/ /**/ /*color: red;*/ /*}*/
/*第三种精度最高, 有点指名道姓的意思*/ input[hobby="dbj"]{
color: green; } </style> </head> <body> <label for=""> username：<input type="text" name="username" hobby="dbj"> password：<input type="text"> </label> <span hobby="dbj" >注册</span> </body> </html> 四：组合与嵌套： <head> <meta charset="UTF-8"> <title>分组与嵌套</title> <style> /*!*分组选择器*!*/ /*div，span，p{*/ /*color: green;*/ /*}*/
/*分组与嵌套*/ /*一个css样式里可以使用多个选择器，多个不同的选择器同时使用就叫嵌套*/ #d1,.c1,span{ color: fuchsia; } </style> </head> <body> <p id="d1">屁</p> <div class="c1">div</div> <span>span</span> </body> </html> 五：伪类选择器：
/* 未访问的链接 */ a:link { color: #FF0000 }
/* 鼠标移动到链接上 */ a:hover { color: #FF00FF }
/* 选定的链接 */ a:active { color: #0000FF }
/* 已访问的链接 */ a:visited { color: #00FF00 }
/*input输入框获取焦点时样式*/ input:focus { outline: none;
} 六 伪元素选择器： first-letter 常用的给首字母设置特殊样式： p:first-letter { font-size: 48px; color: red; } before /*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; } after /*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; } 七：选择器优先级： 内联式>id选择器>类选择器>元素选择器
转载于:https://www.cnblogs.com/Fzhiyuan/p/11461225.html
二：前端css，即选择器相关推荐
- 前端 CSS的选择器 伪类选择器
伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link {color: blue; } <!DOCTYPE html> < ...
- html5复合选择器,传智播客解读Css基本选择器与复合选择器
当使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制时,我们经常会用到CSS选择器.为了方便初学者对选择器有所了解,传智播客将对选择器的几种类别进行详细介绍和说明. 一. Css基本选 ...
- CSS基础选择器、字体和文本样式
一.CSS简介 美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
- 从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- web前端知识总结二（css（其他）+移动web网页开发）
web前端知识总结二(css(其他)+移动web网页开发) 文章目录 web前端知识总结二(css(其他)+移动web网页开发) 字体图标 平面转换-位移 位移:绝对定位居中 开门效果 旋转 转换原点 ...
- 前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天 今天我们围绕一个 导航栏案例进行 ...
- 前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结 锚伪类选择器:hover,:active,:visited;等用法总结 一.什么是锚伪类 在支持 CSS 的浏览器 ...
- 好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
- 咸鱼前端—CSS选择器
咸鱼前端-CSS选择器 选择器 标签选择器(元素选择器) 类选择器 多类名选择器 id选择器 通配符选择器 选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素.在CSS中,执行这 ...
最新文章
- 不懂装饰器，就不是真正会 Python
- 为什么乱码：meta http-equiv=content-type前的非ANSI字符
- mysql分区唯一索引_[项目踩坑] MySQL 分区:分区键和唯一索引主键的关系，解决报错 A PRIMARY KEY...
- sqlserver高可用方案_PowerJob 的自实现高可用方案，妙妙妙
- VISIO——word中插入visio图片 图片边缘空白裁剪
- QImage使用说明
- RocketMQ 内存优化
- eeepc linux 窗口管理器,EeePC安装Windows 7全教程 全机型适用
- 数据结构C语言之停车场管理
- 字节跳动工程师收入世界第五，2021年全球程序员收入报告出炉
- 怎样给pdf添加水印，给pdf添加水印的两个方法
- ffmpeg开源工具的使用_使用开源工具玩龙与地下城
- opencv-python 绘制图像直方图及直方图均衡化
- 概要设计说明书（实例）
- centos7.6 修改ssh登陆端口和密码
- NOR FLASH (mx25u12835f) lock/unlock功能及linux对其支持
- RabbitMQ(Java操作工作队列-按劳分配方式)
- 我们平时常见的SEO百度关键词排名方法
- python shuffle 文本行/Python 打乱txt文本顺序
- 三维建筑形式的生成 Graph Convolutional Network