css选择器

css选择器

什么叫css选择器？
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
css选择器的分类？

1. ID选择器
2. class选择器（类选择器）
3. .元素选择器
4. 伪类选择器
5. 内联样式
   选择器的权重值
   元素选择器 0,0,0,1
   类选择器 0,0,1,0
   伪类选择器 0,0,1,0
   id选择器 0,1,0,0
   内联样式 1,0,0,0

ID：在html中直接#id名就好了，在js中调用getElementById（id名）

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

class：在html中用.class名，在js中调用getElementsByClassName（class名）

<li class="kk">￥300.00</li>

.kk{text-align: center}

元素选择器：直接调用元素名，就可以写样式了，在js中调用getElementsByTagName（元素名）；

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

.选择器
作用：选择器声明 以 ， 隔开的选择器列表
语法：
选择器1，选择器2，。。。。{样式1,；样式2}
ps：不同的选择器都可以被选中（都可以连着用）

后代选择器
后代：只要具备层级关系的元素，被嵌套的都可以称为后代元素
语法：
#div1 span{}
注意：中间用空格隔开，并且他们只能是父子级的关系

子代选择器
子代：只具备一级层级关系的子元素，被嵌套的（被包括的）称之为子代元素
语法 ： #div2 > span{}

伪类选择器
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
其他的经常用的选择器