笔记一:CSS选择器
0.前言:无论学什么，前端都是绕不开的一门技术，对于不同的人需求不同，作为一个python开发者不仅需要能读懂基本的html/css以及js代码，还要会使用它的常用的标签，以及了解比较有用的标签，把逻辑捋通，知道有什么才能用什么。需要用的时候查一下资料文档以及博客笔记。当然，如果能记住并使用它就更好不过了。
1.CSS的语法场景(优先级)：
1.行内：在当前标记中加入style属性。
2嵌入：最常用的方式，<style></style>
3.外链：<style>@import url(" 路径")
4.导入：写一个单独的css文件。
2，CSS选择器:
1,常用的选择器:
优先级问题: 内联标签-id选择器-类选择器-标签选择器 (id:100 class 10 tag 1) 不可进位
以下代码的优先级是什么，代码颜色是什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
p{
color:green;
}
.demo{
color:yellow;
}
#ww{
color:red;
}
</style>
</head>
<body>
<p class="demo" id="ww" style="color:black"><label style="color:white">测试</label></p>
</body>
</html>
<!--label >style>id >class>tag-->
<!--output:白色-->
可见，当多个选择器修饰一个属性时，优先级最高的选择器生效。
2. 其余选择器
后代选择器li a{}
全局选择器，用于去除与浏览器之间的边距
伪类选择器：
- a:link和a等同
- a:visited访问过的样子
- a:hover 选择鼠标指针浮动在其上的元素，适用于所有元素
- active ：点击样式
- after、before： 在链接之前之后添加内容 a::after{content:"#"}
3毗邻、弟弟、儿子选择器：
<--毗邻选择器，向下选择-->
div+p {
color:yellow;
}
<!--儿子选择器-->
div>p
/*弟弟选择器*/
a~p{
color:tomato;
}
a~label{
color: aqua;
}
<div>
<a href="">弟弟选择器</a>
<p>哈哈</p>
<label for="">弟弟二</label>
</div>
3属性选择器:
[s9]
{
color:red;
}
[s9=good]{
color:yellow;
}
<p s9="hao">好标签</p>
<p s9="good">good标签</p>
笔记一:CSS选择器的更多相关文章
- 【CSS学习笔记】CSS选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 【笔记】CSS选择器整理（IE低版本支持性测试）
时间:2015.05.11 参考附件:css选择器.xmind(网友共享) 查看链接:http://www.w3school.com.cn/cssref/css_selectors.asp htt ...
- 前端学习笔记之CSS选择器
阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...
- CSS学习笔记02 CSS选择器
1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
- CSS 笔记之 CSS 选择器
/*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...
- 转:CSS选择器笔记
作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...
- 【转】CSS选择器笔记
作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...
- HTML 学习笔记 CSS(选择器3)
CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...
- HTML 学习笔记 CSS(选择器)
CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 h ...
随机推荐
- PageHelper的使用方法
Mybatis分页组件Mybatis-PageHelper使用流程 只需要两步即可: 1.添加依赖 <!--PageHelper--> <dependency> <gro ...
- Docker：集装箱式“运输”在软件上的实现
Docker是由PaaS提供商dotCloud在2013年年初创建的一款开源应用引擎,Docker可以自动将任何应用打包成轻量.可移植.自包涵的容器引擎.开发者构建的应用可以一次构建全平台运行,包括本 ...
- JavaScript弹出窗口方法
本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才 ...
- 初识DOM（文档对象模型）
什么是DOM 什么叫做DOM呢? • DOM的全称是Document Object Model 文档对象模型,DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. • D ...
- bzoj 2406: 矩阵 ——solution
对于100%的数据满足N,M<=200,0<=L<=R<=1000,0<=Aij<=1000 http://www.lydsy.com/JudgeOnline/pr ...
- nginx禁止ip默认参数是$remote_addr无法禁止真实ip的问题
由于网站使用了cdn所以$remote_addr获取的ip是cdn的ip,我现在先禁止某些ip访问发现无法禁止cdn传递过来的客户端的ip也就是$http_x_forwarded_for这个参数.比如 ...
- 自定义适用于手机和平板电脑的 Dynamics 365(一)：主页
当用户首次打开适用于手机和平板电脑的 Dynamics 365 时,他们将看到默认为“销售仪表板”的主页. 您可以创建新仪表板或 Web 应用程序中编辑现有仪表板,然后为移动设备启用它们,用户可以选择 ...
- sql语句查找某一列的值得最大值。
记录一下:sql语句查找某一列的值得最大值. 1.例如我要查找 表A中a列的最大值: 查找语句可以这么写: "select Max(a) a from A" 2.查找表A中a列中包 ...
- ubuntu下android开发工作环境搭建
www.bubuko.com/infodetail-655571.html 解压软件安装: sudo apt-get install unrar rar zip gzip 串口工具安装: sudo ...
- 2018-10-16 22:56:13 c language
2018-10-16 22:56:13 c language 我们把上面的步骤总结一下,可以发现一个完整的编程过程是: 编写源文件:这是编程的主要工作,我们要保证代码的语法 100% 正确,不能有任何 ...