关于选择器

Posted 2020-10-15

　　这里，介绍一下常用的css选择器。

一、元素选择器

　　元素选择器也成类型选择器或者简单选择器，用来寻找特定类型的元素。Ps:这没啥可说的，最基本的选择器。

　　比如：

body{
  background-color:#ccc;  
}
//这里通过元素选择器给body元素设置背景颜色

二、类选择器与ID选择器

　　简单介绍一下这两个，类选择器就是通过给元素设置class属性，从而可以通过类选择器找到该元素；而ID选择器就是通过给元素设置id属性，从而获取某个元素。

　　举个栗子：

#intro{
  font-size: 1.75em;
}
//给ID为intro的元素添加样式

.main{
  color: red;
}
//给类名为main的元素添加样式

注意：

　　这里面需要强调的是：对于一个元素何时用ID而又何时用类名？

　　一般原则是：类名应该用在概念相同的元素上面，这些元素可以在同一页面上出现于多个位置；而ID应该用在不同的唯一的元素。如果我们布局时，考虑到某个元素确实绝不会在页面的其他位置上出现时，那就用ID吧；如果认为这个元素以后也会用到，那么最好用类名。（题外话：在布局时，尽量避免“多类症”）

三、伪类选择器

　　伪类选择器，一般我们需要根据文档之外的其他条件对元素应用样式，例如链接的不同状态。

　　伪类选择器包括两种：链接伪类选择器以及动态伪类选择器

　　1.链接伪类选择器

　　css2.1定义了两个只应用于超链接的伪类：

• ：link            指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。
• ：visited       指示作为已访问地址超链接的所有锚

　　2.动态伪类选择器

　　css2.1定义了3个动态伪类，可以根据用户的行为改变文档的外观

• ：focus         指示当前拥有输入焦点的元素
• ：hover         指示鼠标指针停留在哪个元素上
• ：active        指示被用户输入激活的元素

注意：

　　兼容性：大多数浏览器都支持这几个伪类选择器；但是对于“神”一样的IE来说，IE6只注意应用于锚链接的：active与：hover，完全忽略：focus；IE7在任何元素上都支持：hover，但是会忽略：active以及：focus。

　　而对于IE来说，如果确实想要实现效果，那么可以通过JS脚本来实现特定的效果！

　　由于层叠性的原因，通常建议伪类的顺序为：“link-visited-hover-active”(LVHA)或者“link-visited-focus-hover-active”。

四、通用选择器

　　这个选择器据说是所有选择器中最强大的但是确实很少用的选择器。一般用来对于页面上的所有元素添加样式。

　　例如：

*{
  padding: 0;
  margin: 0;
}

注意：

　　利用了通配选择器另一个用法，就是可以与其他选择器结合使用，从而实现对某个元素的所有后代应用样式，或者跳过一级。比如：IE6以及早期版本的浏览器并不支持子选择器，因此可以利用通配符选择器模拟。

　　

<ul id="lists">
        <li>Drink</li>
        <li>Food
            <ul>
                <li>Fruit</li>
                <li>Meat</li>
                <li>Snack</li>
            </ul>
        </li>
        <li>Clothes</li>
        <li>Shoes</li>
    </ul>

　　需求：如果此时我想只让lists的直接子元素li的背景加上一个小图标。那么如果在IE7+（包括IE7）以及其他现代浏览器中，直接利用子选择器即可；那么在IE6以及早期版本如何进行兼容处理？如下：

        #lists li {
            background:url(img/folder.png) no-repeat left top;
            padding-left:20px;
        }

        #lists li * {
            background:none;
            padding-left:0;
        }

        #lists > li {
            background:url(img/folder.png) no-repeat left top;
            padding-left:20px;
        }        

 

五、子选择器、后代选择器以及相邻同胞选择器

 　　这三个选择器中前两个是最容易搞糊涂的，子选择器（“>”）只针对元素的直接子级元素，不包括子级的子级（只针对儿子，不针对孙子...）；

而后代选择器是针对元素的后代所有指定的元素，包括儿子以及孙子...

　　注意：子选择器的兼容性--IE7以及更高版本、其他现代浏览器，不过对于IE7来说，如果父元素以及子元素之间有注释，会产生BUG！！！对于IE6以及早期版本的处理方法前面已经说过了。

　　相邻同胞选择器：用于指定同一个父元素下的某个元素只有的一个元素。

　　其兼容性：IE7以及以上、其他现代浏览器，不过与子选择器一样，在IE7下，如果父元素与子元素之间出现注释，会出现BUG！！！

 

六、属性选择器

　　属性选择器就是根据元素的某个属性或者属性值或者是否存在某个属性来查找元素。（CSS3对于属性选择器进行了扩展，在这里先讨论CSS2）

•  E[attr]    ：表明匹配拥有attr属性E元素，有时也可以省略E

例如：

a[rel]{
    color: #eee;      
}

 

• E[attr = val]    :表明匹配拥有attr属性，并且属性值为val的元素E，有时也可以省略E

例如：

a[rel = "next"]{
    display: block;
    
}

 

 

• E[attr |= val]    :表明匹配拥有attr属性，并且属性值是val或者是以val-开头的元素E。这个选择器通常用于指定语言，如果一个页面中有多个语言编辑的，可以利用该属性匹配

例如：

p[lang |= "en"]{
    color: pink;
}

 

• E[attr ~= val]   ：表明匹配拥有attr属性，并且元素属性值具有多个空格分隔的值，其中一个值等于val（这个选择器很容易与E[attr *= val]混淆，后者是元素属性值包括这个vL字符串就行，不要求独立的val）

例如：

.intro[title ~= "more"]{
    text-decoration: unferline;
    font-weight: bold;
    color: #ff0000;
}
在这里如果html中的带有.intro类名的标签中，title属性为“more”或者“muchmore”...类似于这种的，都会被匹配！