一、选择器
1.基础选择器
选择器 | 功能 |
---|
.intro | 选择 class=“intro” 的所有元素 |
#firstname | 选择 id=“firstname” 的元素 |
* | 选择所有元素 |
div | 选择所有的div元素 |
.div,p | 选择所有的div和p元素 |
2.结构选择器
选择器 | 功能 |
---|
div p | div父辈下面所有子孙辈的p标签(可以子孙重孙等等) |
div>p | div父辈下面子辈的p标签(只可以子辈) |
3.属性选择器
选择器 | 功能 |
---|
h1[target] | h1标签里面写着target属性的内容 |
a[href*=“baidu”] | a标签里面的href属性里面有“baidu”这几个词 |
img[src$=“.jpeg”] | img标签里面的src结尾是“.jpeg”这几个词 |
a[href^=“https”] | a标签里面的href属性开头是“https”这几个词 |
<style>
h1[target]{
color: red;
}
</style>
<body>
<h1 target>995</h1> // 红色
<h1 target>9355</h1>// 红色
<h1 tar>9355</h1>// 默认的黑色
</body>
<style>
a[href*="baidu"]{
color: pink;
}
</style>
<body>
<a href="https://www.baidu.com">5555555555</a>
<a href="https://www.qq.com">5555555555555555555</a>
</body>
4.伪类选择器
选择器 | 功能 |
---|
a:hover | 鼠标移动到a标签上展示的样式 |
input:focus | 选择获得焦点的 input 元素(应用在input元素身上)展示的样式(需要写:outline:none; 覆盖默认样式) |
span:nth-child(2) | 第二个span的样式 |
span:nth-child(2n) | 第偶数个span的样式(n从0,1,2,…) |
span:nth-child(2n+1) | 第奇数个span的样式(n从0,1,2,…) |
span::before | 在span元素前面添加内容的样式(属于单独为span前内容加样式;其属于行内元素) |
span::after | 在span元素后面添加内容的样式(属于单独为span后内容加样式;其属于行内元素) |
<style>
.span::before {
content: '⇰';
display: block;
color: red;
background: yellowgreen;
width: 100px;
height: 100px;
}
</style>
<body>
<span class="span">996</span>
</body>
二、权重
解释:权重顾名思义,其就是上述标签的优先执行顺序
顺序:!important>行内>id>class>标签与伪元素>*
通俗:下述从上到下优先级降低
举例代码:<span id="span" class="span">996</span>
!important: span{color:red !important;} // 此重点在!important并不在span标签(!important让某个属性优先级最高)
行内: <span id="id" class="span" style="color:pink;">996</span>// 此重点style="color:pink;"
id: #sapn{color:blue;}
class: .span{color:yellow;}
标签与伪元素: span{color:red;}
*: *{margin:0;padding:0;}