学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式;2.类选择符.hcls{}//给class是hcls的一类标签设置模式;3.id选择符#h3{}//给id是h3的标签设置样式;4.关联选择符#div h1、#div h1.ljhcls;5.div,h1,pmspan,button{}基本选择器分为:first-child第一个、::first-letter第一个字母、::fist-line第一行、:last-child最后一个元素、:nth-child(n)第几个元素,层级选择器分为a,b组合、a b后代、a>b子代、a+b a的一个是b,伪类选择器:hover鼠标经过、:focus焦点、::selection文字选中背景色,属性选择器[属性]、[属性=值]、[属性~=值]//包含任意一个值、[属性^=值]以什么开始、[属性$=值]以什么结束。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习css常用基本层级伪类属性选择器</title>
<style type="text/css">
/*常用选择器*/
/*html选择符*//* *{}给页面上所有的标签设置模式*/
*{
color: royalblue;
}
/*类选择符*//*.hcls{}给class是hcls的一类标签设置模式;*/
.hcls{
font-weight: bold;
}
/*id选择符*//*#h3{}给id是h3的标签设置样式 */
#h3{
font-style: italic;
}
/*关联选择符 */
div h1{
font-size: 18px;
}
/*组合选择符*/
div,button{
background-color: #ccc;
margin: 5px;
}
/*基本选择器*/
/*::first-letter */
#h3::first-letter{
font-size: 30px;
}
/*::first-line */
.h4::first-line{
color: red;
}
/*:first-child */
.shuiguo li:first-child{
color:#f90;
}
/*:last-child */
.shuiguo li:last-child{
text-decoration: line-through;
}
/*:nth-child(n) */
.shuiguo li:nth-child(2){
text-decoration: overline;
background-color: sienna;
}
/*层级选择器*/
/*a,b组合 */
#h3,.box{
background-color: #ccc;
margin: 5px;
}
/*a b a后代中的b */
.h4 p{
text-decoration: overline;
font-size: 30px;
}
/*a>b a的子元素b */
div>p{
font-style: italic;
}
/*a+b a后面的第一个元素b */
div+span{
height: 40px;
background-color: teal;
color: #fff;
}
/*伪类选择器*/
/*:hover*/
input:hover{
border-radius: 5px;
}
/*:focus焦点*/
input:focus{
outline-color: teal;
}
/*::selection文字选中背景色*/
p::selection{
color: #fff;
}
/* 属性选择器 */
.shuiguo li[title]{
font-size: 100px;
background-color: aqua;
}
/* 选择器[属性=值] 值唯一才可以用,包含多个值的测试不行*/
.shuiguo li[title=pg]{
color: red;
list-style: square;
background-color: #fff;
font-size: 60px!important;
}
/* 选择器[属性^=值]以什么开始 */
.shuiguo li[title^=pg]{
font-size: 20px;
margin: 20px;
}
/* 选择器[属性$=值]以什么结束 */
.shuiguo li[title$=xj]{
background-color: #ccc;
}
</style>
</head>
<body>
<div class="hcls" id="h3">
<h1>html+css+javascript is very much!</h1>
</div>
<div class="hcls h4"><!--多个class用空格分开,id是唯一的-->
<p>If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;
If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;
If not for life, I can go to bed early and get up early</p><p>多个class用空格分开,id是唯一的</p>
<p>多个class用空格分开,id是唯一的</p>
</div>
<span>div后面的第一个元素</span>
<ul class="shuiguo">
<li title="pg">苹果</li>
<li title="xg pg">西瓜</li>
<li title="pg xj">香蕉</li>
</ul>
<button class="box">按钮</button>
<form action="">
<p>用户名</p><input type="text" name="" id="">
</form>
</body>
</html>
学习css常用基本层级伪类属性选择器的更多相关文章
- 前端学习 --Css -- 子元素的伪类
:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...
- JavaScript 修改 CSS 伪类属性
背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s ...
- CSS样式学习-3、轮廓、伪类/元素、display-flex布局
一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...
- css样式表中四种属性选择器
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...
- CSS选择符、伪类、层叠
主题,架子(时间架子,空间架子,三角架),素材. CSS 三种方式 行内样式 嵌入样式 链接样式 上下文选择符 祖父 孙 p em {color:red;} 父 子 p > em {color: ...
- CSS设计指南之伪类
伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在 ...
- CSS 中功能相似伪类间的区别
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
- 重新学习CSS,认识CSS3中的属性
之前学css,觉得会改个样式就不错了,直到现在,在做前端开发的时候,才发现自己的前端页面是有多垃圾,而且还不知道该怎么适应各个浏览器,总是很“词穷”,最近是想着好久没去慕课上面了,于是就报着逛一逛的心 ...
随机推荐
- sas9.2 windows7系统 10年11月后 建立永久数据集时,提示:“用户没有与逻辑库相应的授权级别
先把你这个逻辑库删掉,在桌面创立空的新文件夹,然后用这个新文件夹在sas里新建逻辑库,名字照旧,再把你要的数据放进空文件夹就好了
- 前端 network
控制台 :https://blog.csdn.net/m0_37724356/article/details/79884006 原文链接:https://segmentfault.com/a/1190 ...
- DNS隧道工具:iodine使用
iodine可以通过一台dns服务器制造一个IPv4数据通道,特别适合在目标主机只能发送dns请求的网络中环境中使用.iodine是基于C语言开发的,分为服务端程序iodined和客户端程序iod ...
- JDK源码之AbstractStringBuilder类分析
一 概述 二 实现接口 AbstractStringBuilder实现了两个接口: Appendable 概述: Appendable的实现类的对象可以附加字符序列和值. 要追加的字符应该是Unico ...
- SSH(三)
在Spring中引用属性文件: 优点: 1.防止随意更改jdbc的连接 2.给不懂代码的人使用 步骤: 1.数据库连接信息写在属性文件中 ...
- 计算机原理基础:DNS
DNS服务的作用 将域名解析成IP地址 端口号:53 域名服务器 根域名服务器 所有的根域名服务器都知道所有的顶级域名服务器的域名和IP地址. 不管是哪一个本地域名服务器,若要对因特网上任何一个域名进 ...
- 《 Java 编程思想》CH03 操作符
< Java 编程思想>CH03 操作符 在最底层,Java中的数据是通过操作符来操作的. 操作符 +,-,*,*,=与其他语言类似 几乎所有的操作符只能操作"基本类似" ...
- C指针右左法则
摘录的别人的: C语言所有复杂的指针声明,都是由各种声明嵌套构成的.如何解读复杂指针声明呢?右左法则是一个既著名又常用的方法.不过,右左法则其实并不是C标准里面的内容,它是从C标准的声明规定中归纳出 ...
- linux入门系列9--用户管理及文件权限控制
前面文章分享了Linux下常用命令以及Shell编程相关知识,本节继续学习Linux用户管理及文件权限控制. Linux是多用户多任务操作系统,具有很好的稳定性和安全性.既然是多用户,那就意味 ...
- 三、 TCP(传输控制协议)
它建立在网际层协议(IP)提供的数据包传输技术之上,.TCP使应用程序可使用连续的数据进行通信.除非由于网络故障导致连接中断或冻结,TCP都能保证数据流完好地传输.而不会发生丢包 ,重包或是乱序的问题 ...