标签：代码 idt 针对 存在 web javascrip color -- nbsp
CSS3 选择器
1、Id选择器：通过标签的Id属性值 --#id
元素的id属性值有且只有一个，不能出现两个标签都使用一个相同的id值，所以id选择器是精准、快速的选择元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
代码中我们的div元素设置了id属性，id值为‘div1’，通过<style>样式设置了div的宽100px、高100px、和背景颜色为红色
效果：
。
2、class 类选择器：通过标签class属性值选择元素 --.class
类选择器是针对多个标签要使用同一样式的,一个标签也可以使用多个类
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .divs{ width: 100px; height: 100px; margin: 10px; background-color: black; } .div1{ border: 3px solid red; } </style> </head> <body> <div class="div1 divs"> </div> <div class="divs"> </div> <div class="divs"> </div> </body> </html>
代码中我们的3个div标签设置了class属性其属性是一样的。其中我们的第一个div应用了两个类，还可以用更多个类用空格符分开。
结果：
。
如果一个标签设置了多个类，类中的属性一样值不一样，我们如何知道它应用了那个值呢？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .div1{ width: 100px; background-color: green; } .div2{ height: 100px; background-color: red; } .div3{ background-color: yellow; } </style> </head> <body> <div class="div1 div2 div3"> </div> </body> </html>
上面代码中的div用了多个类，其中有每个类都有设置背景颜色
结果：
由结果可以知道应用了多个类：如果第一个类中有设置了该属性值，第二各类中也有，那么第二个类的属性值会覆盖掉第一个类的属性值。如果第二个类
里的属性是第一个类没有，那么该元素会添加该属性。
当然我们还可以这样：p.class{ background : red } --选取p标签应用了该类的标签，如果p标签没有应用该类，就不会被选中
p .class{ background:red } --p 与 .class 之间存在空格，选取p标签的子标签应用了该类的标签
3、标签选择器：通过标签名直接选择该元素
比如一个<div>标签，通过标签选择器，将会选择当前页面的所有div标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; margin: 10px; float: left; background-color: green; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
结果：
。
4、伪类选择器
前面我们有id选择器，有class类选择器，标签选择器，当然还有伪类选择器，
伪类选择器用于某些选择器添加特性效果
a:link --选择没有被访问的链接
a:visited --选择被访问的链接
a:active --选择活动的链接
a:hover --选择鼠标指针在该链接上的链接
input:focus --获得焦点的input元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a:link{ /*没有被访问的元素*/
color: green;
}
a:visited{/*被访问过的元素*/
color: yellow;
}
a:active{/*活动的标签*/
color:blue;
}
a:hover{/*鼠标位于上方的标签*/
color: red;
}
input:focus{
background: chocolate;
}
</style>
</head>
<body>
<a href="#">Hello HTML</a></br>
<a href="#1">Hello CSS</a></br>
<a href="#2">Hello javaScript</a></br>
<a href="#3">Hello Web</a></br>
<input type="text" />
</body>
</html>
结果：
当然伪类选择器还有很多。
5、组合选择器
元素组合：选取div标签同时选取了p标签 --用分号分开，可以多个
div,p{
background:red;
}
元素后代选择器：选取div的后代所有p标签元素包括子代的子代，用空格符号分开
<style>
div p{
background:red;
}
</style>
子元素选择器：选取div标签的子元素p标签，不包括子标签的子标签，用大于号分开
<style> div>p{ background:red; } </style>
兄弟选择器：选取与div同级并且紧追在div后面的p标签 ，用加号分开
<style> div+p{ background:red; } </style>
6、属性选择器
<style> div[class]{/*选取应用了class的div元素*/ background:red; } div[class=‘divs‘]{/*选取了class属性值为‘divs’的元素*/ background: green; } div[class~=‘div1‘]{/*当class具有多个值，其中一个值为div1的元素*/ background: yellow; } div[class|=‘c‘]{/*匹配class属性其值以c开头的元素*/ background: black; } </style>
标签：代码 idt 针对 存在 web javascrip color -- nbsp
原文地址：https://www.cnblogs.com/yangWanSheng/p/9419367.html
