CSS3-选择器

属性选择器：

简单选择器：匹配一种特定的特性（与特性值无关）

示例

p[class]应用于所有包含class特性的<p>元素

精确选择器：匹配一种特定的特性，该特性具有特定的值

示例

p[class="dog"]应用于所有包含class特性值为dog的<p>元素

部分选择器：匹配一种特定的特性，该特性值出现在以空格隔开的单词列表中

示例

p[class~="dog"]应用于特定的<p>元素，这些元素的class特性值是以空格隔开的单词列表，而其中一项是dog

开头选择器：匹配一种特定的特性，该特性值是以某个特定的字符串作为开头

示例

p[attr^="d"]应用于特定的<p>元素，这些元素的class特性值是以字母“d”开头

包含选择器：匹配一种特定的特性，该特性值是包含一个特定的子字符串

示例

p[attr*="do"]应用于特定的<p>元素，这些元素的某个特性值中含有“do”

结尾选择器：匹配一种特定的特性，该特性值是以某个特定的字符串作为结尾

示例

p[attr$="g"]应用于特定的<p>元素，这些元素的某个特性值以字母“g”结尾

伪类选择器：

/*统计所有的子代元素，然后对匹配的元素生效*/

ul li:nth-child(2in-1){color:#0dfaff;}

<ul><li>青岛理工大学</li><li>青岛理工大学</li><div>青岛理工大学</div><li>青岛理工大学</li><li>青岛理工大学</li></ul>

实现效果如下图：

/*统计所有类型元素，然后生效*/

ul li:nth-of-type(2n-1){color:#1b3aff;}

<ul><li>青岛理工大学</li><li>青岛理工大学</li><div>青岛理工大学</div><li>青岛理工大学</li><li>青岛理工大学</li></ul>

实现效果如下图：

状态伪类选择器

一般用于表单元素

:enabled选择器选取所有启用的表单元素。

input:enabled{                  color: yellow;              }

:disabled 选择器选取所有禁用的表单元素。

input:disabled{color: #0dfaff;}

:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

input:checked{outline: 1px solid red;}

input:enabled{color:yellow;}input:disabled{color:#0dfaff;}input:checked{outline:1px solid red;}

姓名：<inputtype="text"value="飘逸的蜗牛"disabled><br>密码：<inputtype="password"><br>爱好：<inputtype="checkbox"checked>篮球<inputtype="checkbox">篮球<inputtype="checkbox">篮球<inputtype="checkbox">篮球

实现效果图：

取非选择器：

:not(select)

select

必需。规定不选择的元素。

该参数接受任何类型的选择器。

示例：

p{color:#0dfaff;}:not(p) {color:#1b3aff;}

<p>1</p><p>2</p><div>4</div><span>5</span><ul><li>1</li><li>2</li><liid="li3">3</li><li>4</li></ul>

实现效果：

*{color:#0dfaff;}:not([id="li3"]){color:red;}

<p>1</p><p>2</p><div>4</div><span>5</span><ul><li>1</li><li>2</li><liid="li3">3</li><li>4</li></ul>

实现效果：