css --- 选择器

标签选择器

// 标签选择器是最简单的选择器, 它的命名只要和对应的HTML标签相同即可
h1 {font-size: 30px;color: #333;
}

类选择器

// 类选择器也称为class选择器,它的语法非常简单,在class名称前面加上一个"."符号
<div class="red content"></div>
.red {background:red,
}
.content {height: 100px;width: 100%;
}

id选择器

// id选择器的语法是一个"#"号加上id的名称,例如:
<div id="user_123"></div>#user_123{width: 120px;line-height: 30px;height: 30px;
}

通配符选择器

// 通配符的意思是用一个符号来代替某些字符,例如在Word中要搜索以com开头的所有单词,可以用"com*"来做搜索关键词
* {color:red;}  /* 这个声明等价于列出文档中所有元素的一个分组选择器 */
body {color: red
}
html {color: red
}

子元素选择器

// 子元素选择器用于表示某些特定HTML嵌套关系时的样式展现,其语法关键词是一个">"符号.
<li><a href="#">www.baidu.com</a></li>
<li><div><a href="#">www.baidu.com</a></div></li>// CSS
li > a{color: blue;
}

后代元素选择器

// 后代元素选择器类似于子元素选择器, 只不过它的要求不那么严格.它的语法关键词是一个空格
// HTML 代码:
<li><a href="#">www.baidu.com</a></li>
<li><div><a href="#">www.baidu.com</a></div></li>// CSS 代码
li a{color: blue;
}

相邻元素选择器

// 相邻元素选择器用于选取和某个元素相邻的同级元素,其语法关键词是一个"+"符号,
// HTML 代码
<div class="content"><h1>测试</h1><p>测试内容</p>
</div>// CSS 代码:
h1 + p{font-size: 15px;
}

属性选择器

[title] {color: red;
}                      /* 所有拥有title属性的元素的文字颜色设为红色 */a[href][title] {color: red;
}                      /* 同时拥有href 和 title 属性的a标签的文字颜色设为红色 */a[href="http://www.baidu.com"][title="百度"] {color: red;
}                      /* 只有href=://www.baidu.com 且 title="百度"的链接(<a>)文字才会设置为红色还可以使用通配符来进行模糊匹配:
a[src^="https"]   /* 选择其src 属性值以"https"开头的每个<a>元素  */
a[src$=".pdf"]    /* 选择其src 属性值以".pdf"结尾的所有<a>元素   */
a[src*="abc"]     /* 选择其src 属性中包含"abc"字串的每个<a>元素  */

组选择器

// 如果要对多个元素定义同样的样式,则可以用组选择器来缩减重复代码. 组选择器的语法关键字是一个","
h1, h2, h3, h4, h5, h6{font-wight:bold;
}
表示从h1~h6 都采用加粗字体

复合选择器

// 如果说组选择器相当于一种并集, 或者常说的"或" (||) 关系的话,那么复合选择器
就表示 "与" (&) 的关系。
p.test{color: red;
}<p class="test">hehe</p>
<div>hehe</div>
<div class="test">hehe</div>
<p>hehe</p>

参考《CSS高效开发实战》 P25~P33

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++标准输入流、输出流以及文件流

1、流的控制 iomanip 在使用格式化I/O时应包含此头文件。 stdiostream 用于混合使用C和C 的I/O机制时&#xff0c;例如想将C程序转变为C程序 2、类继承关系 ios是抽象基类&#xff0c;由它派生出istream类和ostream类&#xff0c; iostream类支持输入输出操作&…

Hadoop学习笔记—8.Combiner与自定义Combiner

一、Combiner的出现背景 1.1 回顾Map阶段五大步骤 在第四篇博文《初识MapReduce》中&#xff0c;我们认识了MapReduce的八大步凑&#xff0c;其中在Map阶段总共五个步骤&#xff0c;如下图所示&#xff1a; 其中&#xff0c;step1.5是一个可选步骤&#xff0c;它就是我们今天需…

6-12mysql库的操作

1&#xff0c;mysql库的各种分类: nformation_schema&#xff1a; 虚拟库&#xff0c;不占用磁盘空间&#xff0c;存储的是数据库启动后的一些参数&#xff0c;如用户表信息、列信息、权限信息、字符信息等.  performance_schema&#xff1a; MySQL 5.5开始新增一个数据库&am…

css --- 行内框和内容区

css规定font-size的大小实际上是字体的高度 可以将内容区理解为font-size的大小. 行内高可以理解为 ( (line-height) - (font-size) ) /2 然后再font-size 的上下加上前面的值 看下面的例子 <p style"font-size:12px;line-height:12px;">this is text, <em&…

DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0(ver 3.0.7Beta) 增加多语言!

英文名&#xff1a;DotNetTextBox V3.0 WYSWYG Web Control For Asp.Net2.0 中文名&#xff1a;DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0 类型: 免费控件(保留版权) 作者: 小宝.NET 2.0(Terry Deng) 主页&#xff1a;http://www.aspxcn.com.cn 控件演示页面: h…

phantomjs

npm 安装 phantomjs失败&#xff0c;解决办法是到http://phantomjs.org/download.html 下载需要的压缩包&#xff0c;然后放到%appData%\Local\Temp\phantomjs\下&#xff0c;重新执行npm i 转载于:https://www.cnblogs.com/tellme/p/7777626.html

js动态删除行错误

Uncaught TypeError: Failed to execute removeChild on Node: parameter 1 is not of type Node. js中出现如上错误&#xff0c;检查验证document.getElementById&#xff08;&#xff09;中的参数是否传递正确&#xff0c; 例&#xff1a; var textnumber parseInt(docume…

css --- 浮动元素与 块框/行内框重叠时的细节

块框,可以认为是块级元素(如div、h1)的内容区 内边距 行内框可以认为是行内元素(如span)的内容区 内边距 当 块级框/行内框 和一个浮动元素重叠时&#xff0c;行内框的边框、背景和内容都在幅度元素之上&#xff0c;块级框的边框和背景都在浮动元素的下面&#xff0c;但内容在…

Android 禁止Viewpager左右滑动功能

做项目要求某种情况下ViewPager不能滑动 百度后发现重写ViewPager&#xff0c;覆盖ViewPager的onInterceptTouchEvent(MotionEvent arg0)方法和onTouchEvent(MotionEvent arg0)方法&#xff0c;这两个方法的返回值都是boolean类型的&#xff0c;只需要将返回值改为false&#x…

error C1853: “Debug\BigBuffer.pch”预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反)...

<pre id"best-content-1299104064" mb-10""" style"font-size: 14px; line-height: 28px; ">该错误是因为当项目中混合了 .cpp 和 .c 文件时&#xff0c;编译器会对它们采取不同的编译方式&#xff08;主要是因为对函数声明的处理方式…

6.13的练习

#&#xff01;Usr/bin/env python # -*- coding:utf-8 -*- # Author:Alex Li 一个整数&#xff0c;它加上100后是一个完全平方数&#xff0c;再加上268又是一个完全平方数&#xff0c;请问该数是多少&#xff1f;&#xff1a;for i in range(1,1000):for j in range(1,1000):i…

npm --- 包的发布与导入

安装好NODE后,下面演示如何编写一个包,并将其发布到NPM仓库中,最后通过NPM安装回本地. 以下例子是在windows*64环境下运行的. 1.编写模块 exports.sayHello function(){return Hello World; }将上述代码保存在hello.js中 2.初始化包描述文件: 使用npm init指令,快速生成包…

账号注册的form

class RegForm(forms.ModelForm):password forms.CharField(widgetforms.PasswordInput, label密码, min_length6) # 重写默认字段re_password forms.CharField(widgetforms.PasswordInput, label确认密码, min_length6) # 新增字段class Meta:model models.UserProfile …

servlet面试常考 (转载)

编辑 删除 1、说一说Servlet生命周期&#xff08;非常重要&#xff09; Servlet生命周期包括三部分&#xff1a; 初始化&#xff1a;Web容器加载servlet&#xff0c;调用init()方法…

XPath 的使用

XPath 的使用 XPath&#xff0c;全称XML Path Language&#xff0c;即XML路径语言&#xff0c;它是一门在XML文档中查找信息的语言&#xff0c;最初用于搜寻XML文档&#xff0c;但是也同样适用于HTML文档的搜索。前面我们在解析或抽取网页信息时&#xff0c;使用的是正则表达式…

Node --- EventProxy的原理

EventProxy来自于Backbone的事件模块,Backbone的事件模块是Model、View模块的基础功能&#xff0c;在前端有广泛的使用。它在每个非all事件触发时都会触发一次all事件&#xff0c;相关代码如下: // Trigger an event, firing all bound callbacks. Callbacks are passed the /…

spring项目启动执行特定方法

1. 方法上加注解PostConstructCompantpublic class InitDemo{ PostConstruct public void init(){ //项目启动就会执行这个方法 doSomething(); }}2.xml配置init-method<bean id"InitDemo" class"com.xxx.InitDemo" scope"singleton" init-me…

WinCC归档数据报表控件

1、背景 WinCC实现报表历来是老大难&#xff0c;自带的报表功能不好使&#xff0c;又没有好用的第三方控件。虽然网上也有很多实现报表的方法&#xff0c;但是毫无例外的要求使用者具有脚本编程功底&#xff0c;HwDataReport的出现将终结这一现象。您无需一行脚本即可完成…

vue数组操作不更新视图问题

vue 观察数组的变异方法 更新视图 push&#xff08;&#xff09; pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.push({ name:css, author:lee }) 有些方法不会改变数组 filter() concat() slice() 返回新数组 需要用 新返回的数组 更新原数组 ap…

java中如何计算两个时间段的月份差

直接计算&#xff0c;先取得两个日期的年份和月份&#xff0c;月份差&#xff08;第二年份-第一年份&#xff09;*12 第二月份-第一月份转载于:https://www.cnblogs.com/pretty-guy/p/3284593.html