1基本选择器
基本选择器包括:标签选择器(根据标签的名称获取)、ID选择器(获取的是ID属性)、类选择器(class属性) 通用选择器(通配符)
<!DOCTYPE html>
<html>
<head>
<title>选择器</tit1e>
<style type="text/css">
/*div{
color:red;}*/
/*#one{
color: blue;}*/
/*.two{
color: yellow;
}*/
*{
color: green;}
</style>
</head>
<body>
<div id="one" class="two">
这是第一个div</div>
<div >
这是第一个div</div>
</body>
</html>
id属性是唯一的，class不唯一
四种选择器的优先级； ID>class>标签>通配符
2包含选择器
子代选择器(获取的是某个标签的第一级子标签)
后代选择器(获取的某个标签里面所有的子标签)
分组选择(逗号选择器，可以同时设置多个标签，使用逗号进行分割
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*子代选择器*/
div.list>ul{
border: 1px solid red;
}
/*后代选择器*/.list li{
border: 1px solid blue;
}
/*逗号选择器*/
.one,.two,#first{
color:green;
width: 200px;
height: 200px;
background: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是第二个div</div>
<p id="first">这是一个段落标签</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
</u1>
</div>
</body>
</htm1>
3属性选择器
<!DOCTYPE htm1>
<htm1>
<head>
<title>选择器</title>
<style type="text/css">
/*选择选中的额标签中存在的某个属性*/
div[title]{
border: 1px solid black;
}
/*确切的等于某个值*/
input[type="text"]{
background:red;}
/*属性值包含某个值*/
input[type *="e"]{
background:blue;}
/*属性值以某个值开头*/
input[type ^="e"]{
background:green;
}
/*属性值以某个值结尾*/
input[type $="r1"]{
background: red;
}
/*+表示下一个标签*/.
msg +p{
border: lpx solid green;}
/*属性等于某个属性值*/
[title="这是一个标题"]{
color:red;
}
</style>
</head>
<body>
<div class="container">
这是一个div容器
</div>
<div title="这是一个标题">这是第二个div</div>
<input type "text" name="" id="" value="张三">
<input type="email" name="" id="" value="李四">
<input type="url" name="" id="" value="王五">
<hr>
<div class="msg">我喜欢旅游</div>
<p id="msgl" ">这是一个段落</p>
</body>
</html>
4伪类选择器
同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式(实现伪类选择器)
:link-----链接点击之前
visited----- 链接点击之后
hover ------"悬停"
:active------"激活"鼠标点击的时候但是不松手
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*点击之前的颜色*/ a:link{
color:red;
/*点击之后的颜色*/ a:visited{
color: green;}
/*鼠标悬停的颜色*/ a:hover{
color: blue;}
/*鼠标点击在上面但是不松手的时候* a:active{
color: pink;}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点击</a>
</body>
</html>
四种状态的顺序最好固定，link visited hover active
5伪元素选择器
:before
:after---- CSS2
::before:after
要使用伪元素选择器一定要加上content属性
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::before{
content:"张三";
color:red;}
p::after{
content:"李四";
color: green;
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
