选择器

a选择器 一,相邻选择器; 1,相邻选择器 1),定义:相邻选择器匹配指定元素的相邻兄弟元素 2),用法:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 3),表示符号: 使用加号(+)作为结合符 4),使用前提: a,必须有共同的父元素; b,必须相邻; 2,通用兄弟选择器匹配某元素后面的所有兄弟元素 1),定义:通用兄弟选择器匹配某元素后面的所有兄弟元素 2),用法:两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1 3),符号;使用符号(~)作为结合符,即 element1~element2 4),使用前提: 拥有共同的父元素; 二,属性选择器; 1),定义:属性选择器能够将元素附带的属性用于选择器中,从而对带有指定属性的元素设置样式 2),写法:demo [title] { color:red; } 选择带有 title 属性(鼠标停留显示的内容)的所有元素 3),常见写法: 三,伪类选择器; 1,目标伪类:target, target: 1,作用: 通过锚点#找到目标元素,通过target伪类把样式赋给目标元素; 2,注意点: 1),如果目标元素是a标签,属性只能用id和name 2),如果目标元素是其他标签,属性只能是id; 3)demo: HTML:
跳转至内容 1
跳转至内容 2



内容 1...
内容 2...
CSS: :target { font-size:20pt; border:1px solid blue; } div:target { background-color:red; } a:target{ color: green; } 2,元素状态伪类: 1,enabled,匹配每个已启用的元素(大多用在表单元素上) disabled,匹配每个被禁用的元素(大多用在表单元素上) checked,匹配每个已被选中的 input 元素(只用于单选按钮和复选框) 2,demo: HTML: ID:

名称:

状态:启用 停用
CSS: input:enabled { font-weight:bold;} input:disabled { background-color:#ccc;color:Gray;} input:checked {background-color:#f00;} 3,结构伪类: first-child ,匹配属于其父元素的首个子元素 :last-child,匹配属于其父元素的最后一个子元素 :empty ,匹配没有子元素(包括文本节点)的每个元素 :only-child ,匹配属于其父元素的唯一子元素 示例 p:first-child ? 选择属于父元素的第一个子元素的每个
元素 p:last-child ?选择属于父元素的最后一个子元素的每个
元素 p:empty ? 选择没有子元素的每个
元素 p:only-child ? 选择属于其父元素的唯一子元素的每个
元素 demo: HTML:
段落1111
段落2222
段落3333
CSS: p:first-child {color:Blue;} p:last-child {color:Red;} p:empty {border:1px solid green;height:20px;} div:only-child {border:1px solid black;} 4,否定伪类 1),定义:not(selector) ,匹配非指定元素/选择器的每个元素 2),demo HTML:

CSS: input:not([type="text"]) { font-size:15px; font-weight:bold; color:Red; } 四,伪元素选择器; 1,伪元素 :first-letter: 用法用处: :first-letter 选择器用于选取指定选择器的首字母 常用于排版细节,如首字母突出显示、下沉等 demo: HTML:
h1 文本
段落文本111
段落文本222
CSS: p:first-letter { font-size:20pt; color:#8A2BE2; font-weight:bold; } 2,伪元素 :first-line 用法用处::first-line 选择器用于选取指定选择器的首行 demo: HTML:
这是一个文本比较多的段落,有多行文本。需要设置第一行文本的特定样式。
CSS: p:first-line { font-size:20pt; color:#8A2BE2; font-weight:bold; } 3,伪元素 ::selection 用法用处:::selection 选择器匹配被用户选取的部分 demo: HTML: 页面文本,可以使用鼠标拖拽的方式直接选中,查看效果。
段落文本
div中的文本
CSS: ::selection { color:#f00; }

原文地址:https://www.cnblogs.com/pengleibin-1993/p/5697093.html