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

选择器有:

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. 前端工程化(三)---Vue的开发模式

    从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...

  2. 并发容器之CopyOnWriteArraySet

    CopyOnWriteArraySet是基于CopyOnWriteArrayList实现的,其唯一的不同是在add时调用的是CopyOnWriteArrayList的addIfAbsent方法. 具体 ...

  3. 解决fatal error LNK1168的终极方法

    很多人的VC++或Visual studio 会出现fatal error LNK1168错误很是头疼,MS也说不清, 什么改权限.用户名.注册表.CMD,卸载杀毒软件...一切都瞎扯,除非reins ...

  4. 谁还没遇上过NoClassDefFoundError咋地——浅谈字节码生成与热部署

    谁还没遇上过NoClassDefFoundError咋地--浅谈字节码生成与热部署 前言 在Java程序员的世界里,NoClassDefFoundError是一类相当令人厌恶的错误,因为这类错误通常非 ...

  5. LeetCode Javascript实现 169. Majority Element 217. Contains Duplicate(两个对象比较是否相等时,如果都指向同一个对象,a==b才是true)350. Intersection of Two Arrays II

    169. Majority Element /** * @param {number[]} nums * @return {number} */ var majorityElement = funct ...

  6. python 产生token及token验证

    1.前言 最近在做微信公众号开发在进行网页授权时,微信需要用户自己在授权url中带上一个类似token的state的参数,以防止跨站攻击.在经过再三思考之后,自己试着实现一个产生token和验证tok ...

  7. Pandas的函数应用、层级索引、统计计算

    1.Pandas的函数应用 1.apply 和 applymap 1. 可直接使用NumPy的函数 示例代码: # Numpy ufunc 函数 df = pd.DataFrame(np.random ...

  8. HTTP状态码的详细解释,供参考

    HTTP状态码详解 常用对照表 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经 ...

  9. create_volume.go

    package api import (     "net/http"     "io/ioutil"     "errors"     & ...

  10. asp.net core session丢失问题排查

    最近公司采用asp.net core的站点在外测环境中,总是发现存在session丢失的情况.排查了好久,客户端.AspNetCore.Session的cookie未丢失,session的分布式缓存采 ...