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 ...
随机推荐
- 严格模式下顶层箭头函数this指向的是全局对象
我们知道普通函数调用,this在非严格模式下指向全局对象,在严格模式下是undefined.那箭头函数呢?我们知道,箭头函数没有自己的this,它的this是最近外层非箭头函数的this,那直接在顶层 ...
- node 和npm环境安装
node 安装 1.下载node二进制文件 [root@baolin-images#>> ~]#wget https://nodejs.org/dist/v10.16.0/node-v10 ...
- mysql8.0 安装版没有my.ini
这时候,打开 benchmark,看一下实际路径就好了
- springmvc框架通过web.xml配置404 500错误导向页
总不能用户输错了url就弹 这玩意吧? <error-page> <error-code>404</error-code> <location>/WEB ...
- 再问你Java内存模型的时候别再给我讲堆栈方法区
在介绍Java内存模型之前,先来看一下到底什么是计算机内存模型,然后再来看Java内存模型在计算机内存模型的基础上做了哪些事情.要说计算机的内存模型,就要说一下一段古老的历史,看一下为什么要有内存模型 ...
- 计蒜客 Prefix Free Code(字典树+树状数组)
Consider n initial strings of lower case letters, where no initial string is a prefix of any other i ...
- linux常用目录介绍
bin:全称binary,含义是二进制,该目录中存放的都是一些二进制文件,这些文件都是可以被运行的. dev:该目录主要存放的是外接设备,例如:光盘等.注意:在其中的设备是不能被直接使用的,需要挂载( ...
- meta标签、利用媒体查询 link不同的CSS文件
利用媒体查询 link不同的CSS文件:<link rel="stylesheet" media="screen and (min-width:1px) and ( ...
- GBRT(GBDT)(MART)(Tree Net)(Tree link)
源于博客 GBRT(梯度提升回归树)有好多名字,标题全是它的别名. 它是一种迭代的回归树算法,由多棵回归树组成,所有树的结论累加起来得到最终结果.在被提出之初与SVM一起被认为是泛化能力较强的算法. ...
- MySQL安装后设置root 密码
Mysql安装完成后初始化root 密码为空,直接回车 使用命令行: mysqladmin -u root password "123456" 来设置root密码.这里我设置的密码 ...