CSS选择器
CSS选择器的作用是选择相应的HTML元素（标签），方便对HTML元素进行样式操作。总的来说，CSS选择器有三种：元素（标签）选择器，ID选择器，类选择器。为了更精确选择元素，可以由这三种选择器扩展更多的选择器。
基础选择器
除了元素，id，类选择器，通配符*和属性选择器也很常见，*表示选择全部元素，适合用于元素初始化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}/*通配符选择器*/
body{background-color: lightcyan;}/*标签选择器*/
.box{color: lightsalmon;}/*类选择器*/
#title{font-weight: bolder;}/*id选择器*/
[name]{font-style: italic;}/*属性选择器*/
</style>
</head>
<body>
<div class="box">Hello World!</div>
<div id="title">Hello World!</div>
<div name="name">Hello World</div>
</body>
</html>
基础选择器优先级id> class> element ，优先级高的会覆盖优先级低的相同属性。
选择器扩展
由基础的CSS选择器可以扩展大量的组合选择器，下面的代码展示部分常用的选择器组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
div,p{color: lightseagreen;}/*选择div和p元素*/
div p{color: magenta;}/*选择div里面的p元素*/
div>p{font-size: 20px;}/*选择父级是div的p元素*/
div+p{font-weight: bolder;}/*选择div是同级之后的p元素*/
[name="name"]{font-size: 25px;}/*选择属性name="name"的元素*/
[name*="na"]{color: mediumseagreen;}/*选择属性name包含"na"的元素*/
body:nth-child(2){font-style: italic;}/*选择body的第二级子元素*/
div:last-child{text-decoration: underline;}/*选择div的最后一级子元素*/
</style>
</head>
<body>
<div><p>Hello World!</p></div>
<div><span>Hello World!</span></div>
<p>Hello World!</p>
<div class="box">Hello World!</div>
<div id="title">Hello World!</div>
<div name="name">Hello World</div>
</body>
</html>
选择器除了优先级高的会覆盖优先级低的，相同优先级的后面出现的样式也会覆盖前面的样式，除非是加！important让样式变得最重要。
伪元素和伪类
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
a:hover{color: mediumspringgreen;}/*鼠标悬浮的a标签*/
a:visited{color: olivedrab;}/*访问过得a标签*/
p::before{content: '';display: block;}/*p标签前后插入内容*/
p::after{content: '';display: block;}
p::first-letter{font-size: 20px;}/*p标签第一个字母*/
p:empty{width: 50px;height: 50px;background-color: orange;}/*选择没有任何子级的p元素*/
</style>
</head>
<body>
<a href="#">Hello World</a>
<p>Hello World</p>
<p></p>
</body>
</html>
CSS引入伪元素和伪类是为了操作文档元素以外的信息.
网友评论