id选择器

class选择器

标签选择器

父子选择器

直接选择器

并列选择器

分组选择器

选择器权重

选择器对应css写法

正确简洁编程手法（多组合）

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

css 部分

/* 1. */

#only{

background-color: blue;

}

/* 2. */

.demo{

background-color: blueviolet;

}

/* 3. */

span{

background-color: burlywood;

}

<div>

</div>

快建方式：div>strong+回车

/* 4. */

div p{

background-color: cadetblue;

}

/* 5. */

div.hhh{

background-color: chartreuse;

}

<div>

</strong>

</div>

/* 与父子选择器比较 */

/* 父子： */

div em{

background-color: greenyellow;

}

/* 将数字1,2都填上了颜色 */

/* 直接： */

div>em{

background-color: honeydew ;

}

/* 将1填上了颜色并且覆盖了父子时1的颜色，也就是由原来的greenyellow变成了 honeydew */

</div>

快建形成：div.classdiv#iddiv>p.classp#idp+回车

/* 6:并列的用法(1)*/

/*相同的‘class’，"实现让2变红 */

div.demo

/* 权重=1+10（256进制) */

{

background-color: hotpink;

}

/* div.demo的顺序不可以换 */

/*(2)： */

#iddiv p

{

background-color: rgb(82, 82, 226);

}

div #idp/* 权重=1+100（256进制） */

{

background-color: lightcoral;

}

/* 知识点：权重问题：

行间样式 1000

id选择器 100

class/属性/伪类 10

标签选择器/伪元 1

通配符(*) 0

当（1）和（2）选中同一个东西时，（2）的权重

大于（1）的，（2）的颜色会覆盖（1)的颜色。

*/

</body>

</html>

/* 7.分组选择器的应用 */

em,

strong,

div{

background-color: lightcoral;}

知识点：权重问题：

行间样式 1000

id选择器 100

class/属性/伪类 10

标签选择器/伪元 1

通配符(*) 0

当（1）和（2）选中同一个东西时，（2）的权重

大于（1）的，（2）的颜色会覆盖（1)的颜色。

正确简洁编程手法（多组合）

应该是先写css，再写HTML，形成多种组合。

css:

.demo{

background-color: hotpink;

}

#id{

width: 100px;/*通常width和height只要设置一个就好了*/

border-radius: 50%;

}

.leng{

background-color: lightcoral;}

html：

<div class="leng" id="id">你好呀</div>

<div class="demo" id="id">你好呀</div>

.........

css类型越多，HTML组合也越多

web _html_css_七大选择器相关推荐

html5的高级选择器,web@css高级选择器(after，befor用法),基本css样式
1.高阶选择器:子代后代,相邻通用兄弟,交集并集,属性,伪类,伪元素子代后代选择器 div>p{} div p{} 相邻通用兄弟 div+p{} div~p{}理解:div同学的同桌p ...
Web自动化css选择器定位法实现
#案例:css选择器定位法 from selenium import webdriver # 导入webdriver包 import time driver=webdriver.Chrome() d ...
WEB前端 -- 简单选择器
1.简单选择器在使用JQuery选择器时,首先必须使用"$()"函数来包装CSS规则.而CSS规则作为参数传递到JQuery对象内部后,再返回包含页面中对应元素的JQuery对象 ...
Web前端day03-CSSC选择器
目录 1.css介绍 2.css选择器 2.1元素选择器 2.2id选择器 2.3复合选择器 2.4关系型选择器 2.5属性选择器 2.6伪类选择器 2.7a元素的伪类 2.8伪元素选择器 1.css ...
Chrome 爬虫插件 Web Scraper
Web Scraper 官网:https://webscraper.io/ 有关webscraper的问题,看这个就够了(建议收藏): https://zhuanlan.zhihu.com/p/341 ...
动态加载子节点_简易数据分析 10 | Web Scraper 翻页—抓取「滚动加载」类型网页...
这是简易数据分析系列的第 10 篇文章. 原文首发于博客园:简易数据分析 10. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『 ...
div自动滚动_简易数据分析 10 | Web Scraper 翻页——抓取「滚动加载」类型网页
这是简易数据分析系列的第 10 篇文章. 原文首发于博客园:简易数据分析 10. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『 ...
java web 编辑器_22个所见即所得在线 Web 编辑器
我们曾介绍过10个基于JavaScript的WYSIWYG(所见即所得)编辑器,这些WPHP 我们曾介绍过 10 个基于 JavaScript 的 WYSIWYG(所见即所得) 编辑器,这些 Web ...
开源的在线html编辑器,22个国外的Web在线编辑器收集
1. TinyMCE 免费,开源,轻量的在线编辑器,基于 javascript,高度可定制,跨平台.2. FCKEditor 免费,开源,用户量庞大的在线编辑器,有良好的社区支持.3. YUI Edi ...

web _html_css_七大选择器

/* 知识点：权重问题：

知识点：权重问题：

正确简洁编程手法（多组合）

web _html_css_七大选择器相关推荐

最新文章

热门文章