CSS选择器

CSS选择器

CSS选择器

选择器讲的通俗一点就是要选择某一个内容，当选择了内容那肯定要对其修改一下，要不然选择它干嘛。CSS选择器就是为了对HTML页面中的元素进行选择并进行一定的控制，如改变p标签里字体的颜色和大小等等。所以CSS选择器在网页布局里面很重要！

1.id选择器（ID selectors）

​ 一看到id(Identity document)是不是立马想到身份证，身份证是独一无二的，那么在HTML中id选择器是独一无二吗？一个HTML网页只能写一个id选择器吗？。
id选择器在网页中不是独一无二的，但是id选择器的属性值大多数情况下是独一无二的。至于为什么可以看一下这篇文章的解释document.getElementById
如淘宝首页中的id="J_SiteNavFavor"中的属性值J_SiteNavFavor在当前页面中就只有一个，如图所示：

举例：

    <p id="test">Hello World!</p>  

语法：

当需要更改p标签中的文字颜色可以这样写：

 	/* id选择器 #开头（id小写，不是大写）*/
   #test{
        color: red;
    }

结果：

2.类选择器（Class selectors）

​ 在HTML中多个标签可以使用同一个类名。

举例

 <p class="demo">Lorem ipsum dolor sit amet.</p>
 <p class="demo">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati, nostrum?</p>

语法

/*类选择器 .(英文状态下)开头 */
    .demo{
        color: blue;
    }

结果

3.伪类选择器

给选择的元素添加想要的状态，比如 hover：鼠标悬停时可以使元素发生一些状态上的变化。
还有很多伪类选择器，如果感兴趣可以去这里看看伪类。

举例

 <p class="demo">Lorem ipsum dolor sit amet.</p>

语法

 /* 当鼠标悬停在类名为demo的p标签上时颜色会成红色 */
    .demo:hover{
        color: red;
    }

结果

4.通配符选择器

一个星号(*)就是一个通配符选择器，可以匹配网页上的所有元素。

语法

/* 如果优先级允许，可以改变HTML页面中所有文字的颜色*/
 *{
	color: red;
    }

注：通配符选择器是CSS选择器中性能最低的，要注意使用。具体原因可以看下这篇文章https://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/

5.属性选择器

根据标签的属性名和属性值来进行选择。

举例

<input type="text" placeholder="demo">

语法

<style>
        [placeholder]{
        	height: 100px;
            background-color: red;
        }
</style>

结果

6.元素选择器

直接选择元素，修改样式。

举例

 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, veritatis!</p>

语法

<style>
        p{
            color: red;
        }
</style>

结果