CSS样式——CSS选择器前端学习

基本选择器

标签选择器

使用HTML标签添加样式

标签名{ 样式名:样式值; }div{ width: 100px; height: 100px; }

id选择器

给HTML标签添加一个id属性
id属性的特点：每人id名在一个页面中只允许出现一次，这叫做id的唯一性

#id名{ 样式名:样式值; }#box{ width: 100px; height: 100px; }

class选择器

给HTML标签添加一个class属性
一个class名在页面中可出现多个，每个标签可以有多个class名

#class名{ 样式名:样式值; }.box{ width: 100px; height: 100px; }

通配符

通配符是指所有标签都可以使用样式

*{ padding:0; margin:0; }

群组选择器

多个标签共用一个样式时，可将多个选择器同时设置相同样式，消除代码冗余

选择器1,选择器2,选择器3,选择器4{ 样式名:样式值; }div,#id,.class,*{ width: 100px; height: 100px; }

选择器命名规范

不能使用特殊字符
尽量使用小写字母开头
多个单词使用下划线（_）、连字符（-）、后面单词首字母大写方式命名
不能使用中文命名
语义化命名

选择器命名方法

下划线命名法：container_left
连字符命名法：container-left
驼峰式命名法：containerLeft

层级选择器

后代选择器

选择父选择器下所有符合子选择器的子孙元素

父选择器子选择器{ 样式名:样式值; }ul li{ width:100px; height:100px; }

父子选择器

选择父选择器下所有符合子选择器的子元素

父选择器 > 子选择器{ 样式名:样式值; }ul > li{ width:100px; height:100px; }

兄弟选择器

选择相同的父元素下符合条件的所有兄弟元素

选择器1 ~ 选择器2{ 样式名:样式值; }div ~ p{ width:100px; height:100px; }

相邻选择器

选择相同的父元素下符合条件的第一个元素

选择器1 + 选择器2{ 样式名:样式值; }div + p{ width:100px; height:100px; }

伪类选择器

同一个标签，根据其不同的种状态，有不同的样式，需要使用伪类选择器进行设置

选择器:伪类选择器{ 样式名:样式值; }
鼠标点击之前的状态(只能设置给 a 元素)

选择器:link{ 样式名:样式值; }
鼠标点击时的状态(只能设置给 a 元素)

选择器:visited{ 样式名:样式值; }
鼠标划入标签状态

选择器:hover{ 样式名:样式值; }
鼠标按下的状态

选择器:active{ 样式名:样式值; }
在元素之前添加或删除内容

选择器::after{ 样式名:样式值; }
在元素之后添加或删除内容

选择器::before{ 样式名:样式值; }
匹配表单元素禁用

选择器::disabled{ 样式名:样式值; }
匹配表单元素禁用

选择器:disabled{ 样式名:样式值; }
匹配表单元素选中

选择器:checked{ 样式名:样式值; }
【CSS样式——CSS选择器】匹配获取焦点元素

选择器:fous{ 样式名:样式值; }

属性选择器

使用元素的属性和属性值进行选择元素

通过属性名进行选择元素

选择器[属性名]{ 样式名:样式值; }1 2 div[class]{ width: 100px; height: 100px; background: red; margin: 10px; } 只有第一个div满足条件，所以第一个div样式生效

通过属性名和属性值同时满足进行选择元素

选择器[属性名="属性值"]{ 样式名:样式值; }1 2 div[class="box1"]{ width: 100px; height: 100px; background: red; margin: 10px; } 只有第一个div满足条件，所以第一个div样式生效

通过属性名和属性值满足其中一项进行选择元素

选择器[属性名*="属性值"]{ 样式名:样式值; }1 2 div[class*="box1"]{ width: 100px; height: 100px; background: red; margin: 10px; } 两个div都满足其中一个条件，所有都生效

满足最前面的属性名和属性值进行选择元素

选择器[属性名^="属性值"]{ 样式名:样式值; }1 2 div[class^="box1"]{ width: 100px; height: 100px; background: red; margin: 10px; } 只有第二个div的第一个class="box1"满足条件，所以只对第二个div生效

满足最后面的属性名和属性值进行选择元素

选择器[属性名$="属性值"]{ 样式名:样式值; }1 2 div[class$="box1"]{ width: 100px; height: 100px; background: red; margin: 10px; } 只有第一个div的最后一个class="box1"满足条件，所以只对第一个div生效

属性组合匹配选择器：多个条件同时满足