笔记8--CSS基础知识
2017-07-17 20:59
405 查看
3.选择器
所谓选择器,值得是选择施加样式目标的方式。3.1元素选择器
用标签名作为选择器,选中所有相应的元素。<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div{
font:24px red;
}
p{
font:32px blue;
}
</style>
</head>
3.2 ID选择器
顾名思义,是根据id来选择元素,其样式定义形式为#name{
}
其代码为:
<style
type="text/css">
div{
width:
200px;
height:
200px;
}
#div1{
background:red;
}
#div2{
background:blue;
}
</style>
其效果为:
3.3类选择器
根据class属性来选择元素,其定义形式为:.className{
....
}
代码为:
<style
type="text/css">
.even{
width:
200px;
height:
200px;
background:red;
}
.odd{
width:
200px;
height:
200px;
background:blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
显示结果为:
从结果上可以看出:odd(...)定义的样式会施加到所有class=“odd”的元素上,比如上例中的第一个和第三个div。
3.4属性选择器
(1)根据某个属性的特效(比如有无、值等)来选择代码如下:<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title]{
width:
100px;
height:
50px;
background-color: red;
border:
1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
效果如下:
从结果可以看出,所有具有title属性的元素都应用了红色背景色的样式。
(2)根据属性的值来选择
代码如下:
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title="div2"]{
width:
100px;
height:
50px;
background-color: red;
border:
1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
结果如下:
从结果可以看出,只有第二个div应用了红色背景的样式,因为只有第二个div的title属性等于div2
title~=:选中属性值包含指定完整单词的元素
代码如下:
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title~="div"]{
width:
100px;
height:
50px;
background-color: red;
border:
1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
</html>
结果如下:
代码如下:
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title^="div"]{
width:
100px;
height:
50px;
background-color: red;
border:
1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
结果如下:
title^=“div”选中title以属性值div开头的元素
代码如下:
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title$="div"]{
width:
100px;
height:
50px;
background-color: red;
border:
1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
结果如下:
title$=“div”选中title以属性值div结尾的元素。
代码如下:
head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title*="div"]{
width:
100px;
height:
50px;
background-color: red;
border:
1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
结果如下:
Title*=“div”选中title属性值包含div的元素
3.5关系选择器
(1)后代选择器:可以选择一个元素的后代元素,这个后代包括儿子、孙子....写法:E F
案例:
.content
p{
font-size:
30px;
}
代码如下:
<body>
<h1>1111111</h1>
<div class="content">
<p>......<span><a
href="http://www.baidu.com">重庆</a></span>xxxx<a
href="http://www.baidu.com">35°C</a>
以上高温</p>
</div>
<a href="http://www.baidu.com">点开原文</a>
</body>
(2)子元素选择器:通过某一个元素选中的直接后代。
写法:E > F(“>”英文状态下的输入)
案例:
.content
> a{
font-size:
30px;
}
代码:
<body>
<h1>1111111</h1>
<div class="content">
<p>......<span><a
href="http://www.baidu.com">重庆</a></span>xxxx<a
href="http://www.baidu.com">35°C</a>
以上高温</p>
</div>
<a href="http://www.baidu.com">点开原文</a>
</body>
3.6并选择器
将相同的样示放在一起,类名直接用英文逗号分隔。写法:E,F(逗号为英文逗号)
.div1,.div2{
position: relative;
width:
100px;
height:
100px;
}
代码: <style
type="text/css">
.div1,.div2{
position: relative;
width:
100px;
height:
100px;
}
.div1{
border:
1px solid yellow;
}
.div2{
border:
1px solid blue;
}
</style>
</head>
<body>
<div class="div1">我是div1</div>
<div class="div2">我是div2</div>
</body>
3.7通配符选择器
通配符选择器可以选中页面所有的标签写法:*{
}
案例:
*{
padding:
0;
margin:
0;
}
</style>
</head>
<body>
<h1>1111111</h1>
<div class="content">
<p>......<span><a
href="http://www.baidu.com">重庆</a></span>xxxx<a
href="http://www.baidu.com">35°C</a>
以上高温</p>
</div>
<a href="http://www.baidu.com">点开原文</a>
</body>
效果:
注意:通配符选择器对页面所有的元素都会设置对应的样式,而且实际上,有很多元素默认是不带任何样式的。
3.8兄弟选择器
写法1:E+F选中最近的第一个“弟弟”元素。不选中自己。
.go-to
+ a{
font-size:
30px;
}
代码:
<body>
<h1>中央1111111</h1>
<div class="concent">
<a href="http://www.baidu.com">前往现场4</a>
<a class="go-to"
href="http://www.baidu.com">前往现场1</a>
<a href="http://www.baidu.com">前往现场2</a>
<a href="http://www.baidu.com">前往现场3</a>
</div>
写法2:E~F
选中所有的“弟弟”元素,不选中自己。
3.9伪类、伪元素选择器
1、伪类选择器:条件1、根据元素不同的状态,自动选择不同的样式。
或条件2、直接添加一个class,给这个class设定特殊的样式。
li:first-child
a:hover:鼠标滑过的时候添加样式
a:active:被激活的时候添加样式,点击那一时刻(按住鼠标左键不放)
a:link:链接地址未被访问时候添加的状态。必须设置href属性
a:visited:链接地址点击之后添加的颜色。必须设置href属性
input:fouce:拥有键盘输入获取焦点时候添加的样式
2、伪元素选择器:
(2.1)需要设置特殊效果的内容放到一个元素(标签)里面span
(2.2)再添加一个class,对class设置特殊格式。
E:first-line
E:first-letter
E:after
E:before
代码:
li:after{
content:"。";
color:blue;
}
相关文章推荐
- CSS学习笔记:基础知识
- WEB标准布局(DIV+CSS)学习笔记(一)-- CSS样式基础知识
- css基础知识学习笔记
- css知识笔记(一)——基础知识、选择器、元素分类
- 笔记6--CSS基础知识
- 基础知识--Css学习笔记(一)
- 〖前端开发〗HTML/CSS基础知识学习笔记
- css和javascript的一些笔记(二) js基础知识
- CSS基础知识-选择器(传智播客笔记)
- 笔记4--CSS基础知识
- 笔记5--CSS基础知识
- HTML/CSS基础知识学习笔记
- python之 前端HTML/CSS基础知识学习笔记
- python学习笔记-Day14 -css基础知识-part2
- css和javascript的一些笔记(四) xml语言基础知识
- python之 前端HTML/CSS基础知识学习笔记
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
- 笔记7--CSS基础知识
- HTML学习笔记之CSS基础知识
- [置顶]学习笔记:HTML+CSS 基础知识