一、选择符的种类

1)通配选择符

它用来给页面所有的元素设置样式

*{margin:0;padding:0;}。但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能。也可以给某元素的所有的后代元素应用样式:p *{color:red;}

2)标签选择符

顾名思义,通过标签来限定样式作用域

div{padding:5px;}

3)类选择符

和面向对象中的类有着类似的功能,需要的时候调用即可,达到重用的目的。将样式定义成一个类,需要使用的地方调用即可。

.myClass{font-size:24px;}

<p>普通文字<p>

<p class="myClass">自定义样式</p>

4)ID选择器

通过#ID来精确定位页面元素的属性

#trapper{padding:10px;font-size:26px;}

<div id="trapper">

<ul>

<li>1</li>

<li>2</li>

</ul>

</div>

5)包含选择符

直接上实例

div strong{font-size:24px;text-decoration:underline;}

<div>

  <p><strong>我是div中的p标签下的strong内容(”孙子”)</strong></p>

  <strong>我是div中的strong内容(”孩子”)</strong>

</div>

可见,包含选择会将某元素下的所有包含元素都设置样式。不管层级有多深。

6)子选择符

和上边的区别,大家看出来了吗?

div>strong{font-size:24px;text-decoration:underline;}

<div>

  <p><strong>我是div中的p标签下的strong内容(”孙子”)</strong></p>

  <strong>我是div中的strong内容(”孩子”)</strong>

</div>

7)相邻选择符

控制相邻的元素样式

div+strong{font-size:24px;text-decoration:underline;}

<div>

  <strong>我是p的邻居</strong>

  <p><strong>我是div中的p标签下的strong内容(”孙子”)</strong></p>

  <div>div中的div</div>

  <strong>我是div中的strong内容(”孩子”),而且我也是p的邻居</strong>

  <strong>我显示有下滑线吗</strong>

</div>

要是p+strong+strong呢?strong+strong(可以并排多个strong看看效果)?css很强大!!

8)属性选择符

四种方式

E[attr] 具有attr属性的所有HTML标签 ,如div[class]表示具有class属性的所有div

E[attr="value"] 具有attr属性且属性值为value的标签,如input[type="text"]{border:2px;}

E[attr~="value"] 具有attr属性,且有多个空格隔开的字段,其中一个字段为value的元素。

E[attr|="value"] 具有attr标签,且必须以value值开始及使用-分隔的元素

9)混合选择符

如p.className p#id等等

二、CSS选择符优先级计算

总体上按照就近原则应用样式。一般计算如下

行内样式:1000

ID选择符:0100

类选择符:0010

标签选择符:0001

例如:body #wrapper p {...},那么它的优先级指数就是 1+100+1=102,而body div #wrapper p {...}的优先级指数就是 1+ 1 +100 + 1 =103

但需要注意一个关键字!important,除了IE6,他的css优先级最高。

#box {
     color:red !important;
     color:blue;
 }

这样,对于IE7+显示字体颜色为红色,不会被蓝色覆盖掉。IE6显示为蓝色。

本文参考 CSS那些事儿,大家想看详细信息,请看这本书

CSS知识点:选择符的更多相关文章

  1. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  2. css关系选择符

    <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. CSS:CSS 组合选择符

    ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...

  4. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

  5. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  6. CSS 的选择符

    CSS是什么? 如果说元素是标记代码的构建块料,那么CSS就是约束这些构建块料样式的规则. CSS规则的组成 CSS的规则由 选择符 和属性,值组成. Css选择符:选择符是规则中用于确定样式所涵盖的 ...

  7. CSS之选择符、链接、盒子模型、显示隐藏元素

    <html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...

  8. 1+x证书学习日志——css 基本选择符

    ##css选择符                 1:类型选择符 直接用标签名称当作选择符                     特点:选中所有同类元素                 2:id名称 ...

  9. CSS组合选择符

    组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...

  10. 强大的CSS 属性选择符 配合 stylish 屏蔽新浪微博信息流广告

    新建一条微博域名下的规则: @-moz-document domain("weibo.com") { #v6_pl_rightmod_rank,#v6_pl_rightmod_ad ...

随机推荐

  1. hdu 3001 Travelling (TSP问题 )

    Travelling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. WAP页面点击与hover延迟解决之道

    最近一直在WAP端页面的开发,一直都知道wap端点击相关问题存在延迟.之前做的网页大部分使用a链接进行,一直未入此坑. 最近做的一个WAP网站,各种点击,hover事件,如果使用PC端网页的做法,直接 ...

  3. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  4. Request processing failed; nested exception is org.springframework.dao.InvalidDataAccessApiUsageException: Multiple representations of the same entity解决方法

    1.错误信息 Request processing failed; nested exception is org.springframework.dao.InvalidDataAccessApiUs ...

  5. thinkphp学习笔记10—看不懂的路由规则

    原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...

  6. Oracle 用户权限管理方法

    Oracle 用户权限管理方法 sys;//系统管理员,拥有最高权限 system;//本地管理员,次高权限 scott;//普通用户,密码默认为tiger,默认未解锁 sys;//系统管理员,拥有最 ...

  7. ABP领域层——实体

    ABP领域层——实体 基于DDD的现代ASP.NET开发框架--ABP系列之10.ABP领域层——实体 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的 ...

  8. Windows移动开发(一)——登堂入室

    開始本博客之前先分享一个自己的好消息吧,2014年3月31日起,正式就职于北京****集团Win8project师.主要负责将IOS和Android应用移植到Win8.1平板上,目标客户是银行,闲话不 ...

  9. INF 右安装驱动程序和卸载

    INF 右键安装驱动以及卸载 之前写过一篇文章是关于INF文件具体解释的.大家能够參看INF文件具体解释,这次写的是关于INF右键安装,这样比較方便. 卸载的话也是一句话.能够大大降低安装时间: 先将 ...

  10. IntelliJIDEA Getting+Started+with+Spring+MVC,+Hibernate+and+JSON

    https://confluence.jetbrains.com/display/IntelliJIDEA/Getting+Started+with+Spring+MVC,+Hibernate+and ...