CSS 选择器

目录

基础选择器

　　标签选择器

　　id选择器

　　class选择器

　　通配符选择器

复合选择器：由基础选择器组成

　　后代选择器

　　子元素选择器

　　并集选择器

　　伪类选择器

　　focus选择器

标签选择器

是指HTML标签的名字作为标签选择器。

语法：

p {
	color: rgb(85, 57, 57);
	font: 12px;
}

<p calss="color" id="color">beautiful</p>

class选择器(常用)

类选择器在HTML中以class属性表示，在CSS中，类选择器以“.”号表示。

语法：

.color {
     font: optional;
}

多类名：

<p class="color font">beautiful</p>

id选择器

HTML元素以id元素来设置id选择器，CSS中，id选择器以“#”号表示。

语法：

#color {
    color: red;
}

通配符选择器

在CSS中，通配符选择器使用“*”定义：它表示选取页面中所有的元素。

语法：

* {
  color: red;  
}

Demo：

　　1. 清除所有的元素标签的内外边距

* {
  margin: 0;
  padding: 0;    
}

后代选择器

后代选择器又称为包含选择器，可以选择父元素里的子元素。其实就是把外层标签写在前面，内层的标签写在后面，中间使用空格隔开。

选择<div>元素内的所有<p>元素。

语法：

基础选择器1 基础选择器2 ... {
    样式（color：red；）
}

列如：

<ol>
    <li>bananas</li>
    <li>apples</li>
</ol>

1. 修改ol下的li的颜色

ol li {
    color: red;
}

说明：

　　1。基础选择器1和2...使用空格隔开

　　2. 2是1的后代，可以是儿子或者孙子等

　　3. 后代选择器由两个或多个基础选择器组成

子选择器

只能选择父级下的一级元素。元素可以是一个或多个。

选择所有父级是<ul>元素的<li>元素。

例如：

ol > li {
    color: red;
}

div + p

选择所有紧跟在<div>元素之后的第一个<p>元素。

案例：

div+p {
   background-color: red;
}

<h2>tow head</h2>
<div>div</div>
<h3>three head</h3>
<p>p label </p>

并集选择器

可以选择多组标签，标签之间使用逗号隔开，同时为它们定义相同的样式。通常用于集体声明。

列如：

div, 
p, 
ol li {
    color: red;
}

伪类选择器

用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或选择第一个，第n个元素。

链接伪类

a:link  /* 选择没有点击过的a标签 */
a: visited  /* 选择点击过的a标签 */
a: hover  /* 选择鼠标经过的a标签 */
a: active /* 选择鼠标点击，还没有松开的a标签 */

注意：

　　1. 按照上述的四种顺序书写 l、v、h、a

　　2. 如果要修改a标签的样式的时候，单独写( a{} a:hover{})

focus伪类选择器

:focus伪类选择器用于选择获取焦点的表单元素。

列如：

input:focus {
    background-color: red;
}

CSS3 :checked 选择器

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）

案例：为选中的input元素设置高度和宽度

input:checked {
    height: 50px;
    width: 60px;
}

　　

参考：https://www.runoob.com/cssref/css-selectors.html