CSS3学习笔记

最新推荐文章于 2023-09-08 07:37:31 发布

董洪任

最新推荐文章于 2023-09-08 07:37:31 发布

阅读量608

点赞数

分类专栏：网页设计文章标签： css3

本文链接：https://blog.csdn.net/weixin_44570415/article/details/104873671

版权

CSS3选择器

概念：

CSS是层叠样式表（Cascading Style Sheets）的简称，并且它是增量式，向后兼容，所以它支持CSS3以前的所有的版本，当然包括CSS2的内容，CSS3也称作级联样式表或者是层级样式表。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的

基本选择器：

回顾css选择器：通配符选择器，元素选择器，类选择器，ID选择器，后代选择器
新增选择器：子选择器，相邻兄弟选择器，通用兄弟选择器，群组选择器

基本选择器——子选择器

概念：子选择器只能选择某元素的子元素
语法格式：父元素>子元素
兼容性：ie8+

基本选择器——相邻兄弟选择器

概念：可以选值紧接在另一元素后的元素，而且他们具有相同的父元素
语法格式：元素+兄弟相邻元素
兼容性：ie8+
相邻兄弟选择器例子

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        section > div + article{
    
            color: #f00;
        }
    </style>
</head>
<body>
<section>
    <div>article外面的文字</div>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
</section>

效果：相邻兄弟选择器效果

基本选择器——通用兄弟选择器

选择某元素后面的所有兄弟元素，而且他们具有一相同的父元素
语法格式：元素~后面所有兄弟相邻元素
通用兄弟选择器例子

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        section > div ~ article{
    
            color: #f00;
        }
    </style>
</head>
<body>
<section>
    <article>
        <div>article里面的文字</div>
    </article>
    <div>article外面的文字</div>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>
    <article>
        <div>article里面的文字</div>
    </article>

效果：
通用兄弟选择器

基本选择器——群组选择器

概念：把具有相同样式的元素分组放在一起，每个选择器之间使用逗号“,”，隔开
语法格式：元素一,元素二,…,元素n
兼容性：ie6+
群组选择器例子

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        section > article,
        section > aside,
        section > div{
    
            color: #f00;
            margin-top: 10px;
            background: #abcdef;
        }
    </style>
</head>
<body>
<section>
     <article>article</article>
     <aside>aside</aside>
     <div>div</div>
</section>

效果：
在这里插入图片描述

属性选择器：

对带有指定属性的HTML元素设置样式
使用css3属性选择器，可以只指定元素的某个属性，或者还可以同时指定元素的某个属性和其对应的值

Element[attribute] //元素【属性】选择器

概念：选值所有带有attribute属性的元素
兼容性：ie8+
Element[attribute]例子

<style type="text/css">
        a[href]{
    
            text-decoration: none;
        }
    </style>
</head>
<body>
 <a href="#">attribute</a>   
</body>

效果：
在这里插入图片描述

Element[attribute=“value”] //元素【属性的某一个值】选择器

概念：选择所有使用attribute="value"的元素
兼容性：ie8+
Element[attribute="value"]例子

 <style type="text/css">
        a[href]{
    
            text-decoration: none;
        }
        a[href="#"]{
    
            color: #f00;
        }
    </style>
</head>
<body>
 <a href="attribute.html">attribute</a> 
 <a href="#">attribute</a>    
</body>

效果：
在这里插入图片描述

Element[attribute~=“value”] //元素【属性~=一个值】选择器

概念：选择attribute属性包含单词value的元素
Element[attribute~=“value”]选择器用于选取属性值中包含指定词汇的元素，只要是指定的属性，并且属性值列表中包含value，而不是在某个值中以value开头或结尾
兼容性：ie8+
Element[attribute~="value"]例子

    <style type="text/css">
        a[href]{
    
            text-decoration: none;
        }
        a[href="#"]{
    
            color: #f00;
        }
        a[class~="two"]{
    
            color: #f00;
        }
    </style>
</head>
<body>
 <a href="attribute.html">attribute</a> 
 <a class="one two" href="#">attribute</a>  
 <a class="two three" href="#1">attribute</a> 
 <a href="#2">attribute</a> 
 <a href="#3">attribute</a> 
 <a href="#4">attribute</a>   
</body>

效果：
在这里插入图片描述

Element[attribute^=“value”] 和 Element[attribute$=“value”]

概念：选择attribute属性值以value （某一个值/单词/名字）开头/结尾的所有元素
兼容性：ie8+
Element[attribute^=“value”]匹配指定属性的指定value值开头的元素，如果class中有多个value值，第一个值中的第一个字母不是指定的值，即使后面的属性中首字母是指定的值，那么也不能匹配上
Element[attribute^="value"] 和 Element[attribute$="value"]的例子

    <style type="text/css">
        a[href]{
    
            text-decoration: none;
        }
        a[href="#"]{
    
            color: #f00;
        }
        a[class~="two"]{
    
            color: #f00;
        }
        a[href^="#"]{
    
            color: #0f0;
        }
        a[href$="#"]{
    
            color: #f00;
        }
    </style>
</head>
<body>
 <a href="attribute.html">attribute</a> 
 <a class="one two" href="#">attribute</a>  
 <a class="two three" href="#1">attribute</a> 
 <a href="#2">attribute</a> 
 <a href="#3">attribute</a> 
 <a href="#4">attribute</a>  
 <a href="2#">attribute</a> 
 <a href="3#">attribute</a> 
 <a href="4#">attribute</a>  
</body>

效果：
在这里插入图片描述

Element[attribute*=“value”]

概念attribute属性值包含value（包含这个字符串就好）的所有元素
Element[attribute*="value"] 的例子

    <style type="text/css">
        a[href*="#"]{
    
            color: #f00;
        }
    </style>
</head>
<body>
 <a href="attribute.html">attribute</a> 
 <a class="one two" href="#">attribute</a>  
 <a class="two three" href="#1">attribute</a> 
 <a href="#2">attribute</a>

最低0.47元/天解锁文章

董洪任

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记

目录CSS3选择器概念：基本选择器：基本选择器——子选择器基本选择器——相邻兄弟选择器基本选择器——通用兄弟选择器基本选择器——群组选择器属性选择器：Element[attribute] //元素【属性】选择器Element[attribute="value"] //元素【属性的某一个值】选择器Element[attribute~="value"] //元素【属性~=一...
复制链接

扫一扫