2.css选择器_html/css_WEB-ITnose

程序员文章站 2022-05-27 15:45:32

...

　　由第一节的语法结构可以看出css语言的核心思想就是：找到对象，然后对选定的对象进行属性赋值。其中，css中对象的选择，依靠的就是选择器。当掌握了选择器以后，就能够指哪打哪，弹无虚发了。

　　css的选择器有许多种，下面来逐一介绍：

　　1.基本选择器

　　　　使用简单且频率高的一些选择器这里归类为基本选择器，而基本选择器有包含下的内容：

　　　　1.1 通用选择器

* {    border: 1px solid red;             }

　　　　说明：通用选择器的核心就是使用统配符*作为对象标识，在很多语言中，*的含义是指代所有对象，也就是所HTML文件中的所有标签都会被选中，包括

和标签。但这通常不是我们想要的结果，所有一般情况下也用不到。

　　　　1.2 元素选择器　　　

p {    color: red;}

　　　　说明：这里的元素其实就是HTML里面的标签，例如这里的p，就是指

标签。通过使用元素选择器就可以选择特定的标签，但是要注意，元素选择器会选择HTML文档内的所有同名标签。样式的设置会对所有选中的对象生效。

　　　　1.3 ID选择器

#abc {    font-size: 20px; }

//段落

　　　说明：ID选择器会根据全局属性id的值，来选择对象，如上面的

标签所示。理论上选择到的元素是唯一的，因为根据html语言的标准，id值在一个页面中应该是唯一的。但是如果出现相同的id值，可能会选中相同id值的元素。（这个行为会根据浏览器的不同而不同，所以对不同的元素设置相同的id值要极力避免，以免发生不可估计的错误）

　　　　1.4 类选择器　

.abc {    border: 1px solid red; }

//加粗
//无

　　说明：类选择器针对的是元素内class属性的值，这是常用的多对象选择器，如果有多个元素的class属性含义同样的值，那么这些元素都会被选中。

　　　　1.5 属性选择器

/*css2*/[href] {     color: orange;} 

//
//

　　说明：属性选择器是css2版本新增的选择器，不过到了现在HTML5全面普及的时代，一般的主流浏览器的最新版本都应该支持。其意思是如果标签含有指定的属性，都会被选中，也就是选中多个。如上面的例子所示，其中href属性是所有标签必须声明的属性，这种写法将选中HTML页面中的所有标签。

　　　　关于属性选择器还有下面这些扩展:

/*css2*/[type="password"] {     border: 1px solid red; } 

//

　　　　说明：该选择器进一步限制了除了要有相应的属性之外，其属性的值也要符合要求。当有多个对象符合要求时，也会选中多个对象。

/*css3*/[href^="http"] {     color: orange;}

　　　　说明：这是css3版本中新增的，加入了正则匹配的部分特性，如上面例子表示属性的值的开头必须是http。

/*css3*/[href$=".com"] {    color: orange; }

　　　　说明：与开头匹配相对的，这里是结尾匹配。

/*css2*/
[href*="baidu"] {    color: orange; }

　　　　说明：这里表示，只要属性的值中含有指定的字符就能匹配，不管字符是在开头还是结尾。

/*css2*/
[class~="edf"] {    font-size: 50px; }

//

　　　　说明：当一个属性含有多个值的时候，可以用这个方式选择。

/*css2*/
[lang|="en"] {     color: red;} 

//

　　　　说明：当属性有多个值，且多个值间是使用-号分隔的时候，可以使用这个选择器。

2.复合选择器

　　将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

　　2.1 分组选择器

p,b,i,span {     color: red; }

　　　　说明：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。

　　2.2 后代选择器

p b {    color: red; } 

//
//　　a
//　　b
//　　


//　　　　c
//　　

//

//注意：这里标绿色不是css样式设置后的结果，只是表面选择器选中了哪个，下同。

　　　　说明：选择

元素内部所有元素。不在乎的层次深度，也就是父级元素内不管嵌套了几级，只要有都会被选中。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。

　　2.3 子代选择器

ul > li {    border: 1px solid red; }

//

　　　　说明:子代选择器和后代选择器类似，但是子代选择器只能选择父级元素的下一级元素，而后代选择器不限制层次的深度。

　　2.4 相邻兄弟选择器

p + b {    color: red; }

//

//
//

　　　　说明：相邻兄弟选择器匹配和第一个元素相邻的第二个元素，第三、第四之类的不会匹配。

　　2.5 普通兄弟选择器

p ~ b {    color: red; }

//
//

　　　　说明：普通兄弟选择器匹配和第一个元素后面的所有元素，不管有几个。
　　　　注意：无论是相邻兄弟选择器还是普通兄弟选择器都不会先前选择。

3.伪元素选择器

　　伪元素选择器是更具某些特征来选择的选择器，在css3中引入，其语法特征是包含两个冒号（::）具体如下：

　　3.1 ::first-line 块级首行

div::first-line {     color: red; }

　　　　说明：块级，只要是针对

、

等带有块级属性的标签的选择器，将选中其首行的文本，进行特定的样式设置。若不在前指定特点的标签，则当前页面的所以块级元素将生效。

　　3.2 .::first-letter 块级首字母

div::first-letter {    color: red;}

　　　　说明：块级元素的首行字,若是中文文本，将选中第一个中文字符，其他同上。

　　3.3 ::before 文本前插入

a::before {     content: '点击'; } 

//我　　//设置前
//点击我　　//设置后

　　　　说明：这个倒不限制是否是块级元素，多配合content属性使用，在文本前插入内容。

　　3.4 ::after 文本后插入

a::after {     content: '很帅';
}

//我　　//设置前
//我很帅　　//设置后

　　　　说明：在文本后插入内容。（如上所示，能一秒成帅哥）

　　3.5 ::selection 文字选择时触发

span::selection {    color:red;      }

　　　　说明：所谓选择时触发，即是按住鼠标左键选择多个文字的时候。如上设置，表示选择后文字变成红色。

4.伪类选择器

　　伪类选择器和为元素选择器类似，也是按照某些特征进行选择。其语法特点是包含一个冒号（:），所以和伪元素选择器很容易混淆。伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：
　　4.1 结构性伪类选择器

　　结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。

　　4.1.1 根元素选择器

:root {    border: 1px solid red;}

　　　　说明：匹配文档中的根元素，基本不怎么用，因为总是返回

元素。

　　4.1.2子元素选择器

ul > li:first-child {    color: red;}

//

　　　　说明：这里先用子代选择器选择里

元素，此时可能选中了多个子代元素，再用:first-child表示选择这些子代中的第一个。
```
ul > li:last-child {    color: red;} 
```
```
//
```
- a
- a
　　　　说明：相对的，也能选择子代中的最后一个。
```
ul > li:only-child {    color: red;} 
```
```
//
```
- a
```
//
```
- a
- a
　　　　说明:选择只有一个子元素的那个子元素。如上面例子所示，第一个
- ，而第二个
  - ，此时，第一个
    - 将被选中。
```
ul > li:only-of-type {    color: red;}

//
```
      - a
      - a
```
//
```
      - a
      　　　　说明：这里的情况比较复杂，该选择器表面的是子代中只能有一个指定的类型是，才能被选择。如上面例子所示：第一个
      - 元素，而第二个
        的子代除了
        之外，还有
        。此时，只有第一个
        
        的子代
        才能被选中。注意，选择的还是子代元素。
        
        　　4.1.3 nth-child(n)系列
        
        ul > li:nth-child(2) { color: red; }
        
        //
        
        //　　
        a
        
        //　　
        a
        
        //　　
        a
        
        //　　
        a
        
        //
        
        　　　　说明：选择子代元素中的第n个元素。
        
        ul > li:nth-last-child(2) { color: red;}
        
        //
        
        //　　
        a
        
        //　　
        a
        
        //　　
        a
        
        //　　
        a
        
        //
        
        　　　　说明：选择子代元素中的倒数第n个元素。
        
        div > p:nth-of-type(2) { color: red;};
        
        //
        
        //　　1
        //　　
        2
        
        //　　3
        //　　
        4
        
        //
        
        　　　　说明：选择特定子元素的第n个。
        
        div > p:nth-last-of-type(2) { color: red;};
        
        //
        
        //　　1
        //　　
        2
        
        //　　3
        //　　
        4
        
        //
        
        　　　　说明：选择特定子元素的倒数第n个。
        
        　　4.2 UI 伪类选择器
        
        　　UI 伪类选择器是根据元素的状态匹配元素。
        
        　　4.2.1 :enabled
        
        input:enabled { border: 1px solid red;}
        
        //
        
        　　　　说明：选择启用状态的元素，多配合表单使用。
        
        　　4.2.2 :disabled
        
        input:disabled { border: 1px solid red;}
        
        //
        
        　　　　说明：选择禁用状态的元素。
        
        　　4.2.3 :checked
        
        input:checked { display: none;}
        
        　　　　说明：选择勾选的input元素。
        
        　　4.2.4:default
        
        input:default { display: none;}
        
        　　　　说明：从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。
        
        　　4.2.5 :valid 和:invalid
        
        /*验证合法时*/input:valid { border: 1px solid blue;}/*验证不合法时*/input:invalid { border: 1px solid green;}
        
        　　　　说明：输入验证合法与不合法显示时选择的元素。
        
        　　4.2.6 :required 和:optional
        
        /*当表单字段是必填项时*/input:required { border: 1px solid blue;} /*当表单字段是非必填项时*/input:optional { border: 1px solid green;}
        
        　　　　说明：根据是否具有 required 属性选择元素。
        
        　　4.3 动态伪类选择器
        
        　　4.3.1 link 和 visited
        
        a:link { color: red;} a:visited { color: orange;}
        
        　　　　说明： :link 表示未访问过的超链接，:visited 表示已访问过的超链接。
        
        　　4.3.2 :hover
        
        a:hover { color: blue;}
        
        　　　　说明：表示鼠标悬停时。
        
        　　4.3.3 :active
        
        a:active { color: green;}
        
        　　　　说明：表示鼠标按下激活超链接时。
        
        　　4.3.4 :focus
        
        input:focus { border: 1px solid red;}
        
        　　　　说明：表示获得焦点时。
        
        　　4.4 其他伪类选择器
        
        　　4.4.1 :not
        
        a:not([href*="baidu"]) { color: red;}
        
        　　　　说明：对条件进行反选
        
        　　4.4.2 :empty
        
        :empty { display: none;}
        
        　　　　说明：匹配没有任何内容的元素
        
        　　4.4.3 :target
        
        :target { color: red;}
        
        　　　　说明：定位到锚点时，选择此元素
        
        暂时总结到这里……
        
        声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

2.css选择器_html/css_WEB-ITnose

html锚点使用示例_html/css_WEB-ITnose

纯css实现苹果表盘动画_html/css_WEB-ITnose

【CSS基础】优先级、引入方式、Hack_html/css_WEB-ITnose

IE8下jQuery改变png图片透明度时出现的黑边问题_html/css_WEB-ITnose

表格打印跨页_html/css_WEB-ITnose

导航栏显示不正常_html/css_WEB-ITnose

小强的HTML5移动开发之路（34）——jQuery中的选择器

IE下自己制作选项卡菜单类中遇到的iframe缓存问题_html/css_WEB-ITnose

【CSS】纯CSS实现三级导航（模板）_html/css_WEB-ITnose

CSS 引入方式_html/css_WEB-ITnose