博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3选择器用法小结
阅读量:6623 次
发布时间:2019-06-25

本文共 1007 字,大约阅读时间需要 3 分钟。

1.*通配符选择器

  eg:*{margin:0;padding:0;}

2.#id选择符

  ID选择器是CSS中效率最高的选择器,使用的时候要保证ID的唯一性

  eg:#div{width:960px;margin:auto},id为div的标签

3. . class类选择器

  eg:.div{width:960px}通过class名进行引用

4.标签选择器

  通过标签来引用。eg:a{color:red}

5.标签组合选择器

  eg:div a{color:red} div下的a标签引用

6.标签并联选择器

  eg:div,a{color:red}   div与a是同级

7.伪类选择器

  最常用的为a标签eg: :hover,:link,:active,:visited,:lang等

  eg:input[type="radio"]:checked+label{color:red}

  <input type="radio" value="男" checked name="sex"><label>男</label>

8.毗邻元素选择器

   a+b 紧邻a标签的同级b标签

  eg:a+ b { color: red; }

9.子元素选择器

  a>b a标签下的b标签

eg:

#div > ul { border: 1px solid black; }

<div id="div">

<ul>

  <li>

    List Item

     <ul>

       <li> Child </li>

    </ul>

  </li>

  <li> List Item </li>

  <li> List Item </li>

  <li> List Item </li>

</ul>

</div>

10.兄弟选择器 

  a~b a标签后所有的同级b标签

11.属性选择器

  a[title]{}匹配a包含title的标签

  a[href="a"]{}匹配href为“a”的标签
  a[href*="a"]{}匹配所有href中含有“a”的标签
  a[href^="a"]{}匹配href中以a开头的标签
  a[href$="a"]{}匹配href中以a结尾的标签

转载于:https://www.cnblogs.com/Alexia/p/5974871.html

你可能感兴趣的文章
LYNC安装故障排除分享
查看>>
jQuery做个TextBox自动完成条
查看>>
IP地址规划
查看>>
【ZooKeeper Notes 4】可视化zookeeper的事务日志
查看>>
Globalize for Ruby on Rails
查看>>
Linux计划任务
查看>>
4-2 ADO.NET-查询和检索数据9
查看>>
用简单的命令检查电脑是否被安装木马
查看>>
Java正则表达式应用总结
查看>>
Office 365系列之八:配置和体验Exchange和Lync
查看>>
杂七杂八——C#实现二叉树,外带中序遍历
查看>>
NeHe OpenGL第十一课:飘动的旗帜
查看>>
C#枚举显示声明值类型
查看>>
在Windows下安装MongoDB
查看>>
《开发者突击:精通ASP.NET AJAX网络程序设计》终于面世
查看>>
最大市场份额的Unix-怎么管理Solaris服务器
查看>>
走开源信息化之路
查看>>
MySQL中实现分割字符串的方法
查看>>
关于平时服务器管理的疑难杂症点点滴滴
查看>>
拒绝只买现在,放弃未来,拒绝买工具型软件
查看>>