分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 运营维护

css选择器

发布时间：2023-09-06 01:31责任编辑：赖小花关键词：选择器

一、选择器

　　1、* 通配符选择器

　　　这个选择器是匹配页面中所有的元素，一般用来清除浏览器的默认样式.

1
*{margin:0;padding:0}

　　2、元素选择器

　　　　通过标签名来选择元素。

1
div{width:100px;height:100px;}

　　3、class选择器

　　　　　class选择器 / 类选择器 / 用class属性给元素命名，在页面中可以出现很多次，相当于人的名字。

1
2
3
4
.box{width:100px;height:100px;}
<div class="box"></div>
<p class="box"></p>

　　4、 id选择器

　　　　以id属性来命名，在页面中只能出现一次，具有唯一性，并且权重值最高，相当于一个人的身份证。

1
2
3
#box{width:100px;height:100px;}
<div id="box"></div>

　二、高级选择器 一　

　　1、E F 后代选择器

　　　　匹配到E元素下面的所有的F元素（包括子、孙），空格隔开。

1
2
3
4
5
6
7
8
div ul li {width:100px;height:100px;}<br>//匹配到div下面的所有ul，且ul的所有后代li
<div>
　　<ul>
　　　　<li></li>
　　　　<li></li>
</ul>
</div>

　　2、 E,F 多元素选择器

　　　　同时匹配到E元素和F元素，用逗号隔开。

1
2
3
4
div,#box{width:100px;height:100px;background:#000;}//同时匹配到下文中的div标签和id为box的p标签
<div></div>
<p id="box"></p>

　　3、E>F 子元素选择器

　　　　选择到E元素的直接子代F，只选择子代。

1
ul>li{width:100px;height:100px;}<br><br><ul><br>　　<li><br> 　</li><br></ul>

　　4、E+F（毗邻选择器） 相邻兄弟选择器

　　紧接在E元素后面的同级元素F，相邻兄弟选择器，有相同的父级。

　　

1
2
3
4
5
6
7
8
div+.box{width:100px;height:100px;background:pink;}//这个只能选择到下面第二行的那个p元素 最后一个不满足紧接在div元素后面这个条件
　　<div></div>
<p class="box"></p>
<p class="box"></p>
<div></div>
<p></p>
<p class="box"></p>

　　　

1
2
3
4
5
6
7
8
9
10
11
12
13
div p + p{
width:100px;
height:100px;
margin-top:2px;
background:pink;
}
　　//这个可以选择到下面除了第一个p元素外其他所有的元素。
　　<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

　　三、高级选择器 二 属性选择器

　　1、 E[attr] 匹配具有attr属性的E元素 　　　

1
2
3
4
5
6
7
8
9
div[title]{
width:100px;
height:100px;
margin-top:2px;
background:pink;
}　　//匹配到下文中的第一个和第三个div元素 因为他们含有title属性
<div title="width"></div>
<div></div>
<div title="height"></div>

　　2、E[attr=val]

　　　　匹配具有attr属性且值只为val的的E元素（注意 属性值要用引号引起来，我自己试了试好像不用括号也可以。）

1
2
3
4
5
6
7
8
div[title="height"]{
width:100px;
height:100px;
margin-top:2px;
background:pink;<br>} //匹配到下文中的第三个div元素
<div title="width"></div>
<div></div>
<div title="height"></div>

　　3、E[attr~=val]

　　　　匹配属性值为attr，并包含这个值的E元素，用于选取属性值中包含指定词汇的元素。

1
2
3
4
5
6
7
8
9
10
div[class~="c1"]{
width:100px;
height:100px;
margin-top:2px;
background:pink;
} //选择到下方第一个和第二个div元素
　　 <div class="c1"></div>
<div class="c1 c2"></div>
<div class="c2c1"></div>

　　4、E[attr|=val]

　　　　匹配所有属性为attr，值为val或者以 var- 开头的E元素

1
2
3
4
5
6
7
8
9
10
div[class|="c1"]{
width:100px;
height:100px;
margin-top:2px;
background:pink;
}//选择到下面当中的第一个和第三个元素
　　 <div class="c1"></div>
<div class="c1cs"></div>
<div class="c1-c2"></div>

　　　5、E[attr][attr2=val]匹配所有 有attr1属性 且有attr2属性，且attr2的值为val的E元素，这个就是写出几个属性选择器，并且都要同时满足他们的条件。　　

1
2
3
4
5
6
7
8
9
div[title="width"][class]{
width:100px;
height:100px;
margin-top:2px;
background:pink;
} //选择到下面的第一个div元素
<div title="width"class="box"></div>
<div title="width"></div>

　　四、a伪类选择器

1
2
3
4
5
6
7
8
1、 :link 匹配所有未被点击的链接
　　a:link{color:green; }
2、：hover 匹配鼠标悬停在其上的元素
　　a:hover{color: gold; }
3、：active 匹配鼠标按下还没有释放的元素
　　a:active{color:blue; }
4、：visited 匹配所有已经被点击的链接
a:visited{color:red; }

　　hover的使用，只是一个选择器，一定是他的后代。

1
2
3
4
5
6
7
8
9
10
11
12
.box{
width:100px;
height:100px;
color:#fff;
background:#000;
}<br>.box:hover p{
　　color:red;
}//鼠标移动div上，p字体的颜色改变
　　<div class="box">
<p>我的字体</p>
</div>

　　2. a伪元素选择器

　　　　1> ：before 在元素

1
2
3
4
div:before{
content:"before插入的元素";
}
//在div所有元素的最前面插入这个

　　<div>
　　　　<p>这个是p</p>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　</ul>
　　</div>

　　　　2> :after 在元素后面插入内容，插到最后一个子元素的后面。

1
2
3
我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved