css选择器学习-CSDN博客

本文链接：https://blog.csdn.net/qq_59207203/article/details/128820060

选择器

一、分类

基本选择器：id选择器（#）>类选择器（.）>标签选择器

高级选择器：

①结构伪类：:first-child

:last-child

element:nth-child（）

以上三个是先找相对应位的元素，在判断所在元素是否和element一致

:first-of-type

:last-of-type

element:nth-of-type

以上三个是先将相对应类型的元素排序，在选择相对应的位置

②层次选择器：通用选择器（*）

后代选择器 (中间空格) .fa .son

子代选择器（直接用>）.fa>.son

相邻的后面兄弟选择器（+）.son1+.son2

后面所有兄弟元素（~）

③属性选择器：

④伪元素：：after，：：before（必须与content一起使用）

⑤a元素的伪类：:link>:visited>:hover>:active;（有时link样式不起效果是有可能浏览器反应速度慢，可以换个浏览器试试）

2.复合选择器&并集选择器

二、选择器权重

由低到高

*、继承、兄弟、相邻等 0,0,0,0

标签选择器 0,0,0,1

类选择器 0,0,1,0

ID选择器 0,1,0,0

内联样式 1,0,0,0

！important 1,0,0,0,0

组合选择器各类相加，但不进位

其中结构伪类选择器理解了很久

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p#choose{
         background-color: aqua;
        }
    </style>
</head>
<body>
    <h1 id="choose">id选择器</h1> <!-- 无效 -->
    <p id="choose">正在练习id选择器</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.hometown{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="hometown">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo, totam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, debitis.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       /* li:first-child{
            color: red;
        }  */
       #ul1 li:first-of-type{
            color: red;
        }
       #ul2>li:first-of-type{
            color: blue;
        }
    </style>
</head>
<body>
    <ul id="ul1">
        <h3>标题</h3>
        <li>lprem1</li>
            <li>lprem2</li>
            <li>lprem3</li>
            <li>lprem4</li>
        
    </ul>
    <ul id="ul2">
        <!-- <h3></h3> -->
        <li>科技1</li>
        <li>科技2</li>
        <li>科技3</li>
    </ul>
</body>
</html>