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>类>元素;

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

    后设置的优先级高。

  • 相关阅读:
    BZOJ 2212/BZOJ 3702
    BZOJ 4761 Cow Navigation
    BZOJ 3209 花神的数论题
    BZOJ 4760 Hoof, Paper, Scissors
    BZOJ 3620 似乎在梦中见过的样子
    BZOJ 3940 Censoring
    BZOJ 3942 Censoring
    BZOJ 3571 画框
    BZOJ 1937 最小生成树
    BZOJ 1058 报表统计
  • 原文地址:https://www.cnblogs.com/xiongjiawei/p/6749795.html
Copyright © 2011-2022 走看看