zoukankan      html  css  js  c++  java
  • 【CSS3】选择器

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>    
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7 </head>
     8 <body>    
     9     <h1 class="class1" class="class2">h1标题内容</h1><!--一个元素可以有多个类名称-->
    10     <p class="class1">p段落内容</p>
    11     <div id="div1" class="class1">div的内容</div>
    12 </body>
    13 </html>
    1 p{color:green;}/*元素选择器样式优先级高于通用选择样式*/
    2 *{color: red}/*星号*为通用样式*/
    3 #div1{color: blue}/*id选择器样式高于通用选择器和元素选择器样式*/
    4 div{color: yellow}
    5 .class1{color: pink}/*类选择器样式低于id选择器样式,高于元素选择器样式和通用选择器样式*/
    6 h1.class1{padding: 20px}/*指定类名称为某个特定元素的*/

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>    
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7 </head>
     8 <body>    
     9     <form>
    10         <input type="text" name="text1" style="padding: 10px 20px 30px">
    11         <input type="text" name="text2" style="padding: 15px 25px 35px">
    12         <input lang="en-us" type="tel">
    13         <input type="email" name="email" value="qq@qq.com">
    14         <input type="submit" name="submit" value="确认">
    15     </form>
    16 </body>
    17 </html>
    1 /*input[name]{background: red}*/
    2 /*input[name][value]{background: green}*//*含指定属性的元素*/
    3 /*input[name="email"]{background: blue}*//*指定属性等于指定值的元素*/
    4 /*input[style~='25px']{background:green}*/
    5 /*input[lang|='en']{background: pink}*//*属性值以en开头,并后跟-的元素*/
    6 /*input[name^="e"]{background:red }*//*属性name值以e开头的元素*/
    7 /*input[name$="t"]{background: red}*//*指定属性值以特定字符串结尾的元素*/
    8 input[name*="a"]{background: red}/*指定属性值包含特定字符串的元素*/

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>    
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7 </head>
     8 <body>    
     9     <ul>
    10         <li>第一个li元素
    11             <ol>
    12                 <li>后代选择器</li>
    13                 <li>后代选择器</li>
    14             </ol>
    15         </li>
    16     </ul>
    17     <div>
    18         <h1>h1h1</h1>
    19         <p>p标签</p>
    20         <h2>h2标签</h2>
    21         <h1>h1标签</h1>
    22     </div>
    23     <h1>第3个h1标签</h1>
    24 </body>
    25 </html>
    1 /*ul li{background: red}*/
    2 /*ul>li{color: red;border:1px solid;}*//*颜色会被继承下去。边框不会被继承,只对子级有效,对孙级无效。*/
    3 /*div h1{color: red}*/
    4 /*p+h1{color: red}*//*紧贴在p之后的h1元素,如果p和h1之间有其他元素则无效*/
    5 p~h1{color: red}/*p之后的所有h1,p之前的h1无效,p之后的h1和p之间有其他元素不会干扰。超出同个父级标签范围之后的h1无效*/

    伪元素选择器:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>    
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7 </head>
     8 <body>    
     9     <p>
    10         万里长城永不倒<br>
    11         千里黄河水涛涛
    12     </p>
    13 </body>
    14 </html>
    1 /*伪元素选择器*/
    2 p::first-letter{color: red;font-size: 60px}
    3 p::first-line{background: red}
    4 p::before{content: "前插入内容"}
    5 p::after{content: "后插入内容"}/*不止插入文字,还可插入图片等*/
    6 p::selection{background: pink}

    结构伪类选择器:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>    
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7 </head>
     8 <body>    
     9     <ul>
    10         <li>第一个子元素</li>
    11         <ol>
    12             <li>第1个子元素</li>
    13             <li>第2个子元素</li>
    14             <li>第3个子元素</li>
    15         </ol>
    16         <li>第二个子元素</li>
    17         <li>第三个子元素</li>
    18     </ul>
    19     <ul><li>仅有的一个无序列表</li></ul>
    20     <ol><li>仅有的一个有序列表</li></ol>
    21     <div>
    22         <h1>父元素下同类型h1元素只有一个</h1>
    23         <p>父元素下同类型p元素只有一个</p>
    24     </div>
    25     <div>
    26         <p>父元素下同类型p元素只有一个</p>
    27     </div>
    28     <div>
    29         <p>父元素下同类型p元素有两个。有子元素。
    30             <h2>h2元素</h2>
    31         </p>
    32         <p>父元素下同类型p元素有两个</p>
    33     </div>
    34     <div></div>
    35 </body>
    36 </html>
     1 /*伪类选择器*/
     2 /*结构伪类选择器*/
     3 /*:root{background: blue};*//*root指html标签*/
     4 /*li:first-child{color: red}*//*要满足两个条件:1.是li元素;2.是其父元素的第一个子元素*/
     5 /*ol>li:first-child{background: green}
     6 ul>li:last-child{color:blue;}*/
     7 /*p:only-child{background: red}*//*要满足两个条件:1.是p元素;2.p元素的父元素内只有一个元素*/
     8 /*p:only-of-type{color: green}*//*要满足两个条件:1.是p元素;2.p元素的父元素内只有一个p元素*/
     9 /*li:first-of-type{color: red}*//*要满足两个条件:1.是li元素;2.li元素的父元素内是第一个li元素。即匹配同级同类型第一个元素*/
    10 /*li:last-of-type{color: red}*//*要满足两个条件:1.是li元素;2.li元素在父元素内是最后一个li元素。即匹配同级同类型最后一个元素*/
    11 /*li:nth-of-type(2){color: red}*//*要满足两个条件:1.是li元素;2.li元素的父元素内是同类型第2个li元素。即匹配同级同类型第2个元素*/
    12 /*li:nth-last-of-type(1){color: green}*//*要满足两个条件:1.是li元素;2.li元素的父元素内是同类型倒数第一个li元素。即匹配同级同类型倒数第1个元素*/
    13 /*li:nth-child(2){color: red}*//*要满足两个条件:1.是li元素;2.li元素是父元素内第2个元素*/
    14 /*li:nth-last-child(1){color: green}*//*要满足两个条件:1.是li元素;2.li元素是父元素内倒数第1个元素*/
    15 /*li:nth-child(odd){color: red}*//*要满足两个条件:1.是li元素;2.li元素是父元素内第奇数个元素*/
    16 /*li:nth-child(even){color: red}*//*要满足两个条件:1.是li元素;2.li元素是父元素内第偶数个元素*/
    17 /*li:nth-child(3n){color: red}*//*要满足两个条件:1.是li元素;2.li元素是父元素内第3n个元素。还可用3n+1等各种表达式*/
    18 div:empty{width: 300px;height: 200px;background: red}/*要绝对的空,连内容都不能有,空格都不能有*/

    UI伪类选择器、其他伪类选择器:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>    
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7 </head>
     8 <body>    
     9     <a href="">链接</a>
    10     <a href="">链接2</a>
    11     <a href="#p1">链接到target</a>
    12     <form>
    13         <input type="text" name="">
    14         <input type="email" name="">
    15         <input type="tel" name="" lang="zh-CN">
    16         <input type="checkBox" name="" disabled="">复选框
    17         <input type="radio" name="">单选按钮
    18     </form>
    19     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    20     <p lang="" id="p1">target链接过来的文本内容</p>
    21 </body>
    22 </html>
     1 /*伪类选择器*/
     2 /*UI伪类选择器*/
     3 /*a:active{background: blue}*/
     4 /*a:hover{background: blue}*/
     5 /*a:link{color: pink;background: green}*//*未访问过的链接颜色设置要放在访问过的设置之前才有效*/
     6 /*a:visited{color: red}*/
     7 /*input:focus{background: pink}*/
     8 /*input:lang(zh-CN){background: pink}*/
     9 /*input:checked{ 20px;height: 20px}*/
    10 /*input:disabled{ 30px;height: 30px}*/
    11 /*input:enabled{ 30px;height: 30px}*/
    12 /*p:target{color: red}*//*p元素的内容在被链接过来时会使用的样式*/
    13 :not(a){color: red}

     选择器优先级:

    一般情况:行内样式>ID>类>元素;

    范围更小,描述更精准的优先级高;

    后设置的优先级高。

  • 相关阅读:
    Go开发环境搭建
    es入门小结
    Python操作ES
    mongodb
    RBAC-基于角色的访问控制 django缓存、信号、xadmin使用
    drf序列化群增、群改、群删
    drf过滤、分页、全局异常处理
    VS配置IISExpress外部IP访问
    Oracle中tnsping命令解析
    oracle导入Excel数据文件(大量数据)处理方法
  • 原文地址:https://www.cnblogs.com/xiongjiawei/p/6749795.html
Copyright © 2011-2022 走看看