CSS3选择器代码笔记

最新推荐文章于 2024-10-18 10:41:41 发布

zmHelloWorld

最新推荐文章于 2024-10-18 10:41:41 发布

阅读量150

点赞数

文章标签： css 定位

本文链接：https://blog.youkuaiyun.com/qq_44818849/article/details/110452051

版权

CSS3选择器代码笔记

css导入方式

<link rel="stylesheet" href="">

选择器

选择页面上某一/某一类的元素

基本选择器

类选择器
```
.class1{
    font-size: 20px;
}
```
id选择器
```
#class1{
    font-size: 20px;
}
```
标签选择器：会选择页面上的所以的标签

h1{
   
}

层次选择器

后代选择器
```
ul li{
 color: #B5FFFC;
}
```
子选择器
```
div>p{
color: #B5FFFC;
}
```

相邻兄弟选择器

.name+p{
 <!--相邻及向下-->
color: #B5FFFC;
}

通用兄弟选择器

.name~p{
 <!--相邻兄弟-->
color: #B5FFFC;
}

结构伪类选择器

ul li:first-child{
    font-size: 20px;
}
 ul li:last-child{
                font-size: 20px;
            }
            
            
/*选中p1:定位到父元素，选择当前的第一个元素，选择当元素的父级元素，选中父级元素的第一个， 并且是当前元素才生效!
*/
p:nth-child(1){
                font-size: 20px;
            }
            
            
  p:nth-of-type(1){
               font-size: 20px;
           }
   a:hover{
   font-size: 20px;
   }

属性选择器可以使用正则表达式

a[id]{
font-size: 20px;
}
a[id=first]{
font-size: 20px;
}
a[class *= link]{
font-size: 20px;
}
/*以link开头
*/
a[href ^= link]{
font-size: 20px;
}
/*以link结尾
*/
a[href  $= link]{
font-size: 20px;
}