1.选择器以及使用场景

id选择器：#header{}

类选择器：.header{}

元素选择器：div{}

子选择器：ul > li{}

后代选择器：div p{}

伪类选择器：a:hover{}

属性选择器:input[type="text"]

id优先高于class；

2.权重怎么计算

4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

3.css几种布局

css选择器以及使用场景的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. CSS 选择器【详解】

    转自:http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.html CSS 选择器及各样式引用方式介绍 一个好的界面,是一个Web吸引人们最 ...

  3. 笔记一:CSS选择器

    0.前言:无论学什么,前端都是绕不开的一门技术,对于不同的人需求不同,作为一个python开发者不仅需要能读懂基本的html/css以及js代码,还要会使用它的常用的标签,以及了解比较有用的标签,把逻 ...

  4. 突破css选择器的局限，实现一个css地址选择器?

    首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...

  5. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  6. dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  7. CSS选择器的权重与优先规则？

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  8. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

  9. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

随机推荐

  1. [macOS] finder变慢提速

    原文地址:http://ntfs-formac.com/fix-slow-finder-macos-sierra/ 我采取的是第二种方法,够简单,直接在终端执行 rm ~/Library/Caches ...

  2. 18.12.09-C语言练习：黑洞数 / Kaprekar问题

    题目: 程序: #include <stdio.h> int main(void) { int n, a, b, c, t, A, B; printf("输入一个三位数整数:&q ...

  3. python 对excel操作用法详解

    在python中,对excel表格读,写,追加数据,用以下三个模块: 1.wlrd 读取excel表中的数据 2.xlwt 创建一个全新的excel文件,然后对这个文件进行写入内容以及保存. 3.xl ...

  4. 第一个SDL程序

    不废话,就WinMain主体: SDL_Window* window = NULL; SDL_Renderer* renderer = NULL; SDL_Event e; bool q = 0; i ...

  5. How to using Piwis Tester II code Porsche rear end electronics

    V18.100 Piwis Tester II Diagnostic Tool For Porsche With CF30 Laptop High Quality Top 7 Reasons to G ...

  6. HBase Thrift过滤语法

    摘抄自hbase ref guide 0.94: 在写本文的时候,hbase ref guide已经更新到1.2及2.0了,但是个人感觉Thrift过滤语法部分写得都没有0.94的好,省掉了examp ...

  7. deepin Gtk-WARNING **: 无法在模块路径中找到主题引擎：“adwaita”

    虽然没影响使用,但是看着有点不爽. 执行 sudo apt-get install gnome-themes-standard 就可以了.

  8. springboot+thymeleaf+pageHelper带条件分页查询

    html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...

  9. Developing Vert.x Modules using the Standard Project

    The module The tests Unit tests Integration tests Java integration tests JavaScript integration test ...

  10. JSP页面静态包含和动态包含的区别与联系

    ---恢复内容开始--- JSP页面静态包含和动态包含的区别与联系: 1.<%@ include file=" " %> 是指令元素,<jsp:include p ...