您的位置：首页 > Web前端 > CSS

（13）HTML&&CSS笔记（伪元素，选择器优先级）

2019-07-26 15:53 387 查看

1、伪元素 ::after，::before（两个冒号兼容IE9以下）
使用方法如下

<style>
p{
border:5px solid #000;
background-color: #ff0;
font-size:20px;
}
p::after{
content:"我是after！";
}
p::before{
content:"我是before";
font-size:30px;
color:#0f0;
}
</style>
</head>
<body>
<p>加油努力呀！！！ </p>
</body>

2、:checked 用法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:checked+span{
background: red;
}
input:checked+span::after{
content: " 我被选中了";
}
</style>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>点击你喜欢的明星</legend>
<ul>
<li>
<label>
<input type="radio" name="star" /><span>范冰冰</span>
</label>
</li>
<li>
<label>
<input type="radio" name="star" /><span>李冰冰</span>
</label>
</li>
<li>
<label>
<input type="radio" name="star" /><span>杨幂</span>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>以下是多选</legend>
<ul>
<li>
<label>
<input type="checkbox" name="多选" /><span>惊天魔盗团</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="多选" /><span>魔兽</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="多选" /><span>北京遇上西雅图</span>
</label>
</li>
</ul>
</fieldset>
</form>
</body>
</html>

3、::selection

<style>
p::selection{
color:deeppink;
background-color:#90f;
}
</style>
<body>
<p>伪元素，选择器优先级伪元素，选择器优先级伪元素，选择器优先级</p>
</body>

4、~选择器
ele1 ~ ele2 表示选中元素1后面所有的兄弟元素2

<style>
div + p{
color:#f00;
}
p{
background-color:deepskyblue;
}
div ~ p{
text-align:center;
}
</style>
<body>
<div class='mydiv'>mydiv</div>
<p class='myp'>1</p>
<p class='myp'>2</p>
<span>span123</span>
<p class='myp'>3</p>
<p class='myp'>4</p>
<div>
<p>123</p>
</div>
</body>

5、css3选择器

:first-child 表示选择到第一个子元素
:last-child 表示选择到末尾子元素
:nth-child(n) 读取第n个子元素，然后判断该子元素是否符合，符合就显示样式。
:nth-of-type(n) 读取属性为某个类型的第n个子元素
odd(2n+1)：奇数
even(2n)：偶数

<style>
div{
border:5px solid #0ff;
}
div > p {
font-size:30px;
}
div p:first-child{
font-weight:bold;
}
div p:last-child{
font-weight:bold;
}
div p:nth-child(1){
background-color:#03f;
}
div p:nth-child(2){
background-color:#f3f;
}
div p:nth-child(3){
background-color:blue;
}
div p:nth-child(4){
background-color:purple;
}
div p:nth-child(7){
background-color:yellow;
}
div h3:nth-child(3){
font-style:italic;
}
div p:nth-child(odd){
font-size:40px;
color:#cf0;
}
div p:nth-child(even){
font-size:40px;
color:#0ff;
}
</style>
<body>
<div
<p>p1</p>
<p>p2</p>
<h3>h3</h3>
<span>span4</span>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
</div>
</body>

<style>
div{
border:5px solid #0ff;
}
div > p {
font-size:30px;
}
div p:first-child{
font-weight:bold;
}
div p:last-child{
font-weight:bold;
}
div p:nth-child(1){
background-color:#03f;
}
div p:nth-child(2){
background-color:#f3f;
}
div p:nth-child(3){
background-color:blue;
}
div p:nth-of-type(3){
background-color:#f90;
}
div p:nth-of-type(4){
background-color:orange;
}
</style>
<bo
3ff7
dy>
<div>
<p>p1</p>
<p>p2</p>
<h3>h3</h3>
<span>span4</span>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
</div>
</body>

6、选择器优先级（权重）：
id选择器（100） > 类选择器（10） > 标签选择器（1） > 通配符选择器（<0.1）
规律：
选择范围越广，优先级越低
选择范围越窄，优先级越高

7、复杂选择器
如果权重相等的情况下，后来者居上；
如果权重不相等的情况下：
id选择器个数多的，权重大；
如果id选择器个数相等，比较类选择器，类选择器多的权重大；
如果id选择器个数相等，类选择器也相等的情况下，比较标签选择器，标签选择器多的权重大。

<style>
li{
list-style:none;
}
#mydiv #li .span{ /* 100+100+10 = 210 */
color:blue;
}
#mydiv .ul .li #span{/* 100+10+10+100 = 220 */
color:#999;
}
</style>
<body>
<div id="mydiv" class="mydiv">
<ul id='ul' class='ul'>
<li id='li' class='li'>
<p id='p' class='p'><span id='span' class='span'>1</span></p>
<p class='p'><span class='span'>2</span></p>
<p class='p'><span class='span'>3</span></p>
<p class='p'><span class='span'>4</span></p>
</li>
</ul>
</div>
</body>
</html>

8、样式优先级
行内样式 > 内嵌样式 > 外链样式
规律：
远亲不如近邻
!important 提升了优先级（等于王炸）

9、opacity：透明度
0-1
0 是完全透明
1 是完全不透明
opacity与rgba的区别
rgba 不会继承父透子不透
opacity 会继承父透子也透

10、box-shadow 盒子阴影

x-shadow 水平的偏移量
负值的时候水平偏左移动
正值的时候水平偏右移动
y-shadow 垂直的偏移量
正值的时候垂直偏下移动
负值的时候垂直偏上移动
blur 模糊的半径
spread 阴影的尺寸大小
color 阴影的颜色

<style>
*{
margin:0;
padding:0;
}
.mydiv{
width:300px;
height:300px;
border:5px solid #000;
margin:100px;
box-shadow:0px 0px 20px 30px #0f0 inset,0px 0px 20px 30px #0ff, 0px 0px 40px 50px pink,0px 0px 60px 70px deeppink;
}
</style>
<body>
<div class='mydiv'></div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航