CSS选择器

date: 2021-09-27title: CSS选择器 #标题
tags: #标签
categories: 前端 # 分类

CSS选择器(Cascading Style Sheet)全称叫做层叠样式表，这里记录下css相关的一些语法及概念。

css的基础语法及引入方法

基础语法

css代码写法:  h1{color:red;}  选择器{css属性:属性值;}

引入方法

方式一：

    <!-- head标签里面写 -->
    <style>
        div{
            background-color: red;
            height: 100px;
            width: 100px;
        }
    </style>

方式二：

    <!-- 内敛样式: -->
    <div style="background-color: blue; height: 200px;width: 200px;"></div>

方式三：

<!--
    外部文件引入
    head标签里面写link标签   -->
    <link rel="stylesheet" href="文件路径">

CSS的选择器

基本选择器

/*元素选择器:*/
    div{  /*标签名字*/
         color:red;
    }


/*id选择器:id值不能重复*/
    #zs{
        color:green;
    }

    <div id="zs">
        今天天气不错
    </div>


/*类选择器: 类值可以重复*/
    .c1{
        color: green;
    }



    div.c1{       /* 更为精细的写法：div标签里面含有class值为c1的标签*/
        color: green;
    }

    <div id="dazhuang" class="c1">
        这里是内容
    </div>
    <div id="xuefei" class="c1">
        这里是内容
    </div>




/*通用选择器*/
*{            /*找到所有的标签*/
    color: green;
}

组合选择器

后代选择器

div a{   /*找到div标签后代里面的所有a标签*/
    color:red;
}

儿子选择器

div>a{           /*找到div的儿子标签这一代的a标签*/
    color:red;
}

毗邻选择器

div+a{     /*找到是紧挨着div标签的下一个标签(是兄弟标签)*/
     color: red;
}

弟弟选择器

div~a{        /*找到的是同级的后面的所有兄弟标签*/
    color: red;
}

属性选择器

    /*通过属性名来查找*/
    [title]{         /*找到所有含有title属性的标签  */
        color: red;
    }

    div[title]{            /*含有title属性的div标签*/
        color: red;
    }
    /*通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='666']*/
    input[type=text]{                /*含有type属性,并且type属性的值为text的input标签*/
        background-color: red;
    }

分组

/*多个选择器选择的标签设置相同css样式的时候,就可以用分组*/
div,p{       /*div选择器和p选择器共同设置相同的样式,可以逗号分隔*/
    color:red;
}

伪类选择器

/*a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线*/

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 ,这个用的比较多,可以应用在其他标签上*/  
a:hover {  
  color: #FF00FF
} 

/* 选定的链接,就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {   /*input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉*/
  #outline: none;
  background-color: #eee;          /*框里面的背景色*/
}

伪元素选择器

         /*伪元素选择器*/
        div:first-letter{
            color: red;
            font-size: 20px;
        }
        /*在p标签内容的前面插入一些内容*/
        p:before{
            content: '?';
            color: green;
            font-size:100px;
        }
        /*在p标签内容的后面插入一些内容*/
        p:after{
            content: '哈哈!';
            color: pink;
        }

选择器的优先级

      /*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式
        id选择器优先级为100*/
        #d1{
            color:deepskyblue;
        }
        /*继承的优先级为0*/
        body{
            color:red;
        }
        /*类选择器的优先级是10*/
        .c1{
            color: blue;
        }
        .c2{
            color: orange;
        }
        /*元素选择器优先级是1*/
        div{
            color: green;
        }
        /*内敛样式优先级为1000*/
        <p class="cc3" style="color: red;">我是cc3的p标签</p>

        /*important优先级最高,最牛逼*/
        .cc1 .cc3 {
            color: purple!important;
        }

css属性相关

高度宽度设置

注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的！

    div{
            width: 100px;  宽度
            height: 100px; 高度
            background-color: pink;
        }

字体属性

字体

.c1{
    font-family: '楷体','宋体','微软雅黑';
}

字体大小

.c1{
            /*font-family: '楷体','宋体','微软雅黑';*/
            font-size:14px; /*默认字体大小为16px.*/

        }

字体颜色

color:red;

补充:a标签的字体颜色设置必须选中a标签才行

.c1 a{  
    color: red;
}

子重,粗细

 .c1{

            font-weight: bold;
            font-weight: 100;
        }

颜色表示方式

        p{
            /*color: red;*/
            /*color: #78FFC9;*/
            /*color: rgb(123,199,255);*/
             color: rgba(123,199,255,0.3);  /*多了一个透明度的数字:0-1的一个数字*/
        }

文字属性

文字对齐：text-align

    div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*text-align: center;*/
            text-align: right;
        }
/*        
    left    左边对齐 默认值
    right    右对齐
    center    居中对齐
*/

文字装饰

    text-decoration

    div a{
            /*text-decoration: none;*/  #给a标签去除下划线
            /*text-decoration: line-through;*/
            text-decoration: overline;
        }

首行缩进

p {
  text-indent: 32px;            /*首行缩进两个字符*/
}

背景属性

/*背景颜色*/
background-color: red;

    div{
            width: 600px;
            height: 600px;
            /*background-color: red;*/
            /*background-image: url("yeye.jpg");*/
            /*background-repeat: no-repeat;*/

             /*相对于div标签的,距离左边100px,距离上面50px*/
            /*background-position: 100px 50px;*/ 
            background:url("yeye.jpg") no-repeat left center;
            /*background-position: right top;*/

        }


/*简写方式,颜色  图片路径 是否平铺 图片位置*/
background:#ffffff url('1.png') no-repeat right top;