之前的博文：
测试了一些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简单排版的更多相关文章

  1. html中测试div、ul和li、table排列多个块

    前面有三篇博文测试了这三种方式,一.相关博文:LODOP问答部分链接.该文用的是div定位,用的是所有小div相对于大div进行定位,大的div设置relative定位,小的设置absolute相对于 ...

  2. 简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用

    这是简易数据分析系列的第 15 篇文章. 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进阶用法 ...

  3. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  4. 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  5. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  6. CSS中的ul与li样式详解 list-type

    转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...

  7. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  8. Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法

    对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除.1.在CSS中写入代码.找到相关性的CSS,在..li和. ...

  9. 【笔记】CSS选择器整理（IE低版本支持性测试）

    时间:2015.05.11 参考附件:css选择器.xmind(网友共享) 查看链接:http://www.w3school.com.cn/cssref/css_selectors.asp   htt ...

随机推荐

  1. 使用Arduino和LED光柱显示器件轻松制作电池电压指示器

    电池有一定的电压限制,如果电压在充电或放电时超出规定的限制,电池的使用寿命就会受到影响或降低.每当我们使用电池供电的项目,有时我们需要检查电池电压电量,确定是否需要充电或更换.本电路将帮助您监测电池电 ...

  2. PAT甲级1008水题飘过

    题目分析:上去下来到达的时间和数量 #include<iostream> using namespace std; ]; int main(){ int n; while(scanf(&q ...

  3. Django项目中使用qq第三方登录。

    使用qq登录的前提是已经在qq互联官网创建网站应用并获取到QQ互联中网站应用的APP ID和APP KEY 1,建路由 # qq登录 path('loginQq/',qq.loginQq,name=' ...

  4. myslq数据库用union all查询出现 #1271 - Illegal mix of collations for operation 'UNION'

    出现 #1271 - Illegal mix of collations for operation 'UNION' 的原因是两个字符编码不匹配造成的. 我遇到的是  utf8_general_ci ...

  5. janusgraph单机版安装

    注:本次安装janusgraph基于es和hbse,所以先安装es和hbase 1.安装jdk 2.安装janusgraph 解压安装文件至/usr/janusgraph-0.3.1 unzip ja ...

  6. UVa11542Squre——异或方程组&&高斯消元法

    题意 给出 $n$ 个整数,从中选出1个或多个,使得选出的整数乘积是完全平方数.一共有多少种选法?($1 \leq n \leq 100$,$1 \leq a_i \leq 10^{15}$ 且不含大 ...

  7. （3） esp8266 官方库文件，没有求逆函数

    下载库文件 #include <MatrixMath.h> #define N (2) mtx_type A[N][N]; mtx_type B[N][N]; mtx_type C[N][ ...

  8. 数论--扩展欧几里得exgcd

    算法思想 我们想求得一组\(x,y\)使得 \(ax+by = \gcd(a,b)\) 根据 \(\gcd(a,b) = \gcd(b,a\bmod b)\) 如果我们现在有\(x',y'\) 使得 ...

  9. S1_搭建分布式OpenStack集群_10 cinder 存储节点配置

    一.安装配置lvm2安装LVM包:# yum install -y lvm2 启动LVM元数据服务,并将其配置为在系统启动时启动:# systemctl enable lvm2-lvmetad.ser ...

  10. graphql-hooks hooks first 的graphql 客户端

    graphql-hooks 是一个hooks first 的graphql 客户端,支持一一些特性 首类hooks api 比较小(5.3Kb) gzip 1.8 kb 完整支持ssr (通过grap ...