CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考。

CSS 选择符:

1)      id选择器(# myid)

2)      类选择器(.myclassname)

3)      标签选择器(div, h1, p)

4)      相邻选择器(h1 + p)

5)      子选择器(ul > li)

6)      后代选择器(li a)

7)      通配符选择器( * )

8)      属性选择器(a[rel = "external"])

9)      伪类选择器(a: hover, li:nth-child)

可继承的样式:

1)      font-size

2)      font-family

3)      color

4)      text-indent

不可继承的样式:

1)      border

2)      padding

3)      margin

4)      width

5)      height

优先级算法:

1)      优先级就近原则,同权重情况下样式定义最近者为准;

2)      载入样式以最后载入的定位为准;

3)      3.!important >  id > class > tag

4)      important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例:

1)      p:first-of-type  选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

2)      p:last-of-type   选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

3)      p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

4)      p:only-child     选择属于其父元素的唯一子元素的每个 <p> 元素。

5)      p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

6)      :enabled :disabled 控制表单控件的禁用状态。

7)      :checked         单选框或复选框被选中。

CSS3有哪些新特性?

1)    CSS3实现圆角(border-radius),阴影(box-shadow),

2)    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

3)    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4)    增加了更多的CSS选择器  多背景 rgba

5)    在CSS3中唯一引入的伪元素是 ::selection.

6)    媒体查询,多栏布局

7)    border-image

CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性的更多相关文章

  1. CSS3新增伪类--好用的:target

      问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用cs ...

  2. CSS3新增了哪些新特性

    一.是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准,是向后兼容的,CSS1/2的 ...

  3. CSS3新增伪类

    p:last-of-type         选择其父元素的最后的一个P元素 p:last-child            选择其父元素的最后子元素(一定是P才行) p:first-of-type ...

  4. CSS3新增伪类汇总

    :root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...

  5. CSS3新增伪类有那些?

    p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child ...

  6. CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?

    CSS 选择符有哪些? 1.id选择器(#id) 2.类选择器(.class) 3.标签选择器(div,h1,p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器 ...

  7. HTML/CSS 选择符优先级

    CSS的选择符优先级 1.同级样式默认后者覆盖前者 2.样式优先级 类型(1) < class[type](10)=伪类(10) < id(100) < style行间样式(1000 ...

  8. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  9. 说说ID选择符、类选择符和HTML标记选择符的优先级顺序

    ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如:       p{color:#f ...

随机推荐

  1. ngx_lua_API 指令详解(五)coroutine.create,coroutine.resume,coroutine.yield 等集合指令介绍

    ngx_lua 模块(原理实现) 1.每个worker(工作进程)创建一个Lua VM,worker内所有协程共享VM: 2.将Nginx I/O原语封装后注入 Lua VM,允许Lua代码直接访问: ...

  2. 转---一文读懂 python 的元类

    译注:这是一篇在Stack overflow上很热的帖子.提问者自称已经掌握了有关Python OOP编程中的各种概念,但始终觉得元类(metaclass)难以理解.他知道这肯定和自省有关,但仍然觉得 ...

  3. AngularJS入门基础——表达式

    表达式在AngularJS应用中广泛的使用,因此深入理解AngularJS如何使用并运算表达式是非常重要的.   表达式和eval非常相似,但是由于表达式由AngularJS来处理,它们有已下显著不同 ...

  4. 【CodeForces】983 E. NN country 树上倍增+二维数点

    [题目]E. NN country [题意]给定n个点的树和m条链,q次询问一条链(a,b)最少被多少条给定的链覆盖.\(n,m,q \leq 2*10^5\). [算法]树上倍增+二维数点(树状数组 ...

  5. 以python代码解释fork系统调用

    import os print('Process (%s) start...' % os.getpid()) # Only works on Unix/Linux/Mac: pid = os.fork ...

  6. Python 入门基础12 --函数基础5 匿名函数、内置函数

    今日内容: 1.三元表达式 2.列表.元组生成式 | 字典生成式 3.递归 4.匿名函数 5.内置函数 一.三元表达式 三元运算符:就是 if...else... 语法糖 前提:if 和 else # ...

  7. Java并发——线程同步Volatile与Synchronized详解

    0. 前言 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52370068 面试时很可能遇到这样一个问题:使用volatile修饰in ...

  8. 【转载】Maven pom文件详解

    什么是pom?    pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的u ...

  9. cancel_delayed_work和flush_scheduled_work【转】

    转自:http://blog.chinaunix.net/uid-9688646-id-4052595.html 是不是觉得很玄?像思念一样玄?那好,我们来看点具体的,比如935行,INIT_DELA ...

  10. python自动安装mysql5.7【转】

    #!/usr/bin/env python import os import sys import re base_dir = '/opt/software/mysql-5.7.17-linux-gl ...