CSS之选择器

快来打我* 2024-03-24 13:21 62阅读 0赞

**目录**

1.种类

2.基础选择器

2.1标签选择器

2.2类选择器

2.3id 选择器

2.4通配符选择器

3.复合选择器

3.1后代选择器

3.2子选择器

3.3并集选择器

3.4伪类选择器

--------------------

## 1.种类 ##

基础选择器

复合选择器

## 2.基础选择器 ##

### 2.1标签选择器 ###

<style>
            p{
                color: blueviolet;
            }
        </style>

对所有p标签生效

### 2.2类选择器 ###

1.创建类名 ,类名用.开头

2.标签用class属性调用

3.一个类可以被多个标签使用,一个标签可以使用多个类

<style>
            /* .开头的是CSS中的类名 */
            .red{
                color: brown;
            }
        </style>
        
        <p class="red">
            hello world
        </p>
      
        <p>
            hello java
        </p>
        <p class="red">
            hello c
        </p>
        <p>
            hello c++
        </p>

### 2.3id 选择器 ###

1.用\#开头表示

2.id选择器的值和html中元素的id值相同

3.html中id不用带\#

4.id不能被多个标签使用

<style>
            #cpp{
                color: red;
            }
        </style>
        <p id="cpp">
            hello world
        </p>

### 2.4通配符选择器 ###

使用 \* 的定义, 选取所有的标签.

*{
                margin:0;
                padding: 0;
                box-sizing: border-box;
            }

## 3.复合选择器 ##

### 3.1后代选择器 ###

> 选择器1 选择器2\{
> 
> \}

<style>
      /* ul中的li改变样式 */
            ul li{  
                color: red;
            }
        </style>
        <ul>
            <li>cat</li>
            <li>cat</li>
            <li>cat</li>
        </ul>

### 3.2子选择器 ###

> 选择器1>选择器2\{
> 
> \}

不能选择孙辈

<style>
         ul>a{
                color: red;
            }
        </style>
        <ul>
            <li ><a href="#">cat</a></li>
            <li>cat</li>
            <li>cat</li>
        </ul>
        <ol>
            <li ><a href="*">cat</a></li>
            <li>cat</li>
            <li>cat</li>
        </ol>

ul中的a没有变红,因为子代选择器不能改变孙辈

### 3.3并集选择器 ###

并列写多个选择器,中间用逗号分割

> 选择器,选择器\{
> 
> \}

<style>
           
            ul>li,ol>li{
                color: red;
            }
        </style>
        <ul>
            <li ><a href="#">cat</a></li>
            <li>cat</li>
            <li>cat</li>
        </ul>
        <ol>
            <li ><a href="*">cat</a></li>
            <li>cat</li>
            <li>cat</li>
        </ol>

### 3.4伪类选择器 ###

<style>
            div{
                color: #000;
            }
            /* 鼠标悬停的样式 */
            div:hover{
                color: red;
            }
            /* 鼠标按下的样式 */
            div:active{
                color: aquamarine;
            }
        </style>
        <div>这是一个div</div>

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS之选择器

目录 1.种类 2.基础选择器 2.1标签选择器 2.2类选择器 2.3id 选择器 2.4通配符选择器 3.复合选择器 3.1后代选择器 3.2子选择器

快来打我*/ 2024年03月24日 13:21/ 0 赞/ 63 阅读

相关基础选择器之id选择器(CSS、HTML)

基础选择器之id选择器(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head> <me

ゝ一世哀愁。/ 2023年10月03日 12:28/ 0 赞/ 31 阅读

相关 Jmeter之CSS选择器/JQuery选择器关联

选择器： CSS选择器或JQuery选择器是Jmeter支持的两种语法，下面对其两种语法进行简单介绍 CSS选择器 ![1716145-201907311103

野性酷女/ 2023年08月17日 17:30/ 0 赞/ 66 阅读

相关 CSS3之选择器

　　CSS3已经出来有一段时间了。大家天天在使用的选择器又有了些新的选择方法，相比大家一定很兴奋。因为一些头疼的元素都可以轻松选到了。对于这些新问世的选择器来说，大家运用起来还

末蓝、/ 2023年06月25日 10:24/ 0 赞/ 26 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 361 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 362 阅读

相关 JQuery之CSS选择器

1.选择对象 1).基本 ·\id 根据给定的ID匹配一个元素。例如：$("\id") ·element 根据给定的元素名匹配所有元素。例如：$("div") ·.

╰半橙微兮°/ 2022年09月24日 05:23/ 0 赞/ 229 阅读

相关 JQuery选择器之CSS选择器

核心选择器 <table> <thead> <tr> <th>语法</th> <th>描述</th> </tr> </thead>

系统管理员/ 2022年06月03日 20:13/ 0 赞/ 351 阅读

相关 css学习之选择器

做程序员，UI的设计大概是所有人的硬伤。对于样式的设计，做到能读懂和修改就可以了。毕竟专门做这个的有UI设计师和美工，但是平时不阅读样式表，这块也会生疏。现在开始复

落日映苍穹つ/ 2022年03月19日 08:54/ 0 赞/ 251 阅读

相关 css基础之选择器

CSS作用：设置网页结构样式（改变html标签样式），通过CSS给html标签设置属性达到改变标签样式。

骑猪看日落/ 2021年09月15日 01:30/ 0 赞/ 456 阅读