[04] css 选择器
2024-09-28 02:07:18
1.元素选择器
常见的html标签元素
h1 {
color: red;
}
body {
background: red;
}
2.分组选择器
例如body和h2标签的字体颜色都是red,使用逗号将其隔开。
body, h1 {
color: red;
}
3.通配符选择器
* {
color: red;
}
4.类选择器
在html标签中使用class属性,然后使用样式属性。
<a class="customClassName1'>hello,world</a>
<a class="customClassName2'>hello,world</a>
<a class="nameOne nameTwo">hello,world</a>
样式表:
.customClassName1 {
color: red;
background: blue;
}
a.customClassName2 {
font-weight: bold;
}
.nameOne.nameTwo {
background: silver;
} //不能匹配到,没有nameThree
.nameOne.nameThree {
font-weight: bold;
}
5.Id 选择器
id选择器前面使用#。id是html元素唯一标识符
<a id="customId">hello, use id selector</a>
css文件
#customId {
font-size: 12px;
}
6.属性选择器
通过标签属性来设置样式。两种方式:
1.具体属性名称的值,属性值需要全值匹配:标签名[属性名=‘属性值’]
2.属性名称: 标签名[属性名]
<a name="attrName">hello, world</a>
<a name="attrName2">hello, world</a>
css样式:
a[name] {
background: red;
}
a[name="atriName2"] {
background: red;
}
7.文档结构方面选择器
7.1 后代选择器
html是文档结构模型的,都有父子节点。可以通过节点关系进行选择。
<div>
<h1>1</h1>
<span>
<b>2</b>
</span>
</div>
css编写:
div h1 {
color: red;
}
div span b {
color: blue;
}
7.2 选择子元素
<div>
<h1>this is first h1</h1>
<h2>this is second h2</h2>
</div>
子元素css
div > h1 {
font-weight: bold;
}
7.3 选择相邻兄弟元素
<div>
<h1 class="target">1</h1>
<h2 class="getTarget">2</h2>
<div>
css:
.target + .getTarget {
color: red;
}
8 伪类和伪元素
8.1 a链接伪类
a链接相关的伪类有5个:
a.静态伪类: :link , :visited
b.动态伪类 : :focus, :hover , :active
使用顺序一般为: link - visited - focus- hover - active
8.2 选择第一个子元素
<div>
<h1>first </h1>
<h2>second</h2>
<div>
css:
div:first-child {
color: red;
}
8.3 伪元素选择器
<p>first line</p>
<p>first letter</p>
css:
//a. 设置首字母样式
p:first-letter {
font-size: 20px;
}
//b.设置首行
p:first-line {
color: purple;
}
最新文章
- 如何提升我的HTML&;CSS技术,编写有结构的代码
- Oracle中的数据分页
- 第三天 moyax
- css读书笔记4:字体和文本
- 终端执行python shell的方法
- CloudStack采用spring加载bean(cloud-framework-spring-module模块)
- eclipse优化(部分)
- js【输入一个日期】返回【当前12个月每月最后一天】
- 利用MsChart控件绘制多曲线图表 z
- 算法起步之动态规划LCS
- 探索static——不需要能够使用该类实例?
- 51nod 2006 飞行员配对(二分图最大匹配) 裸匈牙利算法 求二分图最大匹配题
- Linux文件夹文件改英文
- Java多线程(八)——join()
- .net core使用ef core操作mysql数据库
- Linux服务器搭建Nexus-Maven私服(适合新手比较基础)
- jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第二话):安装插件,配置JDK、Git、Ant
- (四)Dubbo Admin管理控制台
- LD_PRELOAD &; LD_LIBRARY_PATH 动态库路径
- [JSBSim]基于winsocket2的TCP\UDP使用例子