CSS通过选择符来选择某个对象，并对其进行修饰。
选择符的类别很多，我们究竟应该在编写程序时如何筛选，我之前在这里列举了几条基本需要注意的事项。
-
元素选择符
作用的范围是html标记
a{……}div{……}p{……} -
类选择符
可以作用于一个或多个元素，使得这些元素有相同的样式。
.red{……}.blink{……}.but1{……}
使用前提，需要为html元素进行标记class属性
<a class="red" src="……">……</a> -
id选择符
作用于网页中具有唯一标识的元素。
#red{……}#blink{……}#but1{……}
使用前提，需要为html元素进行标记id属性
<a id="red" src="……">……</a>
—总结：以上三个是最基本的选择符，其作用的优先级是：
id>类>tag标签
但是这三个都小于内联样式<a style="……" id="red" src="……">……</a>
—注意：id本身是唯一标识的，class是将一个样式作用于很对对象。
但是在区分意识不强的情况下，有些人可能会这样
同时赋予div属性.png
按照理论来说，浏览器应该只识别第一个标识id的，但是刚刚的代码，我在浏览器内分别作了测试后，发现浏览器对这两个元素均进行了渲染，但是当我在js内写脚本
document.getelementByID('q').style进行设置时，发现js解释器只找到了第一个。
-
通配选择符
作用于所有html标签，缺点呢，这里写过，不赘述啦
*{……}
—注意：
//使用通配符，会改变<h1>的大小
*{font-size: 14px;}
<body><h2>dddd</h2></div>
//在body内定义，虽然会继承，不会改变<h1>的大小
body{font-size: 14px;}
<body><h2>dddd</h2></div> -
后代选择符
<div>111<p>11<span>1</span></p></div>
div span{……}
发现div与span内有一个或多个空格，span并不是div的直接子元素，而是孙子辈的。当时不是不接受儿子辈的。 -
子元素选择符
<div>111<p>11<span>1</span></p></div>
div span{……}
div>p{……}//子元素选择器
对比后代元素选择器，通过>号来制定父子关系
—注意：推荐使用子元素选择符，原因，猛戳这里
-
选择符分组
将每个选择符用,分隔开，{}内的样式作用于前面的每个选择器的选择结果
p,.red,h1{……} -
标签制定式选择符
p.red{……}//类为red中的p标签 -
组合选择符
p .red #big{……}
仔细看之间没有逗号，只是空格，意思是为id为big，且他包含在类为red的元素内，并且这个类也包含在p标签内。 -
伪类选择符
a:hover{……}
这里有详细的介绍伪类。
—总结：以上是用的比较多的选择器。 -
相邻兄弟选择符
选择紧邻在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
h1 + p {margin-top:50px;}//中间是加好，不太好记
意思是选择一个段落p，且紧邻他的上级兄弟元素为h1 -
伪元素选择符
-
:first-line 伪元素
用于向文本的首行设置特殊样式。
p:first-line {color:#ff0000; } -
:first-letter 伪元素
用于向文本的首字母设置特殊样式,作用于块级元素。
p:first-letter {color:#ff0000; }
伪元素可以与其他伪元素综合使用，也可以和其他选择器一起使用。
以上文本修饰的文元素的优先级还是挺高的，大于id、大于内联。而且二者相比，-letter又大于-line。 -
:before 伪元素
在元素的内容前面插入新内容 -
:after伪元素：
在元素的内容后面插入新内容
h1:before
{
content:url(logo.gif);
}
这个的前后面指的是这样的
<h1><img src="" />是在我内容的前面插入</h1> -
属性选择符
选择有某个属性的元素。
[title]{color:red;}
标签内具有属性的title的元素。
欢迎补充与指正☺
网友评论