11-1 css属性选择器
一 基础选择器
标签选择器：选择的标签的‘共性’，而不是特性
div{}、ul{}、ol{}、form{}
类选择器：.box{}
id选择器：#box{} 只能选择器的特性，主要是为了js
*通配符选择器：重置样式
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
/*#标签选择器*/
p{
color: red;
}
/*类选择器*/
.c1{
color:green;
}
/*id选择器*/
#d2{
color: yellow; }
</style>
</head>
<body>
<div>div标签</div>
<div id="d2">div标签2</div>
<p class="c1">p标签</p>
<span class="c1">我是span标签</span>
<span>我是span2号</span> </body>
</html>
二 高级选择器
1 后代选择器 子带选择器（儿子选择器） 毗邻选择器 弟弟选择器
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*后代选择器(儿子，孙子，子子孙孙)*/
div a{
color: red;
}
/*儿子选择器*/
div>a{
color:blue
}
/*毗邻选择器，就是a和span紧挨着*/
a+span{
color:yellow
}
/*弟弟选择器,相当于这个标签下面的所有标签都生效*/
a~span{
color:aqua;
}
</style>
</head>
<body>
<div>
<div>
<p>
<a>我是孙子p标签</a>
</p>
</div>
<a>我是儿子p标签</a>
<span>我是span1号</span>
<span>我是span2号</span> </div> </body>
</html>
2 交集选择器
交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器
form input.active{
width:200px;
}
3 伪类选择器
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*去除超链接的下划线*/
a{
text-decoration:none;
}
/*鼠标放到超链接上线显示的样式*/
a:hover{
color: red; } /*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px; }
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content: 'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p::after{ /*解决浮动带来的问题*/
content:'.';
display: block;
/*width: 100px;
height: 100px;
background-color: red;*/
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<p>我是p标签1</p>
<a href="http://www.baidu.com">百度一下</a> </body>
</html>
三 样式权重问题
1 行内的样式>内接样式>外接
例子：
<!--外接式和导入式只能同时存在一个-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<!--文件类型内接式-->
<style type="text/css">
p{
color: green;
width: 100px;
height: 100px;
}
</style>
<!--外接式，不用写style-->
<link rel="stylesheet" href="./css/index.css">
<!--导入式-->
<style type="text/css" media="screen">
@import url('./css/index.css'); </style>
</head>
<body>
<div style="color:red;">
我是一个div
</div>
<p>段落</p>
<a href="#">百度</a> </body>
</html>
2 权重问题比较
100>010>001
id>类>标签
例子：
<!--优先级大小-->
<!--id class 标签 三者依次从左到右的个数，那个左边的数字大，那个就会生效，所以pa生效-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!--下面这个是把默认的样式重置-->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/reset-css@4.0.1/reset.css">
<style type="text/css" media="screen">
/*1 0 0*/
#pa{
color: yellow; }
/*0 1 0*/
.app{
color:red;
}
/*0 0 1*/
p{
color: blue;
} </style>
</head>
<body>
<div id="box">
<div>
<div>
<div class="child">
<p id="pa" class="app">猜猜我是什么颜色</p> </div>
</div>
</div> </div>
<p>段落</p> </body>
</html>
四 样式继承问题
继承来的属性权重为0，如果权重都为0，谁描述的近谁优先，就是写的越详细越优先
继承和权重
记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height:100px;
background-color: green;
color:red;
font-size: 20px;
text-align:center;
line-height: 100px;
/*设置行高可以让文字居中显示*/
}
</style>
</head>
<body>
<div>
<p>德国</p>
</div> </body>
</html>
11-1 css属性选择器的更多相关文章
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- CSS：CSS 属性 选择器
ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...
- CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...
- CSS属性选择器温故-4
1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...
- CSS 属性选择器(八)
一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...
- CSS笔记（二）CSS属性选择器
对带有指定属性的HTML元素设置样式. 参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp 选择器 描述 [att ...
- 前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
- 使用这些 CSS 属性选择器来提高前端开发效率
属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...
- css 属性选择器
css2的属性选择器 1.[class~="flower"]:选中有flower的class class="flower ss" class="ss ...
随机推荐
- iview中table的render()函数
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- 数组的方法之(Array.prototype.reduce() 方法)
reduce函数 reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值. 对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次 ...
- PHP获取搜索引擎关键词
有时候我们需要知道用户通过哪个搜索引擎,通过拿个关键词访问我们页面,当然js也可以实现,这里介绍下php的实现代码,包含(百度.谷歌.雅虎.搜狗.搜搜.必应.有道)几大搜索引擎的获取方法. //获取来 ...
- js 禁止复制粘贴
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
- vmware 与Device/Credential Guard不兼容
解决办法 关闭hv 重启就完了
- 手残,盘符前边多打一个空格导致的message d:\WEB_APP_QuChongFu\file\五月.xlsx (文件名、目录名或卷标语法不正确。)
尝试读取并解析一个excel文件,一直提示错误 但是有个原始数据,导入就没问题 对比了一下,好像也就是字母d的大小写有区别 我先把大写的D改成小写的试试,如果是大小写问题,那应该抛出异常 好吧,好像并 ...
- 删除 BIRT Report Viewer
去掉首页上的标题BIRT Report Viewer方法:找到Webroot\webcontent\birt\pages\layout\FramesetFragment.jsp文件,在里面定义了标题, ...
- 洛谷P2381 圆圆舞蹈
P2381 圆圆舞蹈 题目描述 熊大妈的乃修在时针的带领下,围成了一个圆圈舞蹈,由于没有严格的教育,奶牛们之间的间隔不一致. 奶牛想知道两只最远的奶牛到底隔了多远.奶牛A到B的距离为A顺时针走和逆时针 ...
- 【cml】wosi-demo
推荐一个cml项目,https://github.com/Bowen7/wosi-demo 呃呃,运行了项目只能够说开发者好牛逼,数据处理很厉害, 这个是最后的结果,然后要进行效果查看,估计你得等明天 ...
- hdu 1045 Fire Net(二分匹配 or 暴搜)
Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...