CSS高级样式选择器

CSS中有一些伪类在选择某种特定元素时还是很方便的,在此做一个整理。 默认html已经声明过 <!DOCTYPE>,因此都可以支持ie各种版本。 1、选择相邻兄弟 + 不同类型的element,通过+来指定谁后面的谁。 如:h1 + p {margin-top:50px;} 那么标题后面的第一个p WP网站建设

CSS中有一些伪类在选择某种特定元素时还是很方便的,在此做一个整理。
默认html已经声明过 <!DOCTYPE>,因此都可以支持ie各种版本。

1、选择相邻兄弟 +
不同类型的element,通过+来指定谁后面的谁。
如:h1 + p {margin-top:50px;} 那么标题后面的第一个p的上外边距就被拉开了;
等等,如果是要某元素所有后面的兄弟元素呢?就用 “ ~ ”
不仅仅是相邻的第一个,而是相邻的后面所有的某类型的兄弟,如:p~ul ,只要ul在p后面,且他们是兄弟元素,就被命中;

2、仅选择第一代子元素 >
如果想只选择属于某元素的子代的元素,而非孙子、曾孙……,可以用>来缩小选择范围,
如:table.company td > p

3、通过属性来定位元素 attribute
属性值等于xx,用 = , 如:a[target=_blank]
属性值刚好包含xx,即xx为一个完整的单词,用~=, 如:a[title~=flower] ,如果属性值为redflower就不行,因为flower不是单独存在。
属性值只要包含xx关键字,用*=,如:div[class*=test]
属性值以xx开头,用 |= 或^= ,如:a[lang|=en]
属性值以xx结尾,用 $= , 如:a[src$=”.pdf”]

4、获得焦点的元素
获得键盘事件、或可让用户输入的元素都可以获得焦点
如:input:focus

5、每个属于父元素的第一个子元素的某元素
如:p:first-child,只要p有父元素,并且自己是第一个子元素,那么命中;

6、在元素的内容前面或后面加入一些新内容
:after :before 如: p:before { content:”台词:”; }

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/7636

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code