CSS中常用的选择器
2019-07-10 本文已影响0人
追逐_chase
web.jpeg
1.标签选择器
<style>
p{
background-color: beige;
color: red;
/* 文字的修饰样式 */
text-decoration: underline;
font-size: 30px;
}
</style>
<body>
<p>这个一个段楼标签，一个选择</p>
</body>
image.png
2.类选择器
- 给标签添加一个
class属性 - 在样式中
.+类名来访问 - 同一个标签 可以
有多个不同的类，类名之间用空格隔开
<style>
.demo{
color: red;
}
.big{
font-size: 30px;
}
.fx1 {
/* 文字的修饰样式 */
text-decoration: underline;
}
</style>
<body>
<p class="demo big">这个一个段楼标签，一个选择</p>
<p class="fx1 " >这是一个测试</p>
<p class="big fx1">哈哈 你好</p>
</body>
image.png
3.id选择器
- 在一个html页面中
不可以有相同的Id名 - id名的取名规范
- 只能以
字母，数字，下划线 - 必须以
字母开头 - 不能和标签同名
- 只能以
<style type="text/css">
#hezi{
background: aqua;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="hezi"></div>
</body>
id选择器.jpg
4. 后代选择器
- 后代选择和在其他的选择之间
用 空格 隔开 - 比如
.houdai p表示类选择器houdai所有的p
.houdai p{
background-color: bisque;
font-size: 50px;
color: red;
}
<div class="houdai">
<ul>
<li>
<p>后台选择器的测试</p>
</li>
</ul>
</div>
后代.png
5.交集选择器
交集.png
- 交集选择器满足2个条件（如上图所示）
- 必须是h3标签
- 必须是 special标签
- 交集选择器
没有空格
h3.special {
background-color: bisque;
color: red;
}
<div>
<h3 class="special">交集选择器</h3>
<h3 class="special">交集选择器</h3>
<h3>交集选择器</h3>
<h3>交集选择器</h3>
<h3>交集选择器</h3>
</div>
6.并集选择器
- 不相关的标签用
逗号隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
h3,li{
color: red;
}
</style>
</head>
<body>
<div>
<h3>这是一个标题</h3>
<p>是一个段落</p>
<ul>
<li>这是个列表</li>
</ul>
</div>
</body>
</html>
7.通配符选择器
-
用 * 表示所有的元素
-
缺点：效率不高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<div>
<h3>这是一个标题</h3>
<p>是一个段落</p>
<ul>
<li>这是个列表</li>
</ul>
</div>
</body>
</ht
8.伪类选择器
8.1 链接伪类选择器 主要针对于 a标签(其中 link 和 visited只有在a上才有效果)
-
a:link设置元素没有被访问过的样式-
link:没有被访问过，如果已经点击一次那么这个伪类在样式中将不会在显示
-
-
a:visited设置元素被访问过的样式-
visited访问过的，如果这个元素被点击一次，那么将来这个伪类一直会显示这个样式，之针对color， background-color, border-color有效
-
-
a:hover设置鼠标悬停时元素的样式-
hover鼠标悬停，如果鼠标悬停在这个伪类的时候，对应的元素会显示这个样式
-
-
a:active设置鼠标点击时的样式-
active:激活，如果鼠标点击这个元素，元素会显示这个伪类中设置样式
-
注意：伪类显示是有顺序的，必须是按照上面的顺序类 lv-ha
link - visited - hover - active
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
.pp{
text-decoration: none;
font-size: 30px;
}
a:link {
color: red;
}
a:visited{
color: purple;
}
a:hover {
color: yellow;
}
a:active{
color: green;
}
</style>
</head>
<body>
<!--伪类-->
<div>
<a class="pp" href="#">这是不是伪类</a>
</div>
</body>
</html>
Untitled.gif
8.2 结构伪类选择器(CSS3 有兼容性)
-
:first-child:（首个子对象）相对于父级参考第一个子元素 -
:last-child:选取属于父级元素的最后一个子元素 -
:nth-child(n):匹配属于其父元素的第N个字元素-
:nth-child(even)选择偶数个 隔行变色 -
:nth-child(odd)选择奇数个 - 注意：N可以是公式 2n-1 2n+1 3n ...
-
-
:first-of-type相对于父级做参考特定类型(你指定的)的一个子元素 -
匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
<html>
<head>
<style type="text/css">
p:first-child I {
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
9.属性选择器
- 选取某些带特有属性的标签
-
标签名[属性]比如:a[title]选取a标签里面带有title属性的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>颜色格式</title>
<style>
a[title]{
color: red;
}
</style>
</head>
<body>
<a href="#" title="baidu">百度</a>
<a href="#" title="xinlang">新浪</a>
<a href="#">搜狐</a>
<a href="#">掠食龙</a>
<a href="#">土豆</a>
</body>
</html>
image.png
-
标签名[属性='value']选取带有指定属性和值的元素
<style>
/* 属性等于某个值 */
input[type=text]{
color: aqua;
}
</style>
<input type="text" value="文本输入框">
<input type="text" value="测试框">
属性选择指定属性的值
<style>
/* 属性选择器 选中带有title属性的标签 */
a[title]{
color: red;
}
/* 属性等于某个值 */
input[type=text]{
color: aqua;
}
/* 表示font开头的 选择器 */
div[class^=font]{
color: yellowgreen;
}
/* 以sub结尾的 选择器 */
div[class$=sub]{
color: rebeccapurple;
}
/* 包含sub的选择器 */
div[class*=sub]{
color: green;
}
</style>
<body>
<!-- 属性选择器 -->
<a href="#" title="这是百度">百度</a>
<a href="#" title="这是新浪">新浪</a>
<a href="#">网易</a>
<a href="#">优酷</a>
<a href="#">土豆</a>
<input type="text" value="文本输入框">
<input type="text" value="测试框">
<div class="font12">font12</div>
<div class="font23">font23</div>
<div class="font34">font34</div>
<div class="aafont">aafont</div>
<div class="aasub">aasub</div>
<div class="bsub">bsub</div>
<div class="csub">csub</div>
</body>
image.png
10. 伪元素选择器
-
E::first-letter文本的第一个单词或字 -
E::first-line文本第一行 -
E::selection可改变选中文本的样式
<style>
p::first-letter{
color: red;
}
p::first-line{
font-size: 17px;
font-weight: bold;
}
p::selection{
background-color: pink;
}
</style>
<p>新华社香港11月13日电（记者丁梓懿 郭鑫 朱宇轩）国家主席习近平12日会见香港澳门各界庆祝国家改革开放40周年访问团并发表重要讲话，在港澳引起热烈反响。两地各界人士及媒体舆论普遍认为，讲话将对港澳本地未来发展和更好融入国家发展大局产生重大引领和促进作用，两地应切实发挥所长，贡献国家所需，从国家发展中获得广阔空间和源源不断的动力。</p>
image.png
-
E::before和E::after在E元素内部的开始位置和结束位置 创建一个元素，该元素为行内元素，要结合content使用 （常用）
<style>
div {
height: 200px;
width: 200px;
background-color: gray;
}
div::before {
content: "开始";
color: red;
}
div::after {
content:"结束";
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div> 伪元素 </div>
image.png
兄弟选择器
-
+加号选择器 选择相邻的并且在自己后面的一个兄弟
image.png
image.png
image.png
-
~选择器器，是选择自身后面 所有的选择器
image.png
