css 选择器基础
有时在看别人代码时,看到一长串的选择器经常有点懵,今天来夯实一下基础
选择器有:
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 选择器基础的更多相关文章
- Scrapy基础------css选择器基础
基本语法: * 选择所有节点 #container 选择id为container的节点 .container 选择所有class包含container的节点 li a 选取所有li 下所有a节点 ul ...
- Scrapy基础(五) ------css选择器基础
基本语法: * 选择所有节点#container 选择id为container的节点.container 选择所有class包含contai ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- css 选择器;盒模型
一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- css以及选择器基础
CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...
- html基础和CSS选择器
一.html简单基础 什么是HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标 ...
- css基础,css选择器
07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head ...
随机推荐
- pycharm linux版快捷方式创建
****************************pycharm_linux安装and快捷方式创建******************1.下载好安装包之后解压: tar -xfz 压缩包名 ...
- mybatis自定义代码生成器(Generator)——自动生成model&dao代码
花了两天的时间研究了下mybatis的generator大体了解了其生成原理以及实现过程.感觉generator做的非常不错,给开发者也留足了空间.看完之后在generator的基础上实现了自定义的生 ...
- RESTful规范
一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...
- 全国省市县区域信息最新数据库脚本(mysql版本)
/*Navicat MySQL Data Transfer Source Server : localhostSource Server Version : 50717Source Host : lo ...
- 用react重构个人网站 3-22
问题一:import React from 'react'这个写法是怎么回事? 答案:require是common.js的写法,import是ES6的写法,主要功能都是引入模块,写法上: var mo ...
- RabbitMQ (五)主题(Topic)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37706355 上一篇博客中,我们进步改良了我们的日志系统.我们使用direct类 ...
- python一行代码就能搞定的事情!
打印9*9乘法表: >>> print( '\n'.join([' '.join(['%s*%s=%-2s' % (y,x,x*y) for y in range(1,x+1)]) ...
- yum安装指定版本的软件包的方法
yum默认都是安装最新版的软件,这样可能会出一些问题,或者我们希望yum安装指定(特定)版本(旧版本)软件包.所以,就顺带分享yum安装指定(特定)版本(旧版本)软件包的方法. 过程如下:假设这里是我 ...
- 基于Nginx和Zookeeper实现Dubbo的分布式服务
一.前言 公司的项目基于阿里的Dubbo 微服务框架开发.为了符合相关监管部门的安全要求,公司购买了华东1.华东2两套异地服务器,一套是业务服务器,一套是灾备服务器.准备在这两套服务器上实现 Dubb ...
- protocol_v2.go
{ return protocol.NewFatalClientErr(nil, "E_INVALID", fmt.Sprintf(&quo ...