CSS教程

CSS_1——选择器

本文主要是介绍CSS_1——选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

基本语法结构

image-20210817164735087

如何在网页中插入样式表

  1. 内联样式:直接在元素中设置
  2. 内部样式表:内部头部统一定义
  3. 外部样式表:以css文件定义保存,之后引入

!CSS没有限制空格的使用

CSS通常对于字母大小写不敏感(class和id选择器 例外)

插入样式表的方式存在优先级的差异:内联样式>内部样式表>外部样式表

CSS选择器

通用选择器


    
    
        <style>header{
            background: red;
            }</style>
    
        
        <header><h4>一个无序列表:</h4></header>
        <section> 
            <ul>
                <li>咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

image-20210820170347012

类选择器(class selector)


    
    
        <style>.red{
            background: red;
            }</style>
    
        
        <header class="red"><h4>一个无序列表:</h4></header>
        <section> 
            <ul>
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

image-20210820170621312

id选择器


    
    
        <style>#blue{
            background: blue;
            }</style>
    
        
        <header id="blue"><h4>一个无序列表:</h4></header>
        <section> 
            <ul>
                <li>咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

image-20210820170822752

可以将选择器组合使用,比如若是当初想让指定的某一li元素中的内容变蓝


    
    
        <style>li.red{
            background: red;
            }</style>
    
        
        <header id="blue"><h4>一个无序列表:</h4></header>
        <section> 
            <ul>
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

image-20210820171145653

兄弟选择器

得到这项之后的全部变红。


    
    
        <style>
        li.red~ li {
            background: red;
            }</style>
    
        
        <header id="blue"><h4>一个无序列表:</h4></header>
        <section> 
            <ul>
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

image-20210820182946211

伪类选择器

伪类本质上基于用户如何交互界面来设置元素样式地方法


    
    
        <style>
        li:hover {
            background: red;
            }
        input:focus{background:blue;}
            </style>
        
    
        
        <header id="blue"><h4>一个无序列表:</h4></header>
        <section> 
            <ul>
                <input type="text">
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

hover悬停:鼠标在哪一部分上,那一部分就会泛红

focus:聚焦就会变蓝色

image-20210820202859764

image-20210820202923023

image-20210820202927954

image-20210820203414800

通过nth-child括号中的数字可以进行调整第几个出现效果

属性选择器


    
    
        <style>
        [data-yellow="true"]{
            background: yellow;
        }
        </style>
    
        
        <header data-yellow="true"><h4>一个无序列表:</h4></header>
        <section> 
            <input type="text">
            <ul>
                <li class="red">咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ul>
        </section>
       
        
        
        
        

image-20210820204338709

这篇关于CSS_1——选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!