css学习:css选择器

在前端开发中，样式是不可或缺的，在进行html样式优化时，总共有三种方式可以选择，分别为：行内样式、内部样式、外部样式。其中，行内样式的优先级最高，其次为外部样式和内部样式，其中，外部样式和内部样式的优先级主要是看谁的代码靠前，越靠前的优先级越高。

行内样式：在标签内部设置的样式，优先级最高。

<div style="color: red;background: blue;">hello</div>

内部样式：在html文件内head中用style设置样式。

<style>
        div{
            color: pink;
            background: gold;
        }
 </style>

外部样式：即css文件，利用link将css文件与html进行连接，实现样式优化，多页面设置样式使用此方法会很方便。

<link rel="stylesheet" href="css/css选择器.css">

利用以下简单的html代码进行css选择器样式优化演示

<div style="color: red;background: blue;">hello</div>
    <div id="xx">文本标签</div>
    <div id="xxcc">文本标签</div>
    <div id="aaxx">文本标签</div>
    <div id="aaxxcc">文本标签</div>
    <div id="aacc">文本标签</div>
    <div>文本标签</div>
    <p class="aa">段落标签</p>
    <p>段落标签</p>
    <p>aa标签</p>
    <span class="aa">demo</span>
    <span>demo</span>
    <span>demo</span>
    <p>此处演示包含选择器(在div之外的p标签)</p>
    <div>
        <p>此处演示包含选择器（在div内的p标签）</p>
        <h4>
            这是在div标签里面h4标签里的p标签
        </h4>
    </div>
    <ul>
        <li class="aa">演示兄弟选择器</li>
        <li>演示兄弟选择器</li>
        <li class="aa">演示兄弟选择器</li>
        <li class="cc">演示兄弟选择器</li>
        <li>演示兄弟选择器</li>
        <li class="aa">演示兄弟选择器</li>
    </ul>
    <ol>
        <li>演示伪类选择器1</li>
        <li class="java">演示伪类选择器2</li>
        <li>演示伪类选择器3</li>
        <li class="pjp">演示伪类选择器4</li>
        <li>演示伪类选择器5</li>
        <li class="java">演示伪类选择器6</li>
        <li>演示伪类选择器7</li>
    </ol>
    <input type="text">

初始页面效果如下：

css选择器语法：本质就是根据条件选择对应的内容，进行样式优化。

选择器{
    属性1:值1;
    属性2:值2;
}

在css学习中，css选择器主要分成三类，下面根据以下三类介绍css选择器的应用。

一、基本选择器

1、元素选择器

用元素名称直接去做选择，进行样式设置。

如下代码，给div元素进行样式设置。

div{
    color: purple;
    background: greenyellow;
}

演示效果如下：

特例：选择所有元素进行样式优化。（会全面覆盖,一般加一些不太明显但是全部标签都需要有的样式）

**{
    color: purple;
    background: greenyellow;
}

演示效果如下：

2、属性选择器

属性选择器可以看成是对元素选择器的一种强化，可以更精确地找到样式优化的对象，属性不只有id，也有class等，哪怕自己造的属性一样可以进行选择。

div[id] 有id属性的div元素
div[id=xx] 有id属性，且id属性值为xx的div元素
div[id*=xx] 有id属性，且id属性值包含xx的div元素
div[id^=xx] 有id属性，且id属性值开头为xx的div元素
div[id$=xx] 有id属性，且id属性值结尾为xx的div元素

div[id$==xx]{
    color:purple;
    background:greenyellow;
}

演示效果如下：

3、id选择器#id

因为id和class属性经常被用到，所以有专门的选择器，当然，也可以用属性选择器。

id选择器不像属性选择器一样灵活，只能是等号。

#xx{
    color: purple;
    background: greenyellow;
}

演示效果如下：

4、class选择器.class

id是唯一的，class不是，可能其他标签里面也有相同的class。因为有更精确的需求，所以产生了结合选择器。

*.aa{
    color: purple;
    background: greenyellow;
}

演示效果如下：

结合选择器：穿着红衣服的人有很多，穿着红衣服的小明只有一个。

/* 特例:结合选择器 */

*p.aa{
    color: purple;
    background: greenyellow;
}

演示效果如下：

5、包含选择器 selector1 selector2 强调包含（一切后代都算）

* div p{
    color: purple;
    background: greenyellow;
}

演示效果如下：

6、子选择器 selector1>selector2 强调父子

* div>p{
    color: purple;
    background: greenyellow;
}

演示效果如下：

7、兄弟选择器 selector1~selector2

只找弟弟，不找哥哥

* .cc~.aa{
    color: purple;
    background: greenyellow;
}

演示效果如下：

所有弟弟

*.cc~*{
    color: purple;
    background: greenyellow;
}

演示效果如下：

8、选择器组合 selector1，selector2，selector3...

*p,
div a,
span{
    color: purple;
    background: greenyellow;
}

演示效果如下：

二、伪元素选择器

伪元素的意思是：好像添加了一个元素（好像多形成了一个新的空间），其实没添加。

1、首字母 ::first-letter 只能用于块级元素（块级元素暂定为只能用着竖着布局的元素）

div::first-letter{
    color: blue;
    font-size: 30px;
    background: greenyellow;
}

演示效果如下：

2、首行 ::first-line 只能用于块级元素（无论浏览器多大，都是第一行，汉字会随着屏幕大小自动换行，全连贯的英文会只有第一行，因为网页会默认为一个单词，解决此问题可以用单词裂开）

div::first-line{
    color: blue;
    font-size: 30px;
    background: greenyellow;
}

演示效果如下：

单词裂开：

* div{
    word-break: break-all;
}

3、在前边插入::before

div::before{
    content: "aaa";
    color: blue;
    font-size: 30px;
    background: greenyellow;
}

演示效果如下：

4、在后面插入::after

div::after{
    content: "aaa";
    color: blue;
    font-size: 30px;
    background: greenyellow;
}

演示效果如下：

三、伪类选择器

1、结构性伪类选择器

    :nth-child()
    括号里可以是数字n n从1开始
    可以是英文单词 odd奇数 even偶数
    括号里可以是表达式 5n+2 n从1开始
    找第一个:nth-child(1)=first-child
    找最后一个:last-child=nath-last-child(1)
    倒着数:nth-last-child()
    只认数字，如果类型刚好符合，则被选中，即对应数字位置上的类型刚好符合要求类型，则被选中
    :nth-of-type()
    括号里可以是数字n n从1开始
    可以是英文单词 odd奇数 even偶数
    括号里可以是表达式 5n+2 n从1开始
    找第一个:first-of-type=nth-of-type(1)
    找最后一个:last-of-type=nth-last-of-type(1)
    倒着数:nth-last-of-type()
    既认数字也认类型，找同类型下的第n个元素

演示代码如下：

ol li:nth-last-of-type(3n+2){
    color: blue;
    background: greenyellow;
}

演示效果如下：

2、ui状态伪类选择器

    :hover 鼠标悬停状态
    :focus 焦点状态
    :checked 选中状态

演示代码如下：

ol li:hover{
    color: blue;
    background: greenyellow;
}

演示效果如下：

演示代码如下：

input:hover{
    color: blue;
    background: greenyellow;
}

演示效果如下：

3、其他伪类选择器

not()排除，即过滤掉某些元素。

ol li:not(.java):not(.php){
    color: blue;
    background: greenyellow;

演示效果如下：

四、选择器的优先级规则

    1、选择器写的越长（越准确），优先级越高
    2、优先级高低:id选择器>class选择器>元素选择器
    3、同级别长度下，class代码按照顺序执行，后面的效果会把前面覆盖
    4、终极规则:以上规则适用于大部分场景，特殊场景不适合，需要自行测试