[分享]css两种选择器

CSS选择器是用来匹配HTML元素的一种方式，可以通过不同的选择器来选取不同的元素。其中，CSS选择器主要分为两种：基本选择器和复合选择器。基本选择器包括以下几种： 1.元素选择器：选取所有指定元素。...

CSS选择器是用来匹配HTML元素的一种方式，可以通过不同的选择器来选取不同的元素。其中，CSS选择器主要分为两种：基本选择器和复合选择器。

基本选择器包括以下几种：
1.元素选择器：选取所有指定元素。
例：p {color: blue;}

2.class选择器：选取class属性值与指定名称相同的元素。
例：.example {font-size: 16px;}

3.id选择器：选取id属性值与指定名称相同的元素。
例：#header {background-color: grey;}

4.通配符选择器：选取所有元素。
例：* {margin: 0;}

5.属性选择器：选取带有指定属性的元素。
例：input[type='text'] {border: 1px solid grey;}

复合选择器是由两个或多个基本选择器组合而成，用来更具体地选取元素。复合选择器包括以下几种：
1.后代选择器：选取符合某些条件的后代元素。
例：div p {color: blue;}

2.子元素选择器：选取符合某些条件的直接子元素。
例：ul>li {list-style: none;}

3.相邻兄弟选择器：选取符合某些条件的相邻兄弟元素。
例：h1+p {font-weight: bold;}

4.伪类选择器：选取元素的某个状态或位置。
例：a:hover {color: red;}

5.伪元素选择器：选取元素的某个特定部分或位置。
例：p::first-line {font-weight: bold;}