CSS_1——选择器

基本语法结构

CSS_1——选择器

如何在网页中插入样式表

  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>
       
        
        
        
        

CSS_1——选择器

类选择器(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>
       
        
        
        
        

CSS_1——选择器

id选择器



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

CSS_1——选择器

可以将选择器组合使用,比如若是当初想让指定的某一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>
       
        
        
        
        

CSS_1——选择器

兄弟选择器

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



    
    
        <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>
       
        
        
        
        

CSS_1——选择器

伪类选择器

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



    
    
        <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:聚焦就会变蓝色

CSS_1——选择器

CSS_1——选择器

CSS_1——选择器

CSS_1——选择器

通过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>
       
        
        
        
        

CSS_1——选择器

上一篇:CSS基础选择器之类选择器(CSS、HTML)


下一篇:css 伪类和伪类元素的区别