css新增样式

最新推荐文章于 2024-07-24 13:52:24 发布
小晕子韵
最新推荐文章于 2024-07-24 13:52:24 发布
阅读量113
点赞数
文章标签： css html css3
本文链接：https://blog.csdn.net/qq_57064821/article/details/128750484
版权
                    
                        
                    
                    css新增样式 
1、css3的两个概念 
1、两个基本概念 
  （1）渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，针对高级浏览器进行效果、交互等改进和追加功能达到更好的体验
（2）优雅降级：一开始就构建完整的功能，然后再针对低级的浏览器进行兼容。
（3）两者的区别，优雅降级是从复杂的现状开始，并试图减少用户体验的供给，奖金增强是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要，降级意味着往回看，而渐进增强意味着朝前看，同时保证其根基位于安全地带。
 
 
2、选择器： 
1、层级选择器 
  子代选择器：父类加空格，子代选择器：父类加>
兄弟节点选择器，兄弟类+另外兄弟类的标签名，查找最近的一个兄弟。
兄弟类~其他兄弟的标签，选中往后的所有兄弟标签。
 
2、属性选择器 
  （1）把包含某个属性的标签选择出来。
（2）格式是在style中使用中括号选择所需要选择的属性,下边的代码意思为把包含class属性的内容选择出来加上背景颜色。
 css格式
 [class]{
        background-color: aqua;
    }
 html设置<body>
<div class="111">div-111</div>
<div class="222">div-222</div>
<div>div-333</div>
<p class="p1">p-111</p>
<p class="p2">p-222</p>
<p>p-333</p>
</body>
 
  (3)把所有有class属性的div选择出来。
 css设置
 div[class]{
        background-color: blue;
    }
 html设置如上 
  （4）选择class为111的标签，等号是完全匹配，如果有两个class值，则选择不上。
 p[class=p1]{
        border: 1px solid red;
    }
 包含即选择p[class~=p1]{
    border:1px soild red;
}
 
  (5)模糊匹配——只要包含某字母就能匹配
 class^=b:以b开头的
 class$=b:以b结尾的
 class*=b:包含b的
 开头为b的div class选择器应用。
 div[class^=b]{
    background-color:red;
}
 
3、结构伪类选择器 
  （1）结构性伪类选择器：可以利用关键字进行选择，比如选择某个类的第一个孩子，或者最后一个孩子。
 比如将box中的最后一个div的右边距清零。
 .box div:last-child{
    margin-right:0;
}
 
  （2）找li的第一个孩子
 ul li:first-child{
    background-color:red;
}
 找li的最后一个孩子ul li:last-child{
    background-color:red
}
 找li的任意第几个孩子第二个
li:nth-child(2){
    background-color:red;
}
选择偶数个的2n或者even
li:nth-child(2n){
    background-color:red;
}
选择奇数个2n+1或者odd
li:nth-child(2n+1){
    background-color:red;
}
 
  (3)独生子女onlychild选择器,找只有一个孩子的标签
 div p:only-child{
    background:red;
}
 
  (4)空内容选择器：选择没有孩子的标签,空格回车符也算是孩子，有空格回车的也不饿能选中
 div empty{
    background:red;
}
 
  （5）root选择器：选择根节点，一般用来代替html
 
4、目标伪类选择器 
  结合锚点使用的，锚点：就是实现一个跳转的功能，规定好id，然后在a链接上加上herf属性，值为#锚点的名字。
目标选择器：
 div:target{
    background:red;
}
 
  折叠面板：可以使用目标选择器实现
 <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    div.content{
        display: none;
    }
    div.content:target{
        display: block;
    }
</style>
</head>
<body>
<div>
    <a href="#aaa">aaa</a>
    <div id="aaa" class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus ipsum aperiam animi ipsam magnam minus magni at dolorum. Tenetur voluptatibus culpa maiores dolores odit, facere iste aut veritatis? Necessitatibus, amet?</div>
</div>
<div>
    <a href="#bbb">bbb</a>
    <div id="bbb" class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus ipsum aperiam animi ipsam magnam minus magni at dolorum. Tenetur voluptatibus culpa maiores dolores odit, facere iste aut veritatis? Necessitatibus, amet?</div>
</div>
<div>
    <a href="#ccc">ccc</a>
    <div id="ccc" class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus ipsum aperiam animi ipsam magnam minus magni at dolorum. Tenetur voluptatibus culpa maiores dolores odit, facere iste aut veritatis? Necessitatibus, amet?</div>
</div>
</body>
</html>
 
5、UI元素状态伪类选择器 
  （1）enabled匹配所有用户界面中（form表单中）处于可用状态的E元素。
（2）disabled匹配所有用户界面中处于不可用状态的E元素。
（3）checked匹配所有用户界面中处于选中状态的E元素。
（4）selection匹配E元素中被用户选中或处于高亮状态的部分。
 input:enabled{
        /* 选中可用状态的 */
        background-color: red;
    }
    input:disabled{
        background-color: yellow;
        /* 选中禁用状态的 */
    }
    input:focus{
        /* 设置页面中聚焦的标签的背景颜色 */
        background-color: blue;
    }
    input[type=checkbox]{
        /* 去掉默认样式 */
        appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid black;
    }
    input:checked{
        /* 设置checkbox被选中之后的颜色 */
        background-color: green;
    }
    div::selection{
        /* 修改div中选中的文字的背景颜色 */
        background-color: aqua;
        color: red;
    }
 
  注意：checkbox框会受到默认样式的管控，需要清除默认样式再进行设置。
 
6、否定伪类选择器 
  （1）在伪类选择器前加上not就行。格式为：
 <!--选定除了第一个孩子以外的所有的标签-->
li:not(:first-child){
    background:red;
}
 
  （2）动态伪类选择器 
    E：link连接伪类选择器：超链接未被访问过
 E:visited：超链接已经被访问过。
 E:active：匹配元素被激活
 E:hover：用户鼠标停在元素E上。
 
 

                