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 ...
随机推荐
- ADAS 实车道路及场地测试服务
概述 高级驾驶员辅助系统(ADAS)作为车辆主动安全的关键系统,已经被越来越多的车辆配置.ADAS系统与车辆动力.制动.转向系统有直接耦合,是车辆中可靠性要求很高的控制系统,因此针对A ...
- xpath+多进程爬取全书网纯爱耽美类别的所有小说。
# 需要的库 import requests from lxml import etree from multiprocessing import Pool import os # 请求头 heade ...
- APT 信息收集——shodan.io ,fofa.so、 MX 及 邮件。mx记录查询。censys.io查询子域名。
信息收集 目标是某特殊机构,外网结构简单,防护严密.经探测发现其多个子机构由一家网站建设公司建设. 对子域名进行挖掘,确定目标ip分布范围及主要出口ip. 很多网站主站的访问量会比较大.往往主站都是挂 ...
- 补充拓展：CSS权重值叠加
都知道CSS选择器有权重优先级,权重大的优先展示. 但部分人可能不清楚,权重值也是可以叠加计算的 <!DOCTYPE html> <html> <head> < ...
- [POJ2083] Fracal
Description A fractal is an object or quantity that displays self-similarity, in a somewhat technica ...
- 项目Alpha冲刺——总结
作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...
- LeetCode 731. My Calendar II
原题链接在这里:https://leetcode.com/problems/my-calendar-ii/ 题目: Implement a MyCalendarTwo class to store y ...
- jsp解决大文件断点续传
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- 16-ESP8266 SDK开发基础入门篇--TCP 服务器 非RTOS运行版,串口透传(串口回调函数处理版)
https://www.cnblogs.com/yangfengwu/p/11105466.html 其实官方给的RTOS的版本就是在原先非RTOS版本上增加的 https://www.cnblogs ...
- 洛谷 P1474 货币系统 Money Systems 题解
P1474 货币系统 Money Systems 题目描述 母牛们不但创建了它们自己的政府而且选择了建立了自己的货币系统.由于它们特殊的思考方式,它们对货币的数值感到好奇. 传统地,一个货币系统是由1 ...