03-css选择器
2024-09-06 11:21:04
<!doctype html><!--声明文档类型 网页文档-->
<html><!--根目录标签 父级-->
<head><!--网页的头部 用户看不见的-->
<meta charset='UTF-8'><!--国际编码 字符的编码格式--> <!--网页三要素 title keywords description-->
<title>咸鱼联盟</title><!--网页的标题-->
<meta name='keywords' content='关键的搜索字符'><!--让搜索引擎找到网页-->
<meta name='description' content='这是一个简单的模板文件'><!--网页的描述-->
<style type="text/css">
.box-one{ /* .+名字 class选择器 */
width:300px;
height:150px;
background:yellow;
}
.box-two{
width:300px;
height:75px;
background:deeppink;
}
#text{ /* #+名字 id选择器 */
width:300px;
height:100px;
background:purple;
color:yellow; /* 设置文字颜色 */
}
.box-three{
width:300px;
height:100px;
background:pink;
}
.box-three .box-four{ /*后代选择器*/
width:150px;
height:50px;
background:yellow;
}
.box-three+.box-four{ /* 相邻(下面的)兄弟选择器 */
width:300px; /* 可以用~代替+选中下边所有的兄弟 */
height:100px;
background:green;
}
body .box-four{
width: 100px;
height: 100px;
background: greenyellow;
}
.box-five{
width: 300px;
height: 100px;
background: antiquewhite;
}
.box-five>.box-six{ /* 子代选择器 */
width: 100px;
height: 50px;
background: purple;
}
*{ /* 通配符选择器 */
}
</style>
</head> <body><!--网页的身体 用户可视化区域-->
<div class="box-one"></div>
<div class="box-two"></div>
<p id='text'>咸鱼联盟</p>
<div class="box-four"></div>
<div class="box-three"> <!--父级-->
<div class="box-four"></div> <!--子级-->
</div>
<div class="box-four"></div> <!--兄弟-->
<div class="box-four"></div>
<div class="box-five">
<div class="box-six"></div>
</div>
<!--
命名规范
统一使用单引号
不允许出现数字开头结尾
html中不出现'_',选用'-'
取名要规范,百度有
选择器
标签选择器 div p ul li
class选择器 .+名字
id选择器 #+名字
后代选择器 只要有空格就是后代选择器
相邻兄弟选择器 .box-three+.box-four仅是下一个兄弟
普通兄弟选择器 .box-three~.box-four下边的兄弟都可以选的到
后代选择器 body .box-four 但是这个的优先级要比class选中的低
子代选择器 .box-five>.box-six 选择儿子辈的东西
选择器的权重
id选择器>class选择器>标签选择器>通配符选择器
权重高的选择器会覆盖权重低的重复属性(就是都有的属性)
id选择器>后代选择器>class选择器
-->
</body>
</html>
最新文章
- java替换包含html标签
- .net core 学习笔记(2)-中间件
- char类型的字节数
- 常用中文字体 Unicode 编码
- HDU 2795 Billboard(线段树的另类应用)
- HDOJ/HDU 1251 统计难题(字典树啥的~Map水过)
- CSS从大图中抠取小图完整教程(background-position应用) (转)
- Pythoner | 你像从前一样的Python学习笔记
- MySQL学习笔记(4)
- java数组中的三种排序方法中的冒泡排序方法
- STL容器存储的内容动态分配情况下的内存管理
- NSXMLParser自定义的一个xml解析工具
- 一次完整的http的请求过程
- ACA:利用ACA解决TSP优化最佳路径问题——Jason niu
- [转载]Oracle中的NVL函数
- 20165205 2017-2018-2 《Java程序设计》第七周学习总结
- HDU 4059 The Boss on Mars(容斥原理 + 四次方求和)
- linux下使用ftp传递文件的shell脚本
- chrome 等浏览器不支持本地ajax请求的问题
- Effective C++ —— 定制new和delete(八)
热门文章
- JAVA单线程和多线程的实现方式
- Optimal Marks SPOJ - OPTM
- VC图片裁剪源代码
- NX-二次开发删除对象UF_OBJ_delete_object
- c++ pb_ds库,实现 红黑树,Splay
- Java-Class-C:org.springframework.web.client.RestTemplate
- spring boot jpa没有自动生成表的原因——加上@Entity
- LeetCode 2. Add Two Numbers (两数相加)
- Spring Boot集成Shiro实战
- 深夜Python - 第1夜 - for 迷 in 迷思