5-css选择器

青旅半醒 2021-07-24 16:59 421阅读 0赞

标签选择器

通过标签的名字，修改css样式

div{ 
    	width: 200px;
    	height: 300xp;
    }

通配符选择器

`*`选择页面中所有的元素

* { 
    	margin: 0;
    	padding: 0;
    }

一级子元素选择器

选择某个父元素的直接子元素

后代选择器是选择父元素的所有子孙元素，一级子元素原则只选择第一级子元素，不会再向下查找元素

.box > p { 
    	background-color: red;
    }

id选择器

通过id查找页面中唯一的标签，用\#表示id

#dada { 
    	width: 200px;
    	height: 200px;
    }

class选择器

通过特定的`class`来查找页面中对应的标签

.box{ 
    	width: 200px;
    	height: 300px;
    }
    <div class="box"></div>

伪类选择器

`:hover`鼠标移入某个元素

.box:hover { 
    	color: red;
    }

`:before`在某个元素的前面插入内容

div:before { 
    	content: '-dadaqianduan';
    	background-color: yellow;
    	color: red;
    }

`:afer`在某个元素的后面插入内容

div:after{ 
    	content: '-dadaqianduan';
    	color: red;
    }

群组选择器

*  可以对多个不同的选择器设置相同的样式

.box, .box1, .box2 { 
    	width: 200px;
    	height: 300px;
    }

选择器的优先级

当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。

通过测算那个选择器的权重值最高，应用哪一个选择器的样式

权重计算方式

*  标签选择器：1
 *  class选择器：10
 *  id选择器：100
 *  行内样式：1000
 *  !important最高级别，提高样式权重，拥有最高级别

注意：

如果两个选择器的权重值一样高，应用距离对象最近的`css`样式

发表评论取消回复

表情：

评论列表（有 0 条评论，421人围观）

还没有评论，来说两句吧...

相关阅读

相关 java web-1.5CSS选择器

CSS语法格式格式选择器{ 属性名1：属性值1；属性名2：属性值2； ... } 选择器分类：基础选择器（id选择

港控/mmm°/ 2023年07月07日 08:14/ 0 赞/ 84 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 353 阅读

相关 css通用选择器用_通用选择器（CSS选择器）

css通用选择器用描述 (Description) The universal selector matches any element type. It can b

朱雀/ 2022年12月03日 11:26/ 0 赞/ 324 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 355 阅读

相关 css知多少（5）——选择器

1. 引言　　从本节开始，就进入本系列的第二个部分——css和html的结合——说白了就是选择器。　　CSS中定义了样式，如何将这些样式设置到相应的html节点上？

野性酷女/ 2022年08月04日 11:51/ 0 赞/ 247 阅读

相关 HTML5+CSS3选择器

一、HTML5的认识 HTML5相较于HTML4进行了升级，比HTML4语义化更明确，新增了一些标签，同时也废除了一些元素旧的标签。 1.HTML5新增的语义化结构元

电玩女神/ 2022年04月11日 12:17/ 0 赞/ 283 阅读

相关 JavaScript基础5-CSS层叠样式表，选择器，多级选择器组合选择器伪选择器

css层叠样式表基础： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

约定不等于承诺〃/ 2022年02月01日 14:59/ 0 赞/ 272 阅读

相关 CSS--选择器

前言内容标记选择器类别选择器 ID选择器集体声明总结 end 前言

痛定思痛。/ 2021年09月27日 05:30/ 0 赞/ 486 阅读

相关 5-css选择器

标签选择器通过标签的名字，修改css样式 div{ width: 200px; height: 300xp; } 通配符选择器

青旅半醒/ 2021年07月24日 16:59/ 0 赞/ 422 阅读

相关 css 选择器

Css中的选择器：

忘是亡心i/ 2021年06月24日 13:59/ 0 赞/ 653 阅读