css 查漏补缺式学习

属性选择器

<input type="text" name="abc" />
<button class="btn-submit" onclick='submit' title='提交'>提交</button>
<button class="btn-cancle" onclick='submit' title='取消提交'>取消</button>

[title='提交']{
     background-color: aquamarine;
}

button[class='btn-submit']{
	color: crimson;
}

input[type="text"]{
	border: #DC143C solid 0.125rem;
}

模糊匹配：

1.只要出现 提交 就可以

[title*='提交']{
     background-color: aquamarine;
}

2.以 提交 开头

[title^='提交']{
     background-color: aquamarine;
}

3.以 提交 结束

[title$='提交']{
     background-color: aquamarine;
}

相邻（兄弟）选择器

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

1.与class为a相邻的div （从上往下，只选择与a下相邻的div）

.a+div {
	background-color: rgba(255, 12, 201, 0.1);
}

2. 与class为a为平行关系的div（只选择class=‘a’下面的且为平行关系的div）

.a ~ div{
	background-color: aliceblue;
}

.b ~ div{
	background-color: aliceblue;
}

伪类选择器

<input type="text" />
<a href="https://www.baidu.com?time=45523">刷新</a>

 

a:link {
	color: blue;
}

a:visited {
	color: aquamarine;
}

a:hover {
	border: brown solid 0.0995rem;
	color: aliceblue;
	background-color: coral;
	padding: 0.25rem;
}

/* 点击时 */
a:active{
	background-color: cadetblue;
}


input:focus{
	outline: none;
	background-color: rgba(255,127,80,0.4);
}

伪元素选择器

 

<p>很多记忆开始变得糊涂，很多岁月已经成为了过往烟云。<br>或许，我在回顾所有走过的那年，那月，那日的时候，<br>发现自己的人生中有几页已经成为了空缺，永远回不到最初的模样。</p>
	

p:first-letter{
	font-size: 3.125rem;
}

 

	<a class="help">什么是宇宙</a>
	<a class="help">什么是银河</a>
	<a class="help">什么是哲学</a>
	<a class="help">什么是尘埃</a>

.help{
	display: block;
}

.help::before {
	content: '*';
	color: red;
}
.help::after {
	content: '[?]';
	color: blue;
}

---

 伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。

伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加），伪类是给页面中已经存在的元素添加一个类。 

CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。

---

<div>
	<p>老鼠扛刀，满街找猫。</p>
	<p>在哪里跌倒吗，就在哪里躺下。</p>
	<p>如果说美貌是推荐信，那么善良就是信用卡！</p>
</div>

div p:first-child{
	color: red;
}

div p:last-child{
	color: yellow;
}

/*可读性不好*/
div p:nth-child(2){
	color: blue;
}

 

 选择器权重计算

简单比较（但不一定正确）

行间>内联>外部样式；ID>class>元素

---

行间：

<p style="color: #FF0000;">老鼠扛刀，满街找猫。</p>

内联：

<style type="text/css">
   h1{font-size:12px;
      color:#000;
     }
</style>

外部：

<link rel="stylesheet" href="css/style.css">

---

选择器类型

　　1、ID　　#id

　　2、class　　.class

　　3、标签　　p

　　4、通用　　*

　　5、属性　　[type="text"]

　　6、伪类　　：hover

　　7、伪元素　　::first-line

　　8、子选择器、相邻选择器

权重计算规则

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。

 权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.

style属性（行内样式）	id	属性选择器/class或者伪类	元素名，或者伪元素
1000	100	10	1

在权重相同的情况下，后面的样式会覆盖掉前面的样式。

！important

!important 的作用是提升优先级，加了这句的样式的优先级是最高的（比内联样式的优先级还高)。