CSS选择器(重点)
1, 作用
规范了页面中哪些元素能够使用声明好的样式
目的：为了匹配页面的元素
2, 选择器详解
1， 元素选择器
特点：由标记名称作为选择器，主要匹配页面中指定标记所对应的所有元素
div标记对应所有的div； p标记标记所有的p标记
语法：
标记{
样式声明；
}
text-decoration:none; 取消超链接的下划线
2， 类选择器
特点：允许被任意元素引用的选择器
语法:
1,声明
.类名{样式声明}
类名：数字、字母、下划线、"-" ，数字不开头
eg:
div{...} /*元素选择器*/
.div{...} /*类选择器*/
2, 应用
<标记 class="类名"> (应用的时候不加.)
特殊用法：
1， 分类选择器的定义方式
允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素不同样式的细分控制；
语法：
元素选择器.类选择器{..}
eg:
.important{
类选择器，匹配所有class为important的类选择器
}
div{
元素选择器，匹配所有的div元素
}
div.important{
匹配所有class为important的div元素;取交集
}
2， 多类选择器的引用方式
允许让一个元素同时应用多个类选择器，多个类选择器之间空格隔开；
<标记 class="c1 c2 c3">
3， id选择器--使用频繁
1， ID的作用
在HTML中，每个元素都允许设置一个id属性，主要用于表示该元素在网页中的唯一标识；
便于在JS或CSS中引用；
ID不可重复，ID 不是纯数字
2， ID选择器
为了匹配页面中指定ID值的元素
语法：
#ID值{...}
4， 群组选择器
1，作用
定义多个选择器共有的样式，将多个选择器加入到一个组中；
定义方式是以"," 隔开的选择器列表
2，语法
选择器1，选选择器2，选择器3...{....}
ex:
#main,p,div.span,.redColor{
color:red;
}
5， 后代选择器
1，作用：
依托于元素的后代关系来匹配元素（不限制继承层级）
2，语法：
选择器1 选择器2{...}
#wang span{
匹配ID为wang的元素中，所有的span元素
}
6， 子代选择器
1，作用
依托于元素的自带关系来匹配元素
只有一层层级关系
2， 语法
选择器1>选择器2{...}
#wang>span{
id为wang的元素中，第一级span
}
7, 伪类选择器
1， 作用
匹配元素不同状态的选择器
ex: 超链接a 元素， 具备四个状态
状态1： 链接未被访问时的状态(浏览器历史记录中未被访问时的状态)
文本字体为蓝色，带下划线
状态2： 鼠标悬停在元素上的状态
鼠标状态变为"小手"
状态3： 当元素被激活时（鼠标点击时）
文本变为红色
状态4： 当访问后
文本颜色变为紫色
2， 语法规范
:伪类状态
通常会配合其他元素一起使用；
选择器:伪类状态{....}
选择器：匹配元素
伪类状态：匹配状态
1，链接伪类--只针对超链接
1, :link 匹配超链接未被访问时的状态
2, :visited 匹配超链接被访问后的状态
2， 动态伪类
1， :hover 匹配悬停在元素上面时的状态
2， :activie 匹配元素被激活时的状态
3， :focus
匹配获取焦点时的状态
(文本框和密码框使用居多)
3, 选择器优先级
当多个选择器能够同时应用到一个元素上时，并且样式发生冲突的话，
要按照不同选择器的优先级应用样式；
查看选择器优先级取决于"权值"，数字越大，权值越高
选择器 权值
元素选择器 1
类/伪类 10
id选择器 100
内联方式 1000
如果是复杂选择器（后代，子代，分类）的计算方式是蒋选择器的权值累加；
eg:
#s1{ color:green;font-size:40px;} 100
#d1 span{color:red;} 101
.pp span{color:blue;} 101
#d1 .pp #s1{color:pink;} 100+10+100=210
#d1>.pp>#s1{color:black;} 210
#d1>.pp>span{color:yellow;} 100+10+1=111
#d1 .pp span{color:pink;} 111
#d1 #p1 #s1{color:purple;} 100+100+100=300
HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css1.css">
</head>
<body>
<div class="div_demo">
Beautiful is better than ugly <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, assumenda, autem fugit odit totam nobis voluptas optio pariatur veritatis alias aperiam dolorum itaque deleniti molestiae tempore vero est facere ex dolores omnis provident consequatur nemo et placeat aliquid voluptates quas illum facilis soluta nam saepe error dolore quo! Laboriosam, nostrum, fuga, veritatis quas error sint nisi qui rerum quo illo ex numquam cumque. Architecto, rem, hic, alias ducimus labore sit officiis qui ratione doloribus maiores cum temporibus rerum ea nam dolore ipsum adipisci totam repudiandae aut non recusandae nihil est blanditiis quis odit odio illo. Explicabo, commodi illum laudantium qui!
</div>
<p class="div_demo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, optio, nihil explicabo cum modi sunt aliquid delectus deleniti aperiam animi eligendi quae voluptates quod error libero. Repellat, quidem esse aut.
</p>
<span class="example1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, qui illo explicabo rerum obcaecati pariatur eius ad beatae voluptatibus possimus accusantium fugit recusandae unde fuga necessitatibus consequatur id nihil iusto magni nam rem consectetur ea maiores dolore vel doloremque voluptas. Culpa, optio sed voluptatum impedit tenetur molestias aut error harum praesentium eaque. Aliquam, a, quibusdam, earum corporis labore cum laudantium rerum consequatur consequuntur alias error voluptatem explicabo nobis cumque illo! Iste, reprehenderit modi voluptates illum similique numquam!
</span>
<h1 class="example1">LONG LONG AGO.
</h1>
<!--多类选择器的应用-->
<div class="div_demo demo2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui id placeat enim quis officiis nostrum tempore. Error, optio, id quasi nihil sint deserunt temporibus in magni harum est tenetur porro.
</div>
<h3 id="introduction">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, consequatur.
</h3>
<div id="lulijuan">
<span>This is the most nice girl that can't be forgot.</span>
</div>
<div id="wang">
<span>
这是第一代span
<span><br>
这是第二代span；
<span>
这是第三代span;
</span>
</span>
</span>
<div>
<span>
这是另一个span
</span>
</div>
<p>
<span>这是孙级span</span>
</p>
</div>
</body>
</html>
CSS代码
/*CSS注释：控制页面中所有div样式*/
/*作用： 让所有的div和a标记全都使用下面样式*/
div{
font-size:18px;
}
a{
font-size:40px;
}
a:link{
color:green;
font-size:30px;
}
a:visited{
color:red;
font-size:18px;
}
a:hover{
color:black;
font-size:70px;
text-decoration:none;
}
a:active{
color:yellow;
font-size:50px;
}
#uname{
font-size:40px;
font-style:italic;
color: grey;
}
/*当uname被激活的时候将文本变为正体字*/
#uname:active{
color:pink;
font-style:normal;
}
/*当uname获取焦点的时候，将文本变为绿色*/
#uname:focus{
color:red;
}
/*类选择器*/
/*谁class引用我，我就应用到谁身上*/
.div_demo{
font-size:28px;
background-color:silver;
font-style:italic;
}
/*类选择器*/
.example1{
background-color:red;
}
/*分类选择器，对所有class为div_demo的class元素进行字体加粗*/
div.div_demo{
font-weight:bold;
}
.demo2{
text-decoration:underline;
}
.demo3{
text-decoration:none;
}
/*ID选择器*/
#introduction{
color:red;
}
/*群组选择器*/
#introduction,.demo2,.demo3,.div_demo,.example1{
color:green;
}
lul
/*后代选择器:id为lulijuan，下的所有span元素*/
#lulijuan span{
color:blue;
font-size:28px;
}
#wang>span{
color:orange;
font-size:28px;
text-decoration:underline;
}
929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
