层叠样式表(CSS)2(环境:MyEclipse 10)
二、选择器
注:在head里面写选择器的内容。环境一直不变,所有HTML和css都是这个MyEclipse 10
1.基本选择器(每个选择器新建一个HTML网页测试学习)
元素选择器:按节点名称匹配元素(例子里面的节点名:span)
语法:html的标签名{css的属性;}
选择器:
<style type="text/css">
span{color:yellow;font-size:70px; }
</style>
body页面内容:
<span>元素选择器</span>
效果:元素选择器:黄色+70像素大小
id选择器:利用id的唯一性匹配所有元素(id:d1/d2)
语法:#id值{css的属性;}
选择器:
<style type="text/css">
#d1{background-color: yellow;}
#d2{background-color: green;}
</style>
body:
<div id="d1">id1</div>
<div id="d2">id2</div>
效果:id1:黄色 id2:绿色
class选择器:类选择器,按class属性的值,匹配所有元素
语法:.class值{css的属性;}
选择器:
<style type="text/css">
.s1{background-color: black}
.s2{background-color: yellow}
</style>
body:
<div class="s1">d111</div>
<div class="s2">d222</div>
<div class="s2">d333</div>
效果:d111:黑色 d222和d333:黄色
选择器优先级:
id选择器>类选择器>元素选择器
2.属性选择器
语法:基本选择器[属性=“属性值”]{css的属性;}
例如 input[type="text"]{background-color: yellow;}
选择器:
<style type="text/css">
input[type="text"]{background-color: yellow}
input[type="password"]{background-color: blue}
</style>
body:
<form action="">
Username:<input type="text" /><br/>
Password:<input type="password" /><br/>
</form>
效果:用户输入框:黄色 密码输入框:蓝色
3、伪元素选择器
选择器 | 例子 | 例子 |
---|---|---|
:active | a:active | 匹配被点击的链接 |
:checked | input:checked | 匹配处于选中状态的 < input > 元素 |
:disabled | input:disabled | 匹配每个被禁用的 < input > 元素 |
:empty | p:empty | 匹配任何没有子元素的
元素 |
:enabled | input:enabled | 匹配每个已启用的 < input > 元素 |
:first-child | p:first-child | 匹配父元素中的第一个子元素 < p >,< p > 必须是父元素中的第一个子元素 |
:first-of-type | p:first-of-type | 匹配父元素中的第一个 < p > 元素 |
:focus | input:focus | 匹配获得焦点的 < input> 元素 |
:hover | a:hover | 匹配鼠标悬停其上的元素 |
:in-range | input:in-range | 匹配具有指定取值范围的 < input> 元素 |
:invalid | input:invalid | 匹配所有具有无效值的 < input> 元素 |
:lang(language) | p:lang(it) | 匹配每个 lang 属性值以 "it" 开头的 < p> 元素 |
:last-child | p:last-child | 匹配父元素中的最后一个子元素 < p>, < p> 必须是父元素中的最后一个子元素 |
:last-of-type | p:last-of-type | 匹配父元素中的最后一个 < p> 元素 |
:link | a:link | 匹配所有未被访问的链接 |
:not(selector) | :not(p) | 匹配每个非 < p> 元素的元素 |
:nth-child(n) | p:nth-child(2) | 匹配父元素中的第二个子元素 < p> |
:nth-last-child(n) | p:nth-last-child(2) | 匹配父元素的倒数第二个子元素 < p> |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 匹配父元素的倒数第二个子元素 < p> |
:nth-of-type(n) | p:nth-of-type(2) | 匹配父元素的第二个子元素 < p> |
:only-of-type | p:only-of-type | 匹配父元素中唯一的 < p> 元素 |
:only-child | p:only-child | 匹配父元素中唯一的子元素 < p> |
:optional | input:optional | 匹配不带 "required" 属性的 < input> 元素 |
:out-of-range | input:out-of-range | 匹配值在指定范围之外的 < input> 元素 |
:read-only | input:read-only | 匹配指定了 "readonly" 属性的 < input> 元素 |
:read-write | input:read-write | 匹配不带 "readonly" 属性的 < input> 元素 |
:required | input:required | 匹配指定了 "required" 属性的 < input> 元素 |
:root | root | 匹配元素的根元素,在 HTML 中,根元素永远是 HTML |
:target | #news:target | 匹配当前活动的 #news 元素(单击包含该锚名称的 URL) |
:valid | input:valid | 匹配所有具有有效值的 < input> 元素 |
:visited | a:visited | 匹配所有已经访问过的链接 |
上表源于网络,出处忘了,若侵权联系我删,谢谢!
举个栗子:
a标签的伪元素选择器
语法:
状态:静止 悬浮 触发 完成
link hover active visited
例:a:状态{css的属性}
选择器:
<style type="text/css">
a:link{color:red }
a:hover{color:blue}
a:active{color:black}
a:visited{color:yellow}
</style>
body:
<a href="#">just dance!!!</a>
效果: just dance!!! :
鼠标不放上面不点击:红 鼠标放上面:蓝 点击时:黑 松开:黄
4、层级选择器
语法:以下称呼皆为了理解(正常:父级,子级......)
#第一级 .第二级 (第三级)选择器{css的属性;}
#fruit1 .banana1 span{color:red}
选择器:
<style type="text/css">
#fruit1 .banana1 span{color:red}
</style>
body:
<div id="fruit1">
<div class="banana1">
<span>span1</span>
</div>
<div class="apple1">
<span>span2</span>
</div>
</div>
<div id="fruit2">
<div class="banana1">
<span>span3</span>
</div>
<div class="apple1">
<span>span4</span>
</div>
</div>
效果:span1:红色
注:未经同意请勿转载,仅作学习使用。以上有描述不正确之处,望大家能不吝指出,共同学习共同进步。谢谢
层叠样式表(CSS)2(环境:MyEclipse 10)的更多相关文章
- Myeclipse 10.7 android(安卓) 开发环境搭建
1 下载并安装JDK,并且设置环境变量 2 下载安装 installer_r24.3.4-windows.exe (Android SDK Manager) 3 使用 Android SDK Mana ...
- myeclipse 10的破解以及运行run.bat错误或者双击立即消失的问题
安装包下载: ed2k://|file|[myeclipse.10.0.更新发布].myeclipse-10.0-offline-installer-windows.exe|947752488|73b ...
- Myeclipse 10.x 安装Aptana3.2 插件
安装步骤: 1.下载aptana3.2 Eclipse Plugin插件. 下载地址:http://update1.aptana.org/studio/3.2/024747/index.html 2. ...
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...
- 1.免费安装myeclipse 10以及破解
1.材料准备 jdk1.8.0_101 网盘地址链接: http://pan.baidu.com/s/1ge8Jaz5 密码: qb6v myeclipse-10.6-offline-installe ...
- 如何破解MyEclipse 10.x
本文以MyEclipse Professional 10.6 为例来介绍如何破解MyEclipse 10.x. 本文使用的破解补丁对MyEclipse Standard/ Professional/ ...
- MyEclipse 10 + OsChina GIt项目托管
环境:Egit+MyEclipse 10,此教程默认MyEclipse 10和Egit都已经配置好. 1.注册OsChina Git账号,网址:http://git.oschina.net/,具体注册 ...
- 64位JDK+tomcat6+myeclipse 10安装与配置
一.安装JDK与配置环境与检验配置成功: 1.进入java.com网站,然后按照以下步骤进行 =>=>=>=>=> =>=>等会出现java茶杯双击,一次一 ...
- 构建工具-----Gradle(二)-----myeclipse 10和myeclipse2015安装gradle插件----其他版本的myeclipse类似
我们需要给myeclipse安装gradle的插件.这样myeclipse就能识别到gradle项目了,直接加载进去即可. 我们先安装配置系统命令行的gradle,挺简单的,下载后配置环境变量即可,详 ...
- MyEclipse 10、9、8 添加jadClipse反编译插件
jad是一个使用比较广泛的Java反编译软件,jadClipse是jad在eclipse下的插件,如何将jadclipse加入到MyEclipse10.X,9.X,8.X当中: http://nchc ...
随机推荐
- 从原理聊JVM(三):详解现代垃圾回收器Shenandoah和ZGC
作者:京东科技 康志兴 Shenandoah Shenandoah一词来自于印第安语,十九世纪四十年代有一首著名的航海歌曲在水手中广为流传,讲述一位年轻富商爱上印第安酋长Shenandoah的女儿的故 ...
- Nginx部署多个vue前端项目
前言:在前端项目的部署上需要让2个前端项目都部署到一个IP地址和端口下,那么我们这里就要用到Nginx了,接下来我们看看如何在一个Nginx下部署2个前端项目. 例如我的服务器地址是 http://1 ...
- KMP字符串匹配问题
KMP算法 本文参考资料:https://www.zhihu.com/question/21923021 KMP算法是一种字符串匹配算法,可以在 \(O(n+m)\) 的时间复杂度内实现两个字符串的匹 ...
- Prism Sample 9 ChangeConvention
上个例子跳过了ViewModelLocator,因是采用约定的方式最为方便. 如果有人要修改约定,自定义view和viewModel的默认自动定位方式,怎么办呢? 在app.xaml.cs重写以下方法 ...
- 2022-01-02:给定两个数组A和B,长度都是N, A[i]不可以在A中和其他数交换,只可以选择和B[i]交换(0<=i<n), 你的目的是让A有序,返回你能不能做到。
2022-01-02:给定两个数组A和B,长度都是N, A[i]不可以在A中和其他数交换,只可以选择和B[i]交换(0<=i<n), 你的目的是让A有序,返回你能不能做到. 答案2022- ...
- 2021-07-18:最高的广告牌。你正在安装一个广告牌,并希望它高度最大。这块广告牌将有两个钢制支架,两边各一个。每个钢支架的高度必须相等。你有一堆可以焊接在一起的钢筋 rods。举个例子,如果钢筋
2021-07-18:最高的广告牌.你正在安装一个广告牌,并希望它高度最大.这块广告牌将有两个钢制支架,两边各一个.每个钢支架的高度必须相等.你有一堆可以焊接在一起的钢筋 rods.举个例子,如果钢筋 ...
- 【GiraKoo】Android监听屏幕尺寸变化通知
[GiraKoo]Android监听屏幕尺寸变化通知 Android系统中存在多种情况可能导致屏幕尺寸发生变化.例如:横竖屏切换,虚拟按键,分屏,键盘弹出等. App有的时候需要了解屏幕的真实尺寸,D ...
- 让ChatGPT帮我写SQL
推荐一个Github上Start超过3.4K,可将自然语言转化为SQL语句的开源项目. 项目简介 这是一个利用ChatGPT,SQL与自然语言的翻译器.可以将自然语言转换为SQL语句,同样也可以把SQ ...
- 代码随想录算法训练营Day7哈希表| 454.四数相加II383. 赎金信15. 三数之和18. 四数之和 |总结
454.四数相加Ⅱ 题目链接:454.四数相加 给你四个整数数组 nums1.nums2.nums3 和 nums4 ,数组长度都是 n ,请你计算有多少个元组 (i, j, k, l) 能满足:. ...
- python---序列化小结
python 序列化 1 什么叫序列化 在我们存储数据或网络传输数据时候,需要多我们对象进行处理,把对象处理成方便储存和网络传输的数据格式,这个过程叫做序列化 2 对象序列化有三种方式; 2.1 pi ...