css学习之选择器

落日映苍穹つ 2022-03-19 08:54 187阅读 0赞

做程序员，UI的设计大概是所有人的硬伤。对于样式的设计，做到能读懂和修改就可以了。  
毕竟专门做这个的有UI设计师和美工，但是平时不阅读样式表，这块也会生疏。  
现在开始复习css的选择器。

一，CSS 元素选择器
    元素选择器是最基本的选择器。
    
    例：h1 {color:blue;}
    注意，可以对html本身设置样式，例，html {color:red;}
    还有一点，就是元素选择器可以设置xml的样式。
    
    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet type="text/css" href="xml.css"?>
    <service>
    <sys>George</sys>
    <body>buddy here</body>
    </service>
    
    xml.css:
    service
    {
      background-color: #afdfe4;
      color: red;
      font-size:60px;
      display: block;
    }
    sys
    {
      color: blue;
      font-size:18px;
      display: block;
    }
    
    body
    {
      color: yellow;
      font-size:18px;
      display: block;
    }
    
    
    如果多个html标签设置的css有相同的部分，这样就会有多余的css代码，就会冗余，
    样式表也很繁杂。把公共的css提取出来，放到一起，就是选择器分组。
    例：h2, div {color:blue;}
    
    二，类选择器。
    这个最常见，就是定义一个样式，任何想用该样式的元素，只要指定就可以了。
    
    <style type="text/css">
    .sty1 {color:red;}
    </style>
    
    <p class="sty1">haha</p>
    
    2-1，如果想限制该样式只能对某元素起作用，可以在前面加上该元素的声明（中间不能有空格）。
    <style type="text/css"> 
    p.sty1 {color:red;}
    </style> 
    
    <p class="sty1">起作用</p>
    <div class="sty1">不起作用</div>
    
    这样设定就防止了该样式表被误用。
    
    2-2，可以对统一元素指定多个类选择器。（用空格隔开）
    例：
    <style type="text/css"> 
    .sty1 {color:red;}
    .sty2 {font-size:60px;}
    </style>
    
    <p class="sty1">111111</p>
    <p class="sty2">22222</p>
    <p class="sty1 sty2">333</p>
    
    
    结果第3个p同时具有sty1和sty2。
    
    三，CSS之ID选择器。
    ID 选择器前面有一个 # 号。对指定id的元素起作用，所以只能使用一次（id一般唯一）。
    
    例：
    <style type="text/css"> 
    #id1 {color:red;}
    </style> 
    
    <p id="id1">起作用</p>
    <p>不起作用</p>
    
    
    四，属性选择器。
    指定有该属性（还可以指定条件是什么）的元素具有该样式。
    属性选择器可以同时指定多个属性条件。
    
    例：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    a[href="http://www.baidu.com"][title="baidu"]
    {
    font-size:60px;
    }
    </style>
    </head>
    
    <body>
    <a href="http://www.baidu.com" title="baidu">百度，起作用</a>
    <a href="http://www.sina.com.cn">新浪，不起作用</a>
    </body>
    </html>
    
    需要特别说明的是，属性选择器是需要指定HTML 或 XHTML 规范。
    即页面最上部的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    如果没有指定，属性选择器可能不起作用。
    同时这个HTML 或 XHTML 规范在同一版本的浏览器的效果才是固定的。
    也就是说，即使你指定了DOCTYPE，实际效果可能也会因为浏览器的版本不同，
    最终和你调试的效果不一样（这就是为什么那么多人讨厌IE的原因之一）。
    总是属性选择器不能百分百信任。
    
    
    关于属性的条件有下面几个;
    Element[attr]	        选择具有 attr 属性的所有元素
    Element[attr="aaa"]	选择 attr 属性值等于“aaa”的所有元素
    
    Element[attr^="def"]	选择 attr 属性值以 "def" 开头的所有元素
    Element[attr$="def"]	选择 attr 属性值以 "def" 结尾的所有元素
    Element[attr*="def"]	选择 attr 属性值中包含子串 "def" 的所有元素
    
    Element[attr~="aaa"]	选择 attr 属性值包含“aaa”的所有元素。
    （注意，这个attr属性的值可以是多个，但必须使用空格隔开的那种格式）。
    
    
    例：<p class="sty1 sty2">333</p>。
    和Element[attr*="def"]不一样，Element[attr*="def"]表示所有属性值中，每个值只要包含子串def，
    就有效。而Element[attr~="aaa"]是指所有属性值中，值必须等于“aaa”才有效。
    
    例：
    
    p[class~="sty1"]{color: red;}
    <p class="sty1">有效</p>
    <p class="sty1aa">无效</p>
    <p class="sty1 sty2">有效</p>
    <p class="sty1bbb sty2">无效</p>
    
    p[class*="sty1"]{color: red;}
    <p class="sty1">有效</p>
    <p class="sty1aa">有效</p>
    <p class="sty1 sty2">有效</p>
    <p class="sty1bbb sty2">有效</p>
    
    
    可见Element[attr*="def"]的范围更广。
    
    还有一个Element[attr|="def"]	选择 attr 属性值中以 "def"开头的所有元素
    例：
    img[src|="sh"] {border: 1px solid gray;}
    效果是所有src以sh开头的图像具有该样式。 
    
    
    
    五，包含选择器。
    包含是指在前面的元素内只要出现后面的元素就应该样式（用空格隔开）。
    
    例：
    div p{color: red;}
    
    <p>不起作用</p>
    <div>不起作用</div>
    <div><p>起作用</p></div>
    <div>
    <div><table><tr><td><p>嵌套很深，也起作用</p></td></tr></table></div>
    </div>
    
    六，子元素选择器。
    子元素是指父元素下面紧邻的元素。
    
    和包含选择器不同之处就在于里面的元素是不是紧邻的第一个元素。
    注意，该样式选择器也需要声明HTML规范，就是最上部的
    <!DOCTYPE HTML>
    或者
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    否则，效果就不好说了，和浏览器有关。
    
    例：
    <style type="text/css"> 
    div>p{color: red;}
    </style>  
    
    <p>不起作用</p>
    <div>不起作用</div>
    <div><p>起作用</p></div>
    <div>
    <div><table><tr><td><p>不是相邻嵌套，就不起作用</p></td></tr></table></div>
    </div>
    
    
    七， 相邻兄弟选择器
    紧接在另一个元素后的元素，而且二者有相同的父元素，对相邻的兄弟元素（加号后者）起作用。
    
    例：
    <style type="text/css"> 
    div+p{color: red;}
    </style>
    
    <p>不起作用</p>
    
    <div>不起作用</div>
    <p>起作用</p>
    
    <div><p>不起作用</p></div>