css简单学习属性3---css属性选择器
1：通配符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id*=div] {
color: lime;
}
/*^首字符*/
[id^=div] {
color: darkblue;
}
/*$结束字符*/
[id$=ym] {
color: crimson;
}
</style>
</head>
<body>
<div id="mydiv1">示例文本1</div>
<div id="div2">示例文本2</div>
<div id="div3">示例文本3</div>
<div id="div4">示例文本4</div>
<div id="my">示例文本5</div>
</body>
</html>
2:UI伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 鼠标经过有效 */
input[type="text"]:hover{
background-color: darkviolet;
/* 鼠标焦点有效 */
input[type="text"]:focus{
background-color: darkviolet;
}
</style>
</head>
<body>
<input type="text" name="name">
<input type="text" name="name">
</body>
</html>
3:结合元素选择器:
例如: a.class{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a.div{
color: red;
}
</style>
</head>
<body>
<div class="div">
wowowotest
</div>
/* 只对下面有效 */
<a class="div"> wowowotest</a>
</body>
</html>
4:多类选择器
例如: .class.class{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
color: blue;
}
.div2{
font-size: 30px;
}
.div1.div2{
font-style: italic;
}
</style>
</head>
<body>
<div class="div1">wowowo test</div>
<div class="div2">wowowo test</div>
/* 拥有上面所有属性 */
<div class="div1 div2">wowowo test</div>
</body>
</html>
5:属性选择器
例如: [title]{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[title]{
color: aqua;
}
[href]{
font-size: 30px;
} [title="p2"]{
color:red;
}
</style>
</head>
<body>
<p title="">hello</p>
<p title="p2">hello2</p>
/* <href=""未带参数，如果带参数。<style>必须一致>*/
<a href="">wowowo</a>
</body>
</html>
A：在css中定义图片相对路径
#primary-nav {
//相对路径
background: url(../images/alert-overlay.png) repeat-x;
height: 35px;
font-size: 10px;
color: #fff;
line-height: 34px;
background-color: #;
margin: auto;
max-width: 1128px;
font-weight: bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
box-shadow: 1px 2px 5px 1px #;
}
B.对应文件结构
C:下面display为什么要加important
.main-navigation a {
color: #5e5e5e;
//为什么要加!important
padding: 15px!important;
}
加!important就表示提升这个属性的优先级 比如说你如果在其它地方又写了一个display:inline之类的 还会按照你这里的block进行解释
另外IE6是不认!important的 可以利用这个特性来给不同的浏览器做不同的css设置
D.css防止中文乱码
E.<div style="clear:both;"></div>
<div style="clear:both"></div>
clear:both该属性的值指出了不允许有浮动对象的边。
通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。
css简单学习属性3---css属性选择器的更多相关文章
- css布局学习笔记之position属性
position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...
- css简单学习属性
1:内联元素和块级元素 1).块级元素,默认是:内联元素可以变成块级元素,块级元素可以变成内联元素. <!DOCTYPE html> <html lang="en&qu ...
- css简单学习属性2---背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Css的学习之旅-css的选择器（2）
1.最常用的是派生选择器:eg:ul li{ color:red} 2.id选择器:eg:#id{color:red} 3.类选择器:设置标签的class = "",类似id.用点 ...
- HTML&CSS基础学习笔记1.33-元素选择器
元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...
- CSS入门级学习
css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...
- HTML和css简单日常总结
今天主要学习了两个部分:第一部分html:在w3school学习了一些标签的使用和一些属性和方法,例如一些标签<a>,<h1><h6><from>< ...
- [Codecademy] HTML&CSS 第七课：CSS: An Overview
本文出自 http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
随机推荐
- Codeforces Round #525 (Div. 2) D. Ehab and another another xor problem（交互题 异或）
题目 题意: 0≤a,b<2^30, 最多猜62次. 交互题,题目设定好a,b的值,要你去猜.要你通过输入 c d : 如果 a^c < b^d ,会反馈 -1 : 如果 a^c = b^ ...
- 河南省acm第九届省赛--《表达式求值》--栈和后缀表达式的变形--手速题
表达式求值 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 假设表达式定义为:1. 一个十进制的正整数 X 是一个表达式.2. 如果 X 和 Y 是 表达式,则 X+Y, ...
- P1313 计算系数[二项式定理]
题目描述 给定一个多项式\((by+ax)^k\),请求出多项式展开后\(x^n \times y^m\)项的系数. 解析 一道水题,二项式定理搞定.注意递推组合数时对其取模. 参考代码 #inclu ...
- CentOs 6语言改成中文
1.在root权限下 切换到root下:su - root 查看当前语言环境:locale -a (注意中间有空格) 如果看到 zh_CN.UTF-8(这个是中文简体)说明你的系统支持中文语言: 没 ...
- 【线上监控】日志上报bug处理方式总结
说明:若直接在网站看觉得字体太小,可以下载下来后放大看会更加清晰.不会失真. 目前总结到此,后期有改动,再次补充与总结
- 对比AngularJS/jQueryUI/Extjs：没有一个框架是万能的
AngularJS不能做什么?对比Angular/JSjQueryUI/Extjs 框架就好比兵器,你得明白你手里拿的是屠龙刀还是倚天剑,刀法主要是砍,剑法主要是刺.对于那些职业喷子和脑残粉,小僧送你 ...
- 2015浙工大校赛-Problem C: 三角—— 费马大定理+勾股数
题目 有一个直角三角形三边为 A,B,C 三个整数.已知 C 为最长边长,求一组B,C,使得B和C最接近. (题目链接) 分析 打表找规律. 或者直接一点的枚举 $C-B$ 的值.(既然枚举 B 不现 ...
- mongodb 导入json文件遇到的坑
使用mongoimport命令导入外部json文件时,发现一直报错 报错结果如下: json数据格式完全正确如下: 经过再三确认格式最终找到解决方案,原来用cmd导入数据时json { }包含的数据 ...
- 页面打开excel
1. File => Stream / MemoryStream FileStream stream = new FileStream(path, FileMode.Open, FileAcce ...
- LibreOJ #116. 有源汇有上下界最大流
二次联通门 : LibreOJ #116. 有源汇有上下界最大流 /* LibreOJ #116. 有源汇有上下界最大流 板子题 我也就会写写板子题了.. 写个板子第一个点还死活过不去... 只能打个 ...