CSS 选择器 and 伪类/伪元素

谁践踏了优雅 2022-12-21 04:56 241阅读 0赞

**CSS 选择器优先级：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性**

伪类选择器，分为：***链接伪类选择器，结构(位置)伪类选择器，目标伪类选择器***

**链接伪类选择器**： 一定要将顺序搞正！ \*\*\* LVHA\*\*\* ===> LV 好！

a:link{ } /*点击超链接之前*/
    a:visited{ } /*链接被点击之后*/
    a:hover{ }
    a:active{ } /*点击不松手的时候*/
    a:focus{ } /*是某个标签获得焦点时的样式（比如某个输入框获得焦点）*/

**结构(位置)伪类选择器：**

li:nth-child( 参数 ){ } /* 如果参数为 odd 时 表示选取所有的奇数位 li 如果参数为 even 时 表示选取所有的偶数位 li 如果为 n 时 相当于自动从 0-4乘以 n 选取所有 li 为 2n 时，选取 0 2 4 8 为 2n+1 时，选取 0 3 5 7 里面的参数为 几 就选择第几个 */
    li:first-child{ } /*选择第一个*/
    li:last-child{ } /*选择最后一个*/

**目标伪类选择器：**

先设置锚点，选择某一个锚点页面跳转至此，跳转后被选择的该锚点的就可以为目标

<a id="catlog" href="#catlog">商品分类</a>
    <a id="about" href="#about">联系我们</a>
    <a id="contact" href="#contact">关于我们</a>
    
    <div id="catlog">商品分类</div>
    ...

a:target { 
     color: #fff;
     background: #fa7a20; 
    }

**伪元素**  
before：从被选择元素前面添加。。。 也可以写成 ::before  
after：从被选择元素后面添加。。。 也可以写成 ::after  
:: first-letter 选择第一个字 ； ::first-line 选择第一行； ::selection 鼠标括起来选中的字体  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]

复合选择器分为：***交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器***

**交集选择器**：

div.log{ XXXXXXX}
    <div class="log"></div>
    <div class="title"></div>

**并集选择器**：

.log, .title{ }
    <div class="log"></div>
    <div class="title"></div>

**后代选择器**： 选择 后代的**所有**，包括直系亲儿子，孙子，重孙等

.con ul li a{ }

**子元素选择器**： 只能选择直系亲儿子，孙子，重孙不能选择

.con > ul > li > a { }

**属性选择器** ：根据标签的属性进行选择

input[type="text"]{ }     /*寻找input 类型为text的元素*/
    input[class*="titles"]{ }    /*寻找类名包含titles的元素*/
    input[class^="tit"]{ }     /*寻找类名以tit开头的元素*/
    input[class$="les"]{ }     /*寻找类名以les结尾的元素*/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/810b24c0ce284e3c9e6d30974b94849d.png