css的9个常用选择器
1.类选择器（通过类名进行选择）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.p1{
color: #00ff00;
}
.p2{
color: #0000ff;
}
</style>
<body>
<p class="p1">这是类选择器</p>
<p class="p2">hello world</p>
</body>
</html>
效果图：
2.id选择器（通过id进行选择）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#text{
color: red;
}
</style>
<body>
<p id="text">这是id选择器</p>
</body>
</html>
效果图：
3.标签选择器（通过id进行选择）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p{
color: #f40;
font-size: 25px;
}
</style>
<body>
<div>
<p>这是标签选择器</p>
</div>
</body>
</html>
效果图：
4.分组选择器（可一次选择多个标签以设置相同样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p,a,li{
color: blue;
}
</style>
<body>
<p>这是分组选择器</p>
<p>hello</p>
<a href="#">world</a>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
效果图：
5.后代选择器（选择某个标签的所有后代以设置相同样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div ul li{
color: red;
list-style: none;
}
</style>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
效果图：
6.属性选择器（通过属性（如name属性）进行选择以设置相同的样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
[name="pra1"]{
color: blue;
}
[name="pra2"]{
color: red;
}
</style>
<body>
<p name="pra1">这是属性选择器</p>
<p name="pra2">hello world</p>
</body>
</html>
效果图：
7.通用选择器（选择所有标签以设置相同样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{
color: red;
}
</style>
<body>
<p>这是通用选择器</p>
<p>hello</p>
<p>world</p>
</body>
</html>
效果图：
8.兄弟选择器（选择兄弟关系的标签设置样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p+a{
color: green;
}
</style>
<body>
<p>这是兄弟选择器</p>
<a>hello world</a>
</body>
</html>
效果图：
9.直接父子选择器（选择父子关系的标签中子标签设置样式）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div>p {
color: red;
}
</style>
<body>
<div>
<p>这是直接父子选择器</p>
</div>
</body>
</html>
效果图：
css的9个常用选择器的更多相关文章
- CSS常用选择器
关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...
- CSS选择器详解（一）常用选择器
目录 类型选择器 类选择器 ID选择器 伪类 伪元素 类型选择器 通过类型选择器可以选择某一类型的html标签,并对其使用样式. 语法: selector {property1: value; pro ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- css的书写规范+常用
格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...
- css基础语法一（选择器与css导入方式）
页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...
- jQuery常用选择器总结
jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...
- 学习总结：CSS(一)定义方式、选择器、选择器权重
一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
- 01-css的引入方式和常用选择器
一.css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
随机推荐
- python常用函数 D
defaultdict(set_type) 可以定义字典多值映射,入参类型决定value类型. 例子: deque:(int) 保留最后N个元素 例子: Decimal(float) 直接对浮点数进行 ...
- 【LeetCode】智商题 brainteaser（共3题）
[292]Nim Game [319]Bulb Switcher [777]Swap Adjacent in LR String (2019年2月13日,谷歌tag) 给了两个字符串start 和en ...
- 唐太宗灵州勒石 TANGTAIZONGLINZHOULESHI
唐太宗灵州勒石 唐贞观二十年(646年),在唐军和回纥部落联合打败突厥薛延陀部后,原归附薛延陀部的回纥.拔野古.斛薛等部族,越过贺兰山,进入了今宁夏的银川.吴忠一带地区.这些总族向唐朝提出,愿意臣服唐 ...
- JavaSE---JDK提供的命令行工具---javap
1.javap 1.1 javap是JDK自带的反解析工具: 1.2 作用:就是根据class字节码文件,反解析出 当前类 对应的code区(汇编指令).本地变量表.异常表和代码行偏移量映射 ...
- TensorFlow学习笔记（一）
光复制几个代码到自己机器上跑是没有用的.要理解!公式理解有困难,就用图片辅助理解! MNIST中数字的表示方法 什么是one-hot? "One-hot" encoding mea ...
- Linux网络栈
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11394930.html OSI模型 OSI 模型把网络互联的框架分为应用层.表示层.会话层.传输层.网 ...
- leetcode-167周赛-1291-顺次数
题目描述: 自己的提交: class Solution: def sequentialDigits(self, low: int, high: int) -> List[int]: l,h = ...
- createElement 函数
我们知道,vue函数的渲染其实是由render函数的回调函数createElement 来创建的虚拟dom,那么它到底是怎么创建组件的? 尚未理解透彻[捂脸],有待补充,参考如下: https://w ...
- 4412 chmod权限
chmod权限 使用命令"man 2 chmod"学习chmod函数• int chmod(const char *path, mode_t mode);– 参数*path:文件路 ...
- 分布式架构下的会话追踪实践【基于Cookie和Redis实现】
分布式架构下的会话追踪实践[基于Cookie和Redis实现] 博客分类: NoSQL/Redis/MongoDB session共享rediscookie分布式架构session 在单台Tomcat ...