有时在看别人代码时，看到一长串的选择器经常有点懵，今天来夯实一下基础

选择器有：

1、标签选择器 ：就是HTML 中的标签 如<p> <h1> <body>等

2、类选择器： 用 class="类选择器名称" 为标签设置一个类 ，以英文原点开头，语法：

.类选择器名称{css样式代码}

3、ID选择器：用 id="ID选择器名称"为标签设置一个类，以（#）号开头.（ID选择器只能在文档中使用一次）

4、通用选择器：它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如：

*{ color:red;}

5、子代选择器：用（>）符号，用于指定标签元素的第一代子元素。如：

li>span{color:red;}

6、后代选择器：加入空格 ，用于选择指定标签下的后辈元素。

.parent  .son{color:red;}

7、伪类选择器：用于给HTML不存在的标签（标签的某种状态）设置样式，如

a:hover{color:red;}

8、分组选择符：想为多个标签设置相同的样式，用分组选择符（，）。如

h1，p{color:red;}

选择器权值：

哪种选择器权值高就使用哪种css的样式，权值规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

当有权值相同的样式存在，根据前后顺序决定样式，处于最后面的CSS样式会被应用

所以优先级：内联样式表（标签内部）>嵌入样式表（当前文档中）>外部样式表（外部文件中）

为某些样式设置最高权值，用!important。如：

p{color:red !important;}   !important写在分号前。

css 选择器基础的更多相关文章

  1. Scrapy基础------css选择器基础

    基本语法: * 选择所有节点 #container 选择id为container的节点 .container 选择所有class包含container的节点 li a 选取所有li 下所有a节点 ul ...

  2. Scrapy基础(五) ------css选择器基础

    基本语法: *                  选择所有节点#container         选择id为container的节点.container      选择所有class包含contai ...

  3. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  4. css 选择器；盒模型

    一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...

  5. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  6. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  7. css以及选择器基础

    CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...

  8. html基础和CSS选择器

    一.html简单基础 什么是HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标 ...

  9. css基础,css选择器

    07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head ...

随机推荐

  1. Http Header信息

    REMOTE_ADDR – 访问客户端的 IP 地址 HTTP_VIA – 如果有该条信息, 就证明您使用了代理服务器,代理服务器的地址就是后面的数值. HTTP_X_FORWARDED_FOR – ...

  2. cropper(裁剪图片)插件使用（案例）

    公司发布微信H5前端阵子刚刚弄好的H5端的图片上传插件,现在有需要裁剪图片.前端找了一个插件---cropper 本人对这插件不怎么熟悉,这个案例最好用在一个页面只有一个上传图片的功能上而且只适合单个 ...

  3. MySQL中查询时"Lost connection to MySQL server during query"报错的解决方案

    一.问题描述: mysql数据库查询时,遇到下面的报错信息: 二.原因分析: dw_user 表数据量比较大,直接查询速度慢,容易"卡死",导致数据库自动连接超时.... 三.解决 ...

  4. NS3系列——eclipse + NS3环境搭建

    1. 安装NS3 (1)在 ubuntu12.04 中安装 ns3.20,首先要安装一下各种依赖软件: sudo apt-get install gcc g++ pythonsudo apt-get ...

  5. （WCF初体验）WCF的认证和消息保护

    最近做WCF开发,有个需求是在服务端做认证,网上查资料了解到可以用UserName和Password 来做认证,只需要写好配置文件和在服务端写好验证类就行了,但是网上普遍的博文都是需要用证书,而我自己 ...

  6. 【手记】小心在where中使用NEWID()的大坑

    这个表达式: --把GUID弄成正整数,然后取模 是随机返回0.1.2这三个数,不可能返回其它东西,但是如果把它用在where里面,就会发生很神奇的事情,比如这个查询: --创建一个只有1列3行的表, ...

  7. 手动撸个Android雷达图（蜘蛛网图）RadarView

    公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记 无图言虚空 简单分析一波,确定雷达图正几边形的--正五边形 int count=5,分为几个层数--4 层 in ...

  8. js术语扫盲贴：XHR、RegExp、call-apply、prototype

    (1) XHR:xml httprequestXHR注入:XHR 注入技术是通过XMLHttpRest来获取javascript的.但与eval不同的是,该机制是通过创建一个script的DOM元素, ...

  9. jQuery学习之旅 Item9 动画效果

    1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...

  10. Python爬虫利器五之Selenium的用法

    1.简介 Selenium 是什么?一句话,自动化测试工具.它支持各种浏览器,包括 Chrome,Safari,Firefox 等主流界面式浏览器,如果你在这些浏览器里面安装一个 Selenium 的 ...