css选择器测试2-用ul和li简单排版
之前的博文：
测试了一些css样式的优先级，都是比较常见的选择器 ，这里测试一些其他一些选择方式。
*：通配符，所有页面的元素都走这个。
设置多个class:一个标签里不能有两个class，如果想要设置多个，可放入一个class里，用空格连接，格式是：
class="class1的名字 class2的名字",两者之间用空格连接。
且关系(两个class同时存在的元素)：两个类之间不加空格，格式：.类名1.类名2{}
包含关系（一个里包含另一个）：用空格连接，格式：.类名1 .类名2{}（之间有空格）
标签[属性=属性值]某个属性值等于某个值的元素。
测试代码：
<style>
body{margin:0px;}
ul{list-style-type:none;margin:0px;}
li{float:left;display:block;width:100px;height:50px;background:gray;margin-left:10px;margin-top:10px;}
p{margin:0px;}
.clearFloat{clear:both;} *{font-size:20px;}
#li1{font-size:30px;}
.c2{font-size:10px;}
.c22{color:white;}
.c2.c22{background:blue;}/**两个class是且的关系，有两个类的元素才会加上这个样式**/
.c6{font-family:"楷体";}
.pp{font-weight:bold;}
.c6 .pp{background:yellow;}/**两个类直接空格，是包含关系，第一个类里的含有第二个类的**/
.c8{background:red;}
input[type="button"]{border:0px;color:blue;}
</style>
</head>
<body>
<div id="divall">
<ul>
<li id="li1">内容1</li><!--id选择器大于*通配选择器-->
<li class="c2" class="c22">内容2</li><!--错误写法，一个标签里不能两个class-->
<li class="c2 c22">内容3</li><!--多个类选择器，可用空格连接-->
<li class="c22">内容4</li><!--只有一个类，背景色不会变蓝色-->
<li class="clearFloat">内容5</li><!--走通配样式的文字大小-->
<li class="c6"><p class="pp">内容6</p></li>
<li><p class="pp">内容7<p></li><!--不是c6里包含的pp，所以背景色没变-->
<li><input type="button" value="内容9"></li>
</ul>
</div>
图示：
css选择器测试2-用ul和li简单排版的更多相关文章
- html中测试div、ul和li、table排列多个块
前面有三篇博文测试了这三种方式,一.相关博文:LODOP问答部分链接.该文用的是div定位,用的是所有小div相对于大div进行定位,大的div设置relative定位,小的设置absolute相对于 ...
- 简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用
这是简易数据分析系列的第 15 篇文章. 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进阶用法 ...
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法
div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
- 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法
div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
- CSS中的ul与li样式详解 list-type
转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法
对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除.1.在CSS中写入代码.找到相关性的CSS,在..li和. ...
- 【笔记】CSS选择器整理（IE低版本支持性测试）
时间:2015.05.11 参考附件:css选择器.xmind(网友共享) 查看链接:http://www.w3school.com.cn/cssref/css_selectors.asp htt ...
随机推荐
- 持久化JS存储
<script src="../../lib/persist-min.js"></script> //测试一下本地化存储器 var store = new ...
- 一个线上JVM的CPU资源占用过高问题的排查
原文:https://www.iteye.com/blog/tyrion-2293369 上午线上某应用的一台JVM的CPU占比突然飙高到192%,并且一直下不来,导致监控一直告警,好久没处理这种问题 ...
- Linux 修改文件目录权限
修改文件目录权限 chmod chmod u+x b.txt chmod 777 a.txt 修改文件的所有者和所属组 修改所有者chown beifeng a.txt 修改所属组chgrp b ...
- 路由器安全——破解wifi密码，同时中间人攻击
聊聊安全那些事儿 篇一:Wi-Fi安全浅析 2016-04-25 13:18:16 141点赞 712收藏 63评论 前言 近期,Wi-Fi相关的安全话题充斥着电视新闻的大屏幕,先是曝出了路由器劫持的 ...
- @Scope("prototype")
spring中bean的scope属性,有如下5种类型: singleton 表示在spring容器中的单例,通过spring容器获得该bean时总是返回唯一的实例prototype表示每次获得bea ...
- WM_MOUSEWHEEL、WM_LBUTTONDOWN等父子窗口消息传递陷阱
mfc中,碰到以下问题:父对话框A.子窗口B.B是CWnd对象.需要在B中处理WM_MOUSEWHEEL.WM_LBUTTONDOWN等消息. 所以在B中增加对应的消息处理,发现B中的消息循环中,收不 ...
- hive中执行hql或建表语句时，抛出Display all 459 possibilities? (y or n)错误的解决方法
我昨天在hive上建表,一直报Display all 459 possibilities? (y or n) ,之前我以为是建表语句有问题,一直在改语句,后来在网上搜这个错误,原来语句里混杂了Tab缩 ...
- 启用Microsoft loopback Adapte
开始▶控制面板▶系统 系统▶设备管理器 此时,点击操作的菜单是没有有用子菜单的,需要点击一下网络适配器. 再点击操作▶添加过时硬件 添加硬件向导▶下一步 安装我手动从列表选择的硬件 ...
- 独角兽估值30亿美金，我们聊聊RPA是什么
https://www.jianshu.com/p/397ecd238ffc 缩短法定工作时间,已成国际劳动立法趋势,全球政府都曾面对这样的议题,过往企业IT也在思考这件事,开发出更好的软件系统帮助员 ...
- Centos7安装使用Mysql（mariadb）
安装 shell> yum install mariadb-server -y 配置 # 修改文件 /etc/my.cnf [mysqld]datadir=/mydata/data/mysqlc ...